Three.jsの基本④ - Three.jsを使って、作ってみた

今回は、Three.jsのscene（シーン）について、やります。

「introduction.html」では、「③scene処理」のここの部分です。

  var scene; //シーンオブジェクト
  function initScene() {    
    scene = new THREE.Scene(); //シーンオブジェクトの生成
  }

重要なのは、

scene = new THREE.Scene();

ここです。

そもそもThree.jsのscene（シーン）とは、シーンオブジェクトに追加したオブジェクトのみが、空間内に配置され、実際の描画の対象になるというものです。

つまり、箱や球体のオブジェクトを作っても、sceneに追加しないと画面には、作ったオブジェクトは描画されません。

sceneは必ずいります！（生成のコードを書いていないとエラーが出ます。多分（笑））
必ず、どこかに、こんな感じのsecneオブジェクト生成のコードを書いてください↓

scene = new THREE.Scene();

そして、球体や箱などのオブジェクトを作ったら、最後に、

scene.add(sphere);　//sphereは球体オブジェクト

を書いて、sceneにオブジェクトを追加してください。

では、実際にsceneに作ったオブジェクトを追加した場合としなかった場合を比べてみます。
使うプログラムは「introduction.html」です。
これの、⑤オブジェクト処理の部分を少しいじります。

  var sphere,plane,axis;                                                     
  function initObject(){
  
        sphere = new THREE.Mesh(                                            
                  new THREE.SphereGeometry(200),                           
                  new THREE.MeshPhongMaterial({                                       
                       color: 0xffffff                                   
                       }));
　　　sphere.castShadow = true;
      sphere.receiveShadow = true;
      scene.add(sphere);    //ここをいじります！！                                           
      sphere.position.set(0,0,500);                                   
      
      
     plane =  new THREE.Mesh(                                       
              new THREE.CircleGeometry(1000, 100),                 
              new THREE.MeshLambertMaterial({                           
                side: THREE.DoubleSide,                             
                color: 0x000000,                                                                  
                }));        
     plane.receiveShadow = true;         
     plane.position.set(0,0,1);                       
     scene.add(plane);                                 
     
     axis = new THREE.AxisHelper(1000);             
     scene.add(axis);                              
     axis.position.set(0,0,1);                       
  }

いじるところは、

scene.add(sphere);

ここです。この一文は、上でも書いたとおり、sceneに球体オブジェクトを追加している所です。
このままだと、このように球体は描画されます。
f:id:gupuru:20131118195702p:plain
しかし、先ほどの一文を削除すると、こうなります。
f:id:gupuru:20131121173013p:plain
球体が消えてます。