Let the object move three.js embodiment (b) of the moving object

<!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() {

        the renderer = new new THREE.WebGLRenderer ();   // Create renderer 
        renderer.setSize (window.innerWidth, window.innerHeight);   // set the length and width 
        document.getElementById ( 'canvas-frame') appendChild (renderer.domElement). ;   // add to Frame-Canvas 
        renderer.setClearColor (0xFFFFFF, 1.0);   // set the background color and transparency 

    } 

    var camera;   // camera 

    function initCamera () { 
        camera = new 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 = newTHREE.AmbientLight (0xFF0000);   // create ambient light source, no shadows 
        light.position.set (100, 100, 200 is ); 
        scene.add (Light); 
        Light = new new THREE.PointLight (0x00FF00);   // Create Point source 
        light.position.set (0, 0, 300 ); 
        scene.add (light); 
    } 

    var Mesh;   // create a model 

    function the initObject () {
         var Geometry = new new THREE.CylinderGeometry (100, 150, 400);   / / THREE.CylinderGeometry cylindrical configuration 
        var Material's = new newTHREE.MeshLambertMaterial ({Color: 0xFFFFFF});   // THREE.MeshLambertMaterial advanced materials, matte surface configuration similar to wood, stone, etc. 
        Mesh = new new THREE.Mesh (Geometry, Material's);   // constructor Mesh net is such: Mesh (geometry, material) geometry is its shape, material is its texture 
        mesh.position = new new THREE.Vector3 (0, 0, 0 ); 
        scene.add (Mesh); 
    } 

    function threeStart () { 
        initThree (); 
        initCamera (); 
        initScene (); 
        initLight (); 
        the initObject (); 
        Animation (); 

    } 

    function Animation () { 
        mesh.position.x= 1 +;   // Mesh refers to an object, it has a position property position, this position is a THREE.Vector3 type variable, so you want to move it to the left, just want the value of x will be able to continue to decrease . Here we are minus one unit. 
        renderer.render (SCENE, Camera); 
        requestAnimationFrame (Animation); 
    }

 </ Script> 
</ body> 
</ HTML>

The only difference between the moving object and the camera is moving

mesh.position.x += 1;

Incidental three.js code Download

Let the object move three.js embodiment (b) of the moving object

Guess you like