Three.jsでテクスチャマッピングを行う(Three.js[r145]を使用)
マウス左ドラッグで回転、右ドラッグで移動、ホイールで拡大縮小できます。
床にjpg画像のテクスチャを適用しています。
樹木は透過png画像のテクスチャを適用しています。
床に樹木の影がなるべく正しく表現されるように「カスタム深度マテリアル（customDepthMaterial）」を設定しています。
//■テクスチャマッピング用画像のロードと設定 //床用テクスチャ(800x300ピクセルのJPEG画像) let floorTexture=new THREE.TextureLoader().load('./three_r145/img/stone.jpg'); floorTexture.wrapS=THREE.RepeatWrapping; floorTexture.wrapT=THREE.RepeatWrapping; //テクスチャの繰り返し回数を指定する floorTexture.repeat.set(4,4); //床のフォンシェーディングマテリアル（光源の影響を受ける光沢のある材質）を作成する let floorMaterial=new THREE.MeshPhongMaterial({ color:0x999999, specular: 0xFFFFFF, shininess: 2, side:THREE.DoubleSide,//両面を表示する設定 transparent:false, opacity:1.0, wireframe:false, wireframeLinewidth:0, map: floorTexture });