芝生のレンダリング

grass.png

用意するもの

  • 背景透過している芝生のテクスチャ

レンダリング

<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.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);
    var texloader = new THREE.TextureLoader();
    var tex=texloader.load("http://miffysora.wdfiles.com/local--files/grass/grass512.png");
    planeGeometry = new THREE.PlaneGeometry( size.x, size.y, 10, 10 );//大きさ1000*100,分割数10*10
    planeMaterial = new THREE.MeshBasicMaterial( { map: tex,transparent:true,depthTest:false ,side: THREE.DoubleSide} );
 
    planeMesh1 = new THREE.Mesh( planeGeometry, planeMaterial );
    planeMesh2 = new THREE.Mesh( planeGeometry, planeMaterial );
    planeMesh3 = new THREE.Mesh( planeGeometry, planeMaterial );
 
    planeMesh2.rotation.y = 60 * Math.PI / 180; 
    planeMesh3.rotation.y = -60 * Math.PI / 180; 
 
   //芝生の1房をグループ化します
   group = new THREE.Object3D();
   group.add( planeMesh1  );
   group.add( planeMesh2  );
   group.add( planeMesh3  );
   scene.add( group );
animate();
 
function animate() {
   requestAnimationFrame( animate );
   group.rotation.y += 1 * Math.PI / 180; 
   controls.update();
   renderer.render( scene, camera );
}
</script>
</body>

ポイント

    planeMaterial = new THREE.MeshBasicMaterial( { map: tex,transparent:true,depthTest:false ,side: THREE.DoubleSide} );

side: THREE.DoubleSideオプションを追加して裏面描かない設定を無効にします

サポートサイト Wikidot.com