Three.jsでLOD

ツイート

システム部の稲葉です。
Level of detailで近くのものは鮮明に、遠くのものは・・・それなりに。

メモリの使用量がやばそうな気がしますが。

  lod()
  {
    var geometry = [
      [ new THREE.IcosahedronGeometry( 100, 4 ), 50 ],
      [ new THREE.IcosahedronGeometry( 100, 3 ), 300 ],
      [ new THREE.IcosahedronGeometry( 100, 2 ), 1000 ],
      [ new THREE.IcosahedronGeometry( 100, 1 ), 2000 ],
      [ new THREE.IcosahedronGeometry( 100, 0 ), 8000 ]
    ];
    var material = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: true } );

    var i, j, mesh, lod;

    for ( j = 0; j < 1000*3; j ++ ) {
      lod = new THREE.LOD();
      for ( i = 0; i < geometry.length; i ++ ) {
        mesh = new THREE.Mesh( geometry[ i ][ 0 ], material );
        mesh.scale.set( 1.5, 1.5, 1.5 );
        mesh.updateMatrix();
        mesh.matrixAutoUpdate = false;
        lod.addLevel( mesh, geometry[ i ][ 1 ] );
      }
      lod.position.x = 10000 * ( 0.5 - Math.random() );
      lod.position.y =  7500 * ( 0.5 - Math.random() );
      lod.position.z = 10000 * ( 0.5 - Math.random() );
      lod.updateMatrix();
      lod.matrixAutoUpdate = false;
      this.scene.add( lod );
    }
  }