CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas3d
AJ Naidas
AJ Naidas

Reputation: 1434

Three.js cube with faces

I am trying to create a 360 panorama using three.js.

The plan is to create 6 sides using PlaneGeometry but I think there is a more efficient way to do this. Probably using CubeGeometry I suppose?

$(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);
});

I can make use of MeshLambertMaterial to display image like the one in:

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

But this will give all 6 sides the image I pass in.

I have six images and I want to pass it to each sides according to my preference. Any ideas?

Upvotes: 0

Views: 2617

Answers (1)

Nooshu
Nooshu

Reputation: 475

Take a look at the blog post by Paul Lewis

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

He implemented a panoroma in the demo. I created my own version and added the Fullscreen and Pointer Lock API's which you can see here:

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

Hope that helps!

Upvotes: 1

Related Questions