顔を持つThree.jsキューブ

three.jsを使用して360のパノラマを作成しようとしています。顔を持つThree.jsキューブ

PlaneGeometryを使用して6面を作成する予定ですが、これを行うより効率的な方法があると思います。おそらくCubeGeometryを使用していると思いますか？

$(function() { 
    var renderer = new THREE.WebGLRenderer({antialias:true}); 
    renderer.setSize(document.body.clientWidth, document.body.clientHeight); 
    document.body.appendChild(renderer.domElement); 
    renderer.setClearColorHex(0xEEEEEE, 1.0); 
    renderer.clear(); 
    var fov = 25;// camera field-of-view in degrees 
    var width = renderer.domElement.width; 
    var height = renderer.domElement.height; 
    var aspect = width/height;// view aspect ratio 
    var near =10;// near clip plane 
    var far = 10000; // far clip plane 
    var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); 
    camera.position.z = 300; 
    var scene = new THREE.Scene(); 
    var cube = new THREE.Mesh(new THREE.CubeGeometry(110,50,50),new THREE.MeshBasicMaterial({color: 0x100000, opacity: 1})); 
    scene.add(cube); 
    renderer.render(scene, camera); 

    function animate(t) { 
     camera.position.x = Math.sin(t/1000)*300; 
     camera.position.y = 150; 
     camera.position.z = Math.cos(t/1000)*300; 

     camera.lookAt(scene.position); 

     renderer.render(scene,camera); 
     window.requestAnimationFrame(animate, renderer.domElement); 
    }; 
    animate(new Date().getTime()); 

    var light = new THREE.SpotLight(); 
    light.position.set(170,330,-160); 
    scene.add(light); 

    var litCube = new THREE.Mesh(
     new THREE.CubeGeometry(50, 50, 50), 
     new THREE.MeshLambertMaterial({color: 0xEEEEEE})); 
     litCube.position.y = 50; 
     scene.add(litCube); 
});

私は中1のような画像を表示するMeshLambertMaterialを利用することができます：。

http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-texture-with-three-js/

しかし、これはすべての6つの側面に私が渡した画像が得られます

私は6を持っています私の好みに合わせて両面に渡したいと思っています。何か案は？

出典

2012-03-16 AJ Naidas