ビルボード

billboard.png

常にカメラを向いている平らなポリゴンに2次元テクスチャマップを貼付けることによって、
数多くの特殊効果を実装することができるという技法。
平らなオブジェクトを立体であるかのように錯覚させる効果的な方法である。

ビルボードの例

  • 遠くにいる敵キャラ
  • パーティクルシステム(粒子系)
  • たなびく煙
  • レンズフレアのコロナ

木や芝生の場合

まず、上から見て下図になるようなジオメトリーオブジェクトをつくらないといけません。
どこから見ても不自然にならないようにです。

<body>
<script src="http://miffysora.wdfiles.com/local--files/webgl/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script>
var  scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer({ alpha: true ,antialias:true});
    renderer.setClearColor( new THREE.Color(0xffffff),0.0);//背景色
    renderer.setSize( 200, 200 );
    document.body.appendChild( renderer.domElement );
 
    camera = new THREE.PerspectiveCamera( 45, 200/200, 1, 10000 );
    camera.position.z = 1000;
var controls = new THREE.OrbitControls(camera);
 
   var size=new THREE.Vector2(500,500);
    planeGeometry = new THREE.PlaneGeometry( size.x, size.y, 1, 1 );
    planeMaterial = new THREE.MeshBasicMaterial( { color: 0x533E25, opacity:0.2,transparent:true,depthTest:false,side: THREE.DoubleSide} );
    var lineMaterial = new THREE.LineBasicMaterial({color: 0x533E25,linewidth:2});
 
    planeMesh1 = new THREE.Mesh( planeGeometry, planeMaterial );
    planeMesh2 = new THREE.Mesh( planeGeometry, planeMaterial );
    planeMesh3 = new THREE.Mesh( planeGeometry, planeMaterial );
    planeLine1 = new THREE.Line( planeGeometry, lineMaterial );
    planeLine2 = new THREE.Line( planeGeometry, lineMaterial );
    planeLine3 = new THREE.Line( planeGeometry, lineMaterial );
    planeMesh2.rotation.y = 60 * Math.PI / 180; 
    planeLine2.rotation.y = 60 * Math.PI / 180; 
    planeMesh3.rotation.y = -60 * Math.PI / 180; 
    planeLine3.rotation.y = -60 * Math.PI / 180; 
 
   //3枚のビルボードをグループ化します
   group = new THREE.Object3D();
   group.add( planeMesh1  );
   group.add( planeMesh2  );
   group.add( planeMesh3  );
    group.add( planeLine1 );
    group.add( planeLine2 );
    group.add( planeLine3 );
    scene.add( group);
animate();
 
function animate() {
   requestAnimationFrame( animate );
  group.rotation.y+=1 * Math.PI / 180; 
   controls.update();
   renderer.render( scene, camera );
}
</script>
</body>

grass

サポートサイト Wikidot.com grass