Threejs Model Bumpmapping

threejs-model-bumpmapping.png

フルソースコード

<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.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( 640, 480 );
    document.body.appendChild( renderer.domElement );
 
    camera = new THREE.PerspectiveCamera( 75, 640/480, 1, 10000 );
    camera.position.z = 1000;
 
 //ライティング
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 ); //平行光源(色、強度)
    directionalLight.position.set(0,0,3);
    scene.add( directionalLight ); 
 
    //オブジェクト
    loader = new THREE.JSONLoader();
    var modelpath ='http://miffysora.wdfiles.com/local--files/threejs-3dmodel/bear.json';
    loader.load( modelpath,loadCallBack);
 
    planeGeometry = new THREE.PlaneGeometry( 1000, 1000, 10, 10 );//大きさ1000*100,分割数10*10
 
    planeMaterial = new THREE.MeshBasicMaterial( { color: 0x533E25, wireframe:true} );
    planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
    planeMesh.position.y = -100;
    planeMesh.rotation.x = 90 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
    scene.add( planeMesh );
    animate();
 
function loadCallBack(geometry, materials){
 
      //テクスチャのロード
     var texloader = new THREE.TextureLoader();
     var imagepath ="http://miffysora.wikidot.com/local--files/threejs-3dmodel-texture/bear.jpg"
     var tex=texloader.load(imagepath);
 
     var material = new THREE.MeshLambertMaterial({ map: tex  ,bumpMap:tex, bumpScale: 52});
       json = new THREE.Mesh( geometry, material);
       json.scale.set( 20, 20, 20 );
       json.position.y-=100;
       scene.add( json );
}
 
function animate() {
   requestAnimationFrame( animate );
   json.rotation.y += 1 * 2 * Math.PI / 360; //左に角度いれるとラジアンに変換
   renderer.render( scene, camera );
}
</script>
</body>

bumpmapping

サポートサイト Wikidot.com bumpmapping