Three.js куб с гранями

Question

Я пытаюсь создать панораму 360 с помощью three.js.

План состоит в том, чтобы создать 6 сторон, используя PlaneGeometry, но я думаю, что есть более эффективный способ сделать это. Наверное, с помощью 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 сторонам изображение, которое я передаю.

У меня есть шесть изображений, и я хочу передать их каждой стороне в соответствии с моими предпочтениями. Есть идеи?

Answer 1

Взгляните на пост в блоге Пола Льюиса

http://aerotwist.com/tutorials/create-your-own-environment-maps/

Он реализовал панорому в демоверсии. Я создал свою собственную версию и добавил API полноэкранного режима и блокировки указателя, которые вы можете увидеть здесь:

http://nooshu.com/using-the-fullscreen-and-pointer-lock-apis

Надеюсь, это поможет!