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

<!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之让物体动起来方式（二）移动物体

最新文章

热门文章