[Three.js] 平面ジオメトリに画像をテクスチャとして貼り付ける

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);