Question

0

192

Vistas

How to visualize PerspectiveCamera of the three.js?

I was reading the tutorial on how to draw lines in three.js documentation and the code used looked like this:

The code is fine and have no problems.

<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="///C:/Users/pc/Desktop/threejs_tutorial/build_threejs.html"></script>
        <script>
        
        const scene = new THREE.Scene();
        
        const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
        camera.position.set( 0, 0, 100 );
        camera.lookAt( 0, 0, 0 );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        //create a blue LineBasicMaterial
        const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

        const points = [];
        points.push( new THREE.Vector3( - 10, 0, 0 ) );
        points.push( new THREE.Vector3( 0, 10, 0 ) );
        points.push( new THREE.Vector3( 10, 0, 0 ) );

        const geometry = new THREE.BufferGeometry().setFromPoints( points );

        const line = new THREE.Line( geometry, material );


        scene.add( line );
        renderer.render( scene, camera );


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

But what caught my eye is the PerspectiveCamera part of the code.

        const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );

The first number is the field of view, the second number is the aspect ratio, the third number is the distance from the camera to the near viewing plane and the fourth is the distance from the camera to the far viewing plane.

How do we visualize the PerspectiveCamera of the three.js? Does it look like this one I imagined?

PerspectiveCameraVisualization

about 4 years ago · Santiago Trujillo