CODEWITHSUNDEEP
three.js
Ayesha Khan
Ayesha Khan

Reputation: 474

My three.js line geometry is not showing on screen

I want to draw lines using three.js, this code is copied from the three.js line documentation but this is not showing any results. I am getting just blank white screen.

const renderer = new THREE.WebGLRenderer({ antialias: true });
const scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 30

const path = new THREE.Path();

path.lineTo(0, 0.8);
path.quadraticCurveTo(0, 1, 0.2, 1);
path.lineTo(1, 1);

const points = path.getPoints();

const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x8B008B });

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


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

Upvotes: 1

Views: 887

Answers (1)

M -
M -

Reputation: 28497

You've created a renderer, but you haven't set its size, nor have you added its canvas to the HTML document.

Follow the example in the "Getting started" section:

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Upvotes: 1

Related Questions