CODEWITHSUNDEEP
javascriptthree.js
user5955461
user5955461

Reputation: 776

THREE.js Line Object not running in browser

I am new to THREE.js. When I open this code in the browser, it only shows a black screen instead of a triangle. Please help me figuring out the problem in the code.

<!DOCTYPE html>
<html>
<head>
    <title>First Line Object</title>
    <style>
        body{ margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

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

    var lineGeom = new Geometry();
    lineGeom.vertices = [
        new THREE.Vector3(-2,-2, 0),
        new THREE.Vector3(2, -2, 0),
        new THREE.Vector3(0, 2, 0),
        new THREE.Vector3(-2,-2, 0)
    ];

    var lineMat = new THREE.LineBasicMaterial({
        color: 0xA000A0,
        linewidth: 2
    });

    var line = new THREE.Line(lineGeom, lineMat, THREE.LineStrip);
    scene.add(line);

    camera.position.z = 5;

    var render = function() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();

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

The above code should display a triangle based on the given vertices in the array. But it only shows a black screen and nothing else.

Upvotes: 3

Views: 67

Answers (1)

Abbas Afzal
Abbas Afzal

Reputation: 131

There is a problem with the initialization of the Geometry. You have to use the constructor like this

new THREE.Geometry()

This will solve your problem

Upvotes: 3

Related Questions