Three js 360 video camera controls api

Viewed 23

I am using this demo:

https://threejs.org/examples/?q=video#webgl_video_panorama_equirectangular

with the following code:

        let camera, scene, renderer;

        let isUserInteracting = false,
            lon = 0, lat = 0,
            phi = 0, theta = 0,
            onPointerDownPointerX = 0,
            onPointerDownPointerY = 0,
            onPointerDownLon = 0,
            onPointerDownLat = 0;

        const distance = 50;

        init();
        animate();

        function init() {

            const container = document.getElementById( 'container' );

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

            scene = new THREE.Scene();

            const geometry = new THREE.SphereGeometry( 500, 60, 40 );
            // invert the geometry on the x-axis so that all of the faces point inward
            geometry.scale( - 1, 1, 1 );

            const video = document.getElementById( 'video' );
            video.play();

            const texture = new THREE.VideoTexture( video );
            const material = new THREE.MeshBasicMaterial( { map: texture } );

            const mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            document.addEventListener( 'pointerdown', onPointerDown );
            document.addEventListener( 'pointermove', onPointerMove );
            document.addEventListener( 'pointerup', onPointerUp );

            //

            window.addEventListener( 'resize', onWindowResize );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function onPointerDown( event ) {

            isUserInteracting = true;

            onPointerDownPointerX = event.clientX;
            onPointerDownPointerY = event.clientY;

            onPointerDownLon = lon;
            onPointerDownLat = lat;

        }

        function onPointerMove( event ) {

            if ( isUserInteracting === true ) {

                lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
                lat = ( onPointerDownPointerY - event.clientY ) * 0.1 + onPointerDownLat;

            }

        }

        function onPointerUp() {

            isUserInteracting = false;

        }

        function animate() {

            requestAnimationFrame( animate );
            update();

        }

        function update() {

            lat = Math.max( - 85, Math.min( 85, lat ) );
            phi = THREE.MathUtils.degToRad( 90 - lat );
            theta = THREE.MathUtils.degToRad( lon );

            camera.position.x = distance * Math.sin( phi ) * Math.cos( theta );
            camera.position.y = distance * Math.cos( phi );
            camera.position.z = distance * Math.sin( phi ) * Math.sin( theta );

            camera.lookAt( 0, 0, 0 );

            renderer.render( scene, camera );

        }

Is there an api for the THREE.PerspectiveCamera so you can manually call zoom in / out, move left / right inside the scene ..etc?

Is this possible?

1 Answers

There is indeed an API for the Three.PerspectiveCamera, including a method to call to zoom in/out the camera.

https://threejs.org/docs/#api/en/cameras/PerspectiveCamera.zoom

If you wish to move the camera around the scene, you can update the position of the camera through updating its position attribute. This can be done by either updating each of its three coordinates individually, or using the 'set' method to pass in a Vector3 for its position. Below is the documentation to Object3D, which camera inherits from.

https://threejs.org/docs/#api/en/core/Object3D.position

Be wary though that script is already updating its position during its 'update' function, so you will need to possibly change those lines directly, depending on what you want to do.

Hopefully this helps!

Related