three.js之讓物體動起來方式（二）移動物體

時間 2019-12-05

原文原文鏈接

<!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 = 1;
        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(0xFF0000);  // 建立環境光源，不產生陰影
        light.position.set(100, 100, 200);
        scene.add(light);
        light = new THREE.PointLight(0x00FF00);  // 建立點光源
        light.position.set(0, 0, 300);
        scene.add(light);
    }

    var mesh;  // 建立模型

    function initObject() {
        var geometry = new THREE.CylinderGeometry(100, 150, 400);  // THREE.CylinderGeometry構造圓柱體
        var material = new THREE.MeshLambertMaterial({color: 0xFFFFFF});  //THREE.MeshLambertMaterial高級材質，構造相似木頭、石頭等不光滑的表面
        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() {
        mesh.position.x += 1;  // mesh就是指的物體，它有一個位置屬性position，這個position是一個THREE.Vector3類型變量，因此你要把它向左移動，只須要將x的值不斷的減小就能夠了。這裏咱們減去的是1個單位。
        renderer.render(scene, camera);
        requestAnimationFrame(animation);
    }

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