CODEWITHSUNDEEP
three.js
Rolando
Rolando

Reputation: 62674

How to properly change the camera view to move forward and backward into a scene in Three.js?

I want to make it such that I can move around in the following manner in three.js by moving the perspectivecamera:

  1. "hit a key or button to move the camera forward into the direction im looking at"
  2. "hit a key or button to move the camera downward below the direction im looking at"
  3. "hit a key or button to pitch the camera such that the "fov" is of a different value
  4. "hit keys or buttons to pitch the camera such that i am rotating as if pivoted at the place the camera is to be able to see whats left and right of me

The following is my current code. Based on what I am seeing, it appears that PerspectiveCamera from the docs does not appear to have any methods like "setFov" or anything like that, simply "camera.fov = " does not appear to have any effect like the meshes after the camera has been initialized. So how would I properly be able to do the above?:

<!DOCTYPE html>

<html>

<head>
    <title>Example 01.03 - Materials and light</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <style>
        body{
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    $(function () {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColorHex(0xEEEEEE, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
        var planeMaterial =    new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow  = true;

        // rotate and position the plane
        plane.rotation.x=-0.5*Math.PI;
        plane.position.x=15
        plane.position.y=0
        plane.position.z=0

        // add the plane to the scene
        scene.add(plane);

        // create a cube
        var cubeGeometry = new THREE.CubeGeometry(4,4,4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.castShadow = true;

        // position the cube
        cube.position.x=-4;
        cube.position.y=3;
        cube.position.z=0;

        // add the cube to the scene
        scene.add(cube);

        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

        // position the sphere
        sphere.position.x=20;
        sphere.position.y=0;
        sphere.position.z=2;
        sphere.castShadow=true;

        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( -40, 60, -10 );
        spotLight.castShadow = true;
        scene.add( spotLight );

        // add the output of the renderer to the html element
        $("#WebGL-output").append(renderer.domElement);

        // call the render function
        var step=0;
        render();

        function render() {
            stats.update();
            // rotate the cube around its axes
            cube.rotation.x += 0.02;
            cube.rotation.y += 0.02;
            cube.rotation.z += 0.02;

            // bounce the sphere up and down
            step+=0.04;
            sphere.position.x = 20+( 10*(Math.cos(step)));
            sphere.position.y = 2 +( 10*Math.abs(Math.sin(step)));

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            $("#Stats-output").append( stats.domElement );

            return stats;
        }
    });



</script>
</body>
</html>

Upvotes: 0

Views: 1931

Answers (1)

Blake Senftner
Blake Senftner

Reputation: 786

I believe you simply need to understand the components of the camera's matrix to realize what you want. The three.js "camera" is a 4x4 matrix of the classic linear algebra type. 4x4 matrix = [a b c d e f g h i j k l n m o p] The 3x3 inner matrix is literally the orientation of your camera: camera orientation = [a b c e f g i j k] Meaning the vector { a, b, c } is the direction vector pointing to the camera's right, from the camera's pov. The vector { e, f, g } is the direction vector pointing up, from the camera's point of view. And the vector { i, j, k } is the director vector pointing in the direction the camera is facing.

Together these 3 vectors compose the orientation of the camera.

They can be further envisioned by holding your left hand in front of you like this: left handed rotation picture Each finger is pointing in the positive direction of the camera's pov, and they likewise equal the rotation factors necessary to orient the camera.

And the other, non-rotation components { n, m, o } is the x, y, z position of the camera.

To move in the direction of the camera, add the vector { i, j, k } to { n, m, o }.

To move to the right, from the camera's pov, add the vector { a, b, c } to { n, m, o }.

To move up, from the camera's pov, add the vector { e, f, g } to { n, m, o }.

And, of course, to move in the opposite directions add the negatives of those orientation vectors.

Upvotes: 4

Related Questions