CODEWITHSUNDEEP
three.js3d
Cambria
Cambria

Reputation: 153

How to visualize Vector3 in 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.

<!DOCTYPE html>
<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 const points = [], points.push and Vector3 part of the code.

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 ) );

I don't understand the function of const points = []; and why was it used.

I don't understand the function of points.push and why was it used.

The Three.Vector3 command looks like it position points in 3D plane. For this case it looks like this:

functionofVector3

How do we visualize the Vector3 in three.js and why is the output looked like this?

OutputOfProgram

Upvotes: 0

Views: 2213

Answers (2)

Cambria
Cambria

Reputation: 153

Ahhh yes...this is actually the explanation of the purpose of these snippets of code.

The purpose of

const points = [];

is make the points created by Vector3 "real" because calling Vector3 alone merely states the position of point. Calling the array and putting Vector3 in the array creates a real, specified point because array is an object, so the point specified by the Vector3 in the array becomes an object too.

The purpose of

points.push( new THREE.Vector3( - 10, 0, 0 ) );

points.push( new THREE.Vector3( 0, 10, 0 ) );

and

points.push( new THREE.Vector3( 10, 0, 0 ) );

is to position the desired point using Vector3 within the viewing frustrum of the camera...

Upvotes: 1

Phil N.
Phil N.

Reputation: 700

const points = []; creates an empty Array[MDN] object, that is, an Array with no elements, which has .length of zero.

points.push( new THREE.Vector3( - 10, 0, 0 ) ); adds the new Vector3 to the end of the array. Since the array starts with zero elements, the first call adds a first element; the second adds a second element; etc.

For why the geometry is displayed with line segments, compare Line with Points.

Upvotes: 1

Related Questions