[Three.js] 平面ジオメトリに画像をテクスチャとして貼り付ける
前回に続き、Three.jsです。
今回は平面ジオメトリとなるPlaneGeometryに画像をテクスチャとして指定しています。
import * as THREE from "three" (function(window, document) { // シーンの生成 const scene = new THREE.Scene(); // カメラ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // レンダラーの生成と追加(要するにcanvas要素である) const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild( renderer.domElement ); // ライトの追加(環境光) const light = new THREE.AmbientLight(0xFFFFFF, 1.0); scene.add(light); // ライトの追加(特定方向に照射される光源) const directLight = new THREE.DirectionalLight(0xFFFFFF, 1); scene.add(directLight); // 平面ジオメトリ const geometry = new THREE.PlaneGeometry(16, 9); // テクスチャとして平面に貼り付ける画像をロード const loader = new THREE.TextureLoader(); const texture = loader.load('./images/textture.jpg'); // MeshBasicMaterialにテクスチャを渡す。 const material = new THREE.MeshBasicMaterial({ map:texture }); const plane = new THREE.Mesh(geometry, material); scene.add(plane); camera.position.z = 20; plane.rotation.x = 0.2; plane.rotation.y = 0.08; function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); })(window, document);
肝はTextureLoaderとMeshBasicMaterialの箇所です。
これはあくまでも簡易的且つ手段の一つでしかないです。
今回は動きをつけていません。