物体が移動物体のthree.js実施例（B）を移動してみましょう

<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>三框架</ TITLE> 
    <スクリプトSRC =」../静的/ three.js-マスター/構築/ 3。 JS "> </ SCRIPT> 
    <スタイルタイプ="テキスト/ cssの"> 
        のdiv＃キャンバス - フレーム{ 
            国境：なし; 
            カーソル：ポインタ; 
            幅： 100％; 
            高さ：600PX。
            背景 - 色：#EEEEEE; 
        }

     </スタイル> 

</ HEAD> 

<BODYのonload = "threeStart（）;"> 
<DIV ID = "キャンバスフレーム"> </ div> 
<スクリプト> のvar レンダラ。機能initThree（）{
    

    

        レンダラ = 新しい新しい THREE.WebGLRenderer（）;   //はレンダラ作成 
        renderer.setSize（window.innerWidth、window.innerHeightを）;   // 長さと幅設定 
        のdocument.getElementById（ 'キャンバスフレームを'）のappendChild（renderer.domElement）。 ;   // フレーム、キャンバスに追加 
        renderer.setClearColor（0xFFFFFFの、1.0）;   // 背景色と透明度を設定

    } 

    VARのカメラ;   // カメラ

    機能initCamera（）{ 
        カメラは = 新しい新しい THREE.PerspectiveCamera（45、window.innerWidth /窓.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のシーン。  // 场景

    機能initScene（）{ 
        シーン = 新しいTHREE.Scene（）。
    } 

    VARの光。  // 光线

    機能initLight（）{ 
        光 = 新しいですTHREE.AmbientLight（は0xFF0000）;   //は周囲光源を作成する、無影 
        light.position.set（100、100、200である）; 
        scene.add（ライト）
        ライト = 新しい新しい THREE.PointLight（0x00FF00）;   // ポイントを作成ソース 
        light.position.set（0、0、300 ）; 
        scene.add（光）; 
    } 

    VARのメッシュ;   // モデル作成

    機能をinitObject（）{
         VARのジオメトリ= 新しい新しい THREE.CylinderGeometry（100、150、400）;   / / THREE.CylinderGeometry円筒形
        VAR素材の= 新新THREE.MeshLambertMaterial（{色：0xFFFFFFの}）;   // THREE.MeshLambertMaterial先端材料、等木材と同様マット表面形状、石は、 
        =メッシュ新しい新しい THREE.Mesh（形状、材質のを）;   // コンストラクタメッシュネットであります例えば：メッシュ（ジオメトリ、材料）形状は、材料がそのテクスチャ形状である 
        mesh.position = 新しい新しい THREE.Vector3（0、0、0 ）; 
        （メッシュ）scene.add; 
    } 

    関数threeStart（）{ 
        initThree （）; 
        initCamera（）; 
        initScene（）; 
        initLight（）; 
        initObject（）; 
        アニメーション（）; 

    } 

    関数アニメーション（）{ 
        mesh.position.x= 1 +;   // メッシュがオブジェクトを指し、それはpositionプロパティの位置を持って、この位置はTHREE.Vector3型変数であるので、あなたが左に移動したい、ちょうどxの値が減少し続けることができるようになりたいです。ここでは、一つのユニット減じたものです。
        renderer.render（SCENE、カメラ）; 
        requestAnimationFrameの（アニメーション）; 
    }

 </ SCRIPT> 
</ BODY> 
</ HTML>

移動物体とカメラとの間の唯一の違いは、移動しています

mesh.position.x + = 1;

偶発three.jsコードのダウンロード

物体が移動物体のthree.js実施例（B）を移動してみましょう

おすすめ