テクスチャマッピング～Webサイトで3Dコンテンツ(Three.js)デザイン

Three.jsでテクスチャマッピングを行う(Three.js[r145]を使用)

マウス左ドラッグで回転、右ドラッグで移動、ホイールで拡大縮小できます。

床にjpg画像のテクスチャを適用しています。
石積のシームレスJPEGテクスチャ画像
樹木は透過png画像のテクスチャを適用しています。
床に樹木の影がなるべく正しく表現されるように「カスタム深度マテリアル（customDepthMaterial）」を設定しています。
樹木の透過型PNGテクスチャ画像

//■テクスチャマッピング用画像のロードと設定
//床用テクスチャ(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
});

Javascriptで3Dコンテンツ一覧へ