Three.js BOXの1面ごとにテクスチャを設定する
こんにちは。
プログラム好きなdynaです。
前回、球体に地球っぽいテクスチャを張って表示してみました。
今回は、BOXの面ごとにテクスチャを変えてみたいと思います。
デモはこちら↓ マウスで動くので、試してみてね。
画像だとこんな感じです↓
では、コードを見ていきます。
textureに関する部分だけ、コードで記載します。
シーンやらカメラの話は、以下にありますので、気になった方はどうぞ。
BOXジオメトリを作成する
今回、面にテクスチャの設定をしたいので、ジオメトリはBOXの形にします。
1 2 3 | const geometry = new THREE.BoxGeometry(300, 300, 300); |
THREE.TextureLoader()で画像を読み込む
球体の時と同じように、THREE.TextureLoader()で画像を読み込む準備をします。
1 2 3 4 | // 画像を読み込む const loadPic = new THREE.TextureLoader(); |
読み込みと同時にmapに設定します
マテリアルを作成します。
その時に、1面ごとに画像を指定しながら、mapとして設定します。
1 2 3 4 5 6 7 8 9 10 11 | //マテリアルにテクスチャ貼り付け let material = [ new THREE.MeshBasicMaterial({map: loadPic.load( 'img/jupiter.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/2k_neptune.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/meziro.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/huzi.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/cat.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/siba.jpg' )}) ]; |
全体のコード
全体のコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <div id="WebGL-output"></div> <script type="text/javascript"> //ウィンドウサイズ const width = window.innerWidth; const height = window.innerHeight; //シーンの作成 const scene = new THREE.Scene(); //カメラの作成 const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); camera.position.set(0, 0, +1000); //レンダラーの作成 const webGLRenderer = new THREE.WebGLRenderer(); webGLRenderer.setClearColor(new THREE.Color(0xc0c0c0)); webGLRenderer.setSize(window.innerWidth, window.innerHeight); // 滑らかにカメラコントローラーを制御する const controls = new THREE.OrbitControls(camera, document.body); controls.enableDamping = true; controls.dampingFactor = 0.2; //HTMLに書きだし document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement); //ジオメトリ作成（BOX） const geometry = new THREE.BoxGeometry(300, 300, 300); // 画像を読み込む const loadPic = new THREE.TextureLoader(); //マテリアルにテクスチャ貼り付け let material = [ new THREE.MeshBasicMaterial({map: loadPic.load( 'img/jupiter.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/2k_neptune.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/meziro.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/huzi.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/cat.jpg' )}), new THREE.MeshBasicMaterial({map: loadPic.load( 'img/siba.jpg' )}) ]; // メッシュを作成 const mesh = new THREE.Mesh(geometry, material); // 3D空間にメッシュを追加 scene.add(mesh); // 平行光源 const directionalLight = new THREE.DirectionalLight(0xFFFFFF); directionalLight.position.set(1, 1, 1); // シーンに追加 scene.add(directionalLight); tick(); // 毎フレーム時に実行されるループイベント function tick() { mesh.rotation.z += 0.001; mesh.rotation.y += 0.001; webGLRenderer.render(scene, camera);// レンダリング requestAnimationFrame(tick); } </script> |
Thee.js、楽しいですね・・・・！！！
もっと色々勉強したいと思います。
<Three.jsのおすすめ記事>
<学習本>