Three.jsでキューブにテクスチャを貼り付ける

threejs-texture.png

Three.jsで読み込める画像タイプ

mage (e.g., PNG, JPG, GIF, DDS), tgaもサポート済み?
video (e.g., MP4, OGG/OGV),

TGAの場合

<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js"></script>

をインクルードしてから
var loader = new THREE.TGALoader();
var tex= loader.load('bear.tga',);

という使い方なのですが、
このサイト(wikidot)でやってみたらこんなエラーが出てしまい、使うことができなかった。
XMLHttpRequest cannot load http://miffysora.wikidot.com/local--files/threejs-3dmodel-texture/bear.tga. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://miffysora.wdfiles.com' is therefore not allowed access.

まだ安定してないぽいのでTGAはpngやddsなどに変換して普通のTextureLoaderを使うのが無難なのかなぁ

読み込み方

var texloader = new THREE.TextureLoader();
    var tex=texloader.load("http://miffysora.wdfiles.com/local--files/threejs-texture/mag.jpg");
    var material = new THREE.MeshBasicMaterial({ map: tex });

使用するテクスチャ

mag.jpg

デモ

ソースコード

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
  <script>
    var width=200;
    var height=200;
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(65, width / height, 0.1, 1000);
 
    var renderer = new THREE.WebGLRenderer({ alpha: true ,antialias:true});
    renderer.setClearColor( new THREE.Color(0xffffff),0.0);//背景色
    renderer.setSize(width, height); // Set the size of the WebGL viewport.
    document.body.appendChild(renderer.domElement); // Append the WebGL viewport to the DOM.
 
    //ライティング
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 ); //平行光源(色、強度)
    directionalLight.position.set(0,0,3);
    scene.add( directionalLight );
 
    var geometry = new THREE.CubeGeometry(200, 200, 200);
    var texloader = new THREE.TextureLoader();
    var tex=texloader.load("http://miffysora.wdfiles.com/local--files/threejs-texture/mag.jpg");
    var material = new THREE.MeshLambertMaterial({  map: tex });//ランバートマテリアルを用意
    //var material = new THREE.MeshBasicMaterial({ map: tex });
     var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
 
    camera.position.z = 600; 
 
    var render = function () {
      cube.rotation.x += 0.01; 
      cube.rotation.y += 0.01;
 
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    };
 
    render();
  </script>
</body>

THREE.TextureLoader

サポートサイト Wikidot.com