three.js之让物体动起来方式（二）移动物体

时间：2021-12-11 05:33:50
<!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>

移动物体与移动摄像机的唯一区别是

mesh.position.x += 1;

附带three.js代码，点击下载

three.js之让物体动起来方式（二）移动物体

 

标签：

相关文章