Threejs Bumpmapping

threejs-bumpmapping.png

ポイント

    var material = new THREE.MeshPhongMaterial({  map: tex,bumpMap:tex, bumpScale: 12});

もしでこぼこにならなかったらbumpScaleの値を上げてみよう。
バンプマップは画像のr成分を使用しているらしい。
ちゃんと効いてるかどうか確認するには
map:texを消してbumpMap:texだけにすると白黒になって現れる

フルソースコード

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
  <script>
    var width=200;
    var height=200;
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(65, width / height, 0.1, 1000);
 
    var renderer = new THREE.WebGLRenderer({ alpha: true ,antialias:true});
    renderer.setClearColor( new THREE.Color(0xffffff),0.0);//背景色
    renderer.setSize(width, height); 
    document.body.appendChild(renderer.domElement); 
 
    //ライティング
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 ); //平行光源(色、強度)
    directionalLight.position.set(0,0,3);
    scene.add( directionalLight );
 
    var geometry = new THREE.CubeGeometry(200, 200, 200);
 
    var texloader = new THREE.TextureLoader();
    var imagepath ="http://miffysora.wdfiles.com/local--files/threejs-texture/mag.jpg";
    var tex=texloader.load(imagepath);
 
     var material = new THREE.MeshPhongMaterial({ map: tex, bumpMap:tex, bumpScale: 52 ,reflectivity: 1.0 });
     var cube = new THREE.Mesh(geometry, material);
     scene.add(cube);
 
    camera.position.z = 600; 
 
    var render = function () {
      cube.rotation.x += 0.01; 
      cube.rotation.y += 0.01;
 
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    };
 
    render();
  </script>
</body>

bumpmapping

サポートサイト Wikidot.com bumpmapping