THREE.Sceneについて少し調べる

THREE.Sceneは、オブジェクトを配置する基盤なのですが、THREE.Scene.addしか使ったことがなかったので、他にどんなことができるか調べました。

THREE.Sceneでよく使う関数

オブジェクトをシーンに追加

オブジェクトをシーンから削除

シーン内の全ての子要素を取得

名前を指定して、シーンから特定のオブジェクトを取得

var cube = new THREE.Mesh(Geometryを設定,Materialを設定);
cube.name = 'cube-1'
scene.add(cube);

THREE.Scene.getObjectName('cube-1');

scene.traverseはsceneに配置されたすべて子要素や、入れ子になっている孫要素などを引数として受け取ることができます。

 scene.traverse(function(obj) {
    if (obj instanceof THREE.Mesh === true) {
      obj.rotation.x += 0.01;
      obj.rotation.y += 0.01;
    }
  });

See the Pen OgROYM by nogson (@satofaction) on CodePen.

Fogを使用するとカメラから遠ざかるほど、オブジェクトがはっきり見えなくなるような効果を与えることができます。

//new THREE.Fog(フォグの色,nearプロパティ,farプロパティ);
scene.fog = new THREE.Fog(0x000000,0.015,19);

See the Pen awmExb by nogson (@satofaction) on CodePen.

overrideMaterialを使用すると、sceneにある全てのオブジェクトのマテリアルにoverrideMaterialで設定したマテリアルを適応することができます。

scene.overrideMaterial = new THREE.MeshPhongMaterial({color:0xffffff});

See the Pen OgRQWE by nogson (@satofaction) on CodePen.

今回紹介した以外にもsceneのプロパティは他にもあるようです。公式のドキュメントを確認してみてください。