three.js之讓物體動起來方式（一）移動攝像機

時間 2019-12-12

標籤 three.js 物體起來方式移動攝像機欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script src="../static/three.js-master/build/three.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }

        </style>

    </head>

    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    <script>
            var renderer;  // 渲染器
            function initThree() {
                renderer = new THREE.WebGLRenderer();  // 建立渲染器
                renderer.setSize(window.innerWidth, window.innerHeight);  // 設置長度和寬度
                document.getElementById('canvas-frame').appendChild(renderer.domElement);  // 添加到canvas-frame
                renderer.setClearColor(0xFFFFFF, 1.0);  // 設置背景色和透明度
            }

            var camera;  // 攝像機
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);  // 建立攝像機
                camera.position.x = 0;  // 攝像機座標
                camera.position.y = 0;
                camera.position.z = 1000;
                camera.up.x = 0;
                camera.up.y = 0;
                camera.up.z = 0;
                camera.lookAt(0, 0, 0);
            }

            var scene;  // 場景
            function initScene() {
                scene = new THREE.Scene();  // 建立場景
            }

            var light;  // 光
            function initLight() {
                light = new THREE.AmbientLight(0xFFFFFF);  // 建立環境光源，不產生陰影
                light.position.set(100, 100, 200);
                scene.add(light);
                light = new THREE.PointLight(0x00FF00);  // 建立點光源，能夠產生陰影
                light.position.set(0, 0,300);
                scene.add(light);
            }

            function initObject() {
                var geometry = new THREE.CylinderGeometry( 100,150,400);  // THREE.CylinderGeometry構造圓柱體
                var material = new THREE.MeshLambertMaterial( { color:0xFFFF00} );  //THREE.MeshLambertMaterial高級材質，構造相似木頭、石頭等不光滑的表面
                var mesh = new THREE.Mesh( geometry,material);  // 網狀 Mesh的構造函數是這樣的：Mesh( geometry, material ) geometry是它的形狀，material是它的材質
                mesh.position = new THREE.Vector3(0,0,0);
                scene.add(mesh);
            }

            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                animation();

            }
            function animation()
            {
                //renderer.clear();
                camera.position.x =camera.position.x +1;  // 關鍵地方  沒調一次animation()方法，x就自加1，就會讓攝像機的位置改變，這樣看到的物體就動了
                renderer.render(scene, camera);   // 渲染
                requestAnimationFrame(animation);  // 循環調用animation()方法
            }

        </script>
    </body>
</html>

物體運動還有一個關鍵點，就是要渲染物體運動的每個過程，讓它顯示給觀衆。渲染的時候，咱們調用的是渲染器的render() 函數。代碼以下：javascript

renderer.render( scene, camera );

若是咱們改變了物體的位置或者顏色之類的屬性，就必須從新調用render()函數，纔可以將新的場景繪製到瀏覽器中去。否則瀏覽器是不會自動刷新場景的。css

若是不斷的改變物體的顏色，那麼就須要不斷的繪製新的場景，因此咱們最好的方式，是讓畫面執行一個循環，不斷的調用render來重繪，這個循環就是渲染循環，在遊戲中，也叫遊戲循環。html

爲了實現循環，咱們須要javascript的一個特殊函數，這個函數是requestAnimationFrame。java

調用requestAnimationFrame函數，傳遞一個callback參數，則在下一個動畫幀時，會調用callback這個函數。canvas

function animation()
            {
                //renderer.clear();
                camera.position.x =camera.position.x +1;  // 關鍵地方  沒調一次animation()方法，x就自加1，就會讓攝像機的位置改變，這樣看到的物體就動了
                renderer.render(scene, camera);   // 渲染
                requestAnimationFrame(animation);  // 循環調用animation()方法
            }

也就是不斷的執行render()函數。在render()函數中不斷的改變物體或者攝像機的位置，並渲染它們，就可以實現動畫了。瀏覽器

附帶three.js代碼，點擊下載app

攝像機不斷右移，因此物體相對不斷左移。框架