脸上的Three.js多维数据集

Question

我正在尝试使用three.js创建360度全景图。

该计划是使用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个面。

我有六张图片，我想根据自己的喜好将其传递给每一面。 有任何想法吗？

Answer 1

看看Paul Lewis的博客文章

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

他在演示中实现了全景图。 我创建了自己的版本，并添加了全屏和指针锁定API，您可以在此处查看：

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

希望有帮助！