臉上的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

希望有幫助！