js 3d圖形

_York發表於2018-07-09
JS3D

　　使用Three.js在網上中進行3D圖形的展示

　　Three.js的官網 https://threejs.org/

　　第一個Demo，生成一個旋轉的正方體

 

 <style>
        canvas {
            width: 100%;
            height: 100%
        }
    </style>


    <script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
    <script>
        var scene = new THREE.Scene();//場景

        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//透視相機

        var renderer = new THREE.WebGLRenderer();//渲染器

        renderer.setSize(window.innerWidth, window.innerHeight);// 設定渲染器的大小為視窗的內寬度，也就是內容區的寬度

        //renderer畫布,所有的渲染都是畫在renderer.domElement元素上，將元素掛接到body上
        document.body.appendChild(renderer.domElement);

        //建立幾何體CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
        //width：立方體x軸的長度
        //height：立方體y軸的長度
        //depth：立方體z軸的深度，也就是長度
        var geometry = new THREE.CubeGeometry(1, 1, 1);//幾何體()
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render); //渲染迴圈
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;

            /* 渲染，使用渲染器，結合相機和場景來得到結果畫面
             * render( scene, camera, renderTarget, forceClear )
             * 各個引數的意義是：
             * scene：前面定義的場景
             * camera：前面定義的相機
             * renderTarget：渲染的目標，預設是渲染到前面定義的render變數中
             * forceClear：每次繪製之前都將畫布的內容給清除，即使自動清除標誌autoClear為false，也會清除。
             */
            renderer.render(scene, camera);
        }
        render();
    </script>

 

相關文章