three.js - Replit 上的 Three.js 库未显示在文档中

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

我正在使用 Replit 来执行此操作，但是当我运行它时没有显示任何内容并且没有错误消息。我已经尝试过其他人的 replit 代码，他们的工作正常，但他们的代码几乎与我的相同，我也在我的项目中尝试了那里的代码，它工作正常。

Answer 1

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

两行都有错别字。它应该是：

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

和

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