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

import * as THREE from "three";

import { PhotoPlane } from "./Mesh/PhotoPlane";


(function(window, document) {

	class Common {

		/**
		 * メイン
		 * @constructor
		 */
		constructor() {

			this.scene = null;
			this.camera = null;
			this.renderer = null;

			this.planes = [];

			this.textures = [
				'./images/texture01.jpg',
				'./images/texture02.jpg',
				'./images/texture03.jpg'
			];

			this.init();

		}



		/**
		 * 初期化
		 */
		init = () => {

			// シーンの生成
			this.scene = new THREE.Scene();

			// カメラ
			this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

			// レンダラーの生成と追加（要するにcanvas要素である）
			this.renderer = new THREE.WebGLRenderer();
			this.renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( this.renderer.domElement );

			// ライトの追加（環境光）
			const light = new THREE.AmbientLight(0xFFFFFF, 1.0);
			this.scene.add(light);

			// ライトの追加（特定方向に照射される光源）
			const directLight = new THREE.DirectionalLight(0xFFFFFF, 1);
			this.scene.add(directLight);

			for(let i = 0; i < 3; i++) {
				const plane = new PhotoPlane(this.textures[i]);
				this.scene.add(plane);
				plane.position.y = i * 9 - 9;

				this.planes.push(plane);
			}

			this.camera.position.z = 20;

			this.animate();

		}


		animate = () => {

			requestAnimationFrame( this.animate );

			this.renderer.render( this.scene, this.camera );

		}

	}




	new Common();

})(window, document);

import * as THREE from "three";



/**
 * 画像テクスチャ平面メッシュ
 * @class
 */

export class PhotoPlane extends THREE.Mesh {

	/**
	 *
	 * @constructor
	 */
	constructor(url) {

		const geometry = new THREE.PlaneGeometry(16, 9);

		const loader = new THREE.TextureLoader();
		const texture = loader.load(url);

		const material = new THREE.MeshBasicMaterial( { map:texture } );

		super(geometry, material);

		// this.textures = url;

	}

}