2回目はテクスチャの貼り込みです。
※テクスチャファイルの読込はPCから直接取り込むことはできません。
サーバーにアップして確認するか、ローカルサーバーを立てて作業しましょう。
六面体にそれぞれ違うテクスチャを貼り付ける。
前回作った立方体6面にそれぞれ違うテクスチャを貼り付けます。
前回作ったマテリアル部分を配列にして、それぞれ指定。
テクスチャは
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture(“images/texture00.png”)}),
で指定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
//6面分のマテリアルを生成 var materials = [ new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture00.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture01.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture02.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture03.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture04.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture05.png")}), ]; var material = new THREE.MeshFaceMaterial(materials); // マテリアルをセット var cube = new THREE.Mesh( geometry, material); // 立方体にマテリアルを適用 |
これだけです。
いろいろなテクスチャー設定
テクスチャの設定には通常の張り方の他にバンプマッピングや、透過PNGの透過をオブジェクトに適用する張り方もあります。
陸地の形にバンプマッピング、雲に透過PNGを適用しています。
※地球のテクスチャはNASAのサイトからダウンロード。
Blue Marble Next Generation
画像を読み込むまでは一緒で、mapの代わりにbumpMapを使う。
bumpMap: earthbumpTexture, bumpScale: 3
起伏を大きくしたいときはbumpScaleの値を大きくする。
透過PNGの適用は通常のmapにtransparent: trueを追加
map: cloudsTexture, transparent: true
|
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 |
// 球体オブジェクト（地球） var geometry = new THREE.SphereGeometry(150, 100, 100); // 地球テクスチャの読み込み var earthTexture = THREE.ImageUtils.loadTexture( "images/earth01.png" ); // 地球バンプテクスチャの読み込み var earthbumpTexture = THREE.ImageUtils.loadTexture( "images/earth-bump.png" ); // マテリアルの設定 var material = new THREE.MeshPhongMaterial( { map: earthTexture, color: 0xFFFFFF,specular:0x050505, bumpMap: earthbumpTexture, bumpScale: 3 }); // 球体にマテリアル合成 earth = new THREE.Mesh(geometry, material); // シーンへの追加 scene.add(earth); // 球体オブジェクト（雲）やや大きめに。 var geometry = new THREE.SphereGeometry(153, 100, 100); // 雲テクスチャの読み込み var cloudsTexture = THREE.ImageUtils.loadTexture( "images/earth-cloud.png" ); // マテリアルの設定 PNGの透明部分をいかす var materialClouds = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, map: cloudsTexture, transparent: true }); // 球体にマテリアル合成 cloud = new THREE.Mesh( geometry, materialClouds ); // シーンへの追加 scene.add( cloud ); |
6面体の全コード
|
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<!DOCTYPE html> <html lang="en"> <head> <title>BOX</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body,html { margin: 0px; overflow: hidden; width: 100%; height: 100%; position: relative; } .header { position: absolute; top: 30px; left: 30px; z-index: 10; } </style> </head> <body> <script src="../js/three.min.js"></script> <script src="../js/controls/TrackballControls.js"></script> <script> scene = new THREE.Scene(); // ブラウザのサイズ取得 var broweseSizeX = window.innerWidth; var broweseSizeY = window.innerHeight; // ------------------------------------------------------- // カメラ // ------------------------------------------------------- // カメラの初期設定 var fov = 80; var aspect = broweseSizeX / broweseSizeY; var near = 1; var far = 1000; // カメラの設置 camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); camera.position.z = 500; scene.add( camera ); // マウスでカメラを動かす trackball = new THREE.TrackballControls( camera ); // ------------------------------------------------------- // ライト // ------------------------------------------------------- // ライティング var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); //平行光源（色、強度） directionalLight.position.set(0,0,3); scene.add( directionalLight ); var ambientLight = new THREE.AmbientLight( 0x333333); //平行光源（色、強度） scene.add( ambientLight ); // ------------------------------------------------------- // オブジェクト // ------------------------------------------------------- // 立方体 var geometry = new THREE.BoxGeometry(200,200,200); // 立方体を用意 //6面分のマテリアルを生成 var materials = [ new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture00.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture01.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture02.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture03.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture04.png")}), new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("images/texture05.png")}), ]; var material = new THREE.MeshFaceMaterial(materials); // マテリアルをセット var cube = new THREE.Mesh( geometry, material); // 立方体にマテリアルを適用 cube.rotation.x = 0.5; cube.rotation.y = 0.5; scene.add( cube ); // シーンに追加 // ------------------------------------------------------- // レンダラー // ------------------------------------------------------- renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild(renderer.domElement); // ------------------------------------------------------- // アニメーション // ------------------------------------------------------- function animate () { // 立方体を回転 cube.rotation.z += 0.01; requestAnimationFrame( animate ); // レンダリングを呼び出し rendering(); } // ------------------------------------------------------- // レンダリング // ------------------------------------------------------- function rendering() { // レンダリング renderer.render( scene, camera ); // マウスコントロール trackball.update(); } animate(); </script> <h1 class="header"> <a href="http://www.conekuto.com" target="_blank"> <img src="http://www.conekuto.com/wp-content/uploads/2015/03/logo01.png" alt="コネクト" scale="0"> </a> </h1> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-59385562-1', 'auto'); ga('send', 'pageview'); </script> </body> </html> |
地球の全コード
|
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
<!DOCTYPE html> <html lang="en"> <head> <title>TEXTURE EARTH</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body,html { margin: 0px; overflow: hidden; width: 100%; height: 100%; position: relative; } .header { position: absolute; top: 30px; left: 30px; z-index: 10; } </style> </head> <body> <script src="../js/three.min.js"></script> <script src="../js/controls/TrackballControls.js"></script> <script> scene = new THREE.Scene(); // ブラウザのサイズ取得 var broweseSizeX = window.innerWidth; var broweseSizeY = window.innerHeight; // ------------------------------------------------------- // カメラ // ------------------------------------------------------- // カメラの初期設定 var fov = 80; var aspect = broweseSizeX / broweseSizeY; var near = 1; var far = 1000; // カメラの設置 camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); camera.position.z = 500; scene.add( camera ); // マウスでカメラを動かす trackball = new THREE.TrackballControls( camera ); // ------------------------------------------------------- // ライト // ------------------------------------------------------- // ライティング var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); // 平行光源（色、強度） directionalLight.position.set(-2,2,3); scene.add( directionalLight ); var ambientLight = new THREE.AmbientLight( 0x333333); // 環境光（色、強度） scene.add( ambientLight ); // ------------------------------------------------------- // オブジェクト // ------------------------------------------------------- // 球体オブジェクト（地球） var geometry = new THREE.SphereGeometry(150, 100, 100); // 地球テクスチャの読み込み var earthTexture = THREE.ImageUtils.loadTexture( "images/earth01.png" ); // 地球バンプテクスチャの読み込み var earthbumpTexture = THREE.ImageUtils.loadTexture( "images/earth-bump.png" ); // マテリアルの設定 var material = new THREE.MeshPhongMaterial( { map: earthTexture, color: 0xFFFFFF,specular:0x050505, bumpMap: earthbumpTexture, bumpScale: 3 }); // 球体にマテリアル合成 earth = new THREE.Mesh(geometry, material); // シーンへの追加 scene.add(earth); // 球体オブジェクト（雲）やや大きめに。 var geometry = new THREE.SphereGeometry(153, 100, 100); // 雲テクスチャの読み込み var cloudsTexture = THREE.ImageUtils.loadTexture( "images/earth-cloud.png" ); // マテリアルの設定 PNGの透明部分をいかす var materialClouds = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, map: cloudsTexture, transparent: true }); // 球体にマテリアル合成 cloud = new THREE.Mesh( geometry, materialClouds ); // シーンへの追加 scene.add( cloud ); // ------------------------------------------------------- // レンダラー // ------------------------------------------------------- renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild(renderer.domElement); // ------------------------------------------------------- // アニメーション // ------------------------------------------------------- function animate () { // 立方体を回転 earth.rotation.y += 0.005; cloud.rotation.y += 0.0043; requestAnimationFrame( animate ); // レンダリングを呼び出し rendering(); } // ------------------------------------------------------- // レンダリング // ------------------------------------------------------- function rendering() { // レンダリング renderer.render( scene, camera ); // マウスコントロール trackball.update(); } animate(); </script> <h1 class="header"> <a href="http://www.conekuto.com" target="_blank"> <img src="http://www.conekuto.com/wp-content/uploads/2015/03/logo01.png" alt="コネクト" scale="0"> </a> </h1> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-59385562-1', 'auto'); ga('send', 'pageview'); </script> </body> </html> |
