Three.js立方體與臉

我想創建一個360全景使用three.js。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); 
});

我可以利用MeshLambertMaterial來像在顯示圖像：

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

但是這會給所有6個面我通過在圖像

我有6個。圖像，我想根據自己的喜好將它傳遞給雙方。有任何想法嗎？

來源

2012-03-16 AJ Naidas