Three.js library on Replit not show up in document

Question

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(120, window.innerwidth / window.innerheight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerwidth, window.innerheight);

document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x000fff});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);

}

animate();

I am using Replit to do this but nothing is showing when i run it and there is no error message. I have tried other code from people on replit and theirs works fine but their code is almost identical to mine, I also tried there code in my project and it works fine.

score 0 · Answer 1 · answered Feb 28 '22 at 11:38

const camera = new THREE.PerspectiveCamera(120, window.innerwidth / window.innerheight, 0.1, 1000); renderer.setSize(window.innerwidth, window.innerheight);

There are typos in both lines. It should be:

const camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 0.1, 1000);

and

renderer.setSize(window.innerWidth, window.innerHeight);

Three.js library on Replit not show up in document

1 Answers1