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/

他在演示中实现了一个panoroma。我创建了自己的版本并添加了Fullscreen和Pointer Lock API，你可以在这里看到：

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

希望有所帮助！

Three.js立方体与面孔

1 个答案: