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

​

    }

​

}

​