这是我的所有代码，我从我通过yarn安装的node_modules目录中获取所有的三个.js源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello World</title>
<link rel="stylesheet" href="css/main.css">
</head>
<script src="node_modules/three/build/three.js"></script>
<body>
</body>
<script>
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHieght, 0.1, 1000);
camera.position.z = 10;
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#CCC");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshLambertMaterial({color: 0xFFCC00});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
let light = new THREE.PointLight(0xffffff, 1, 500);
light.position.set(10,0,25);
renderer.render(scene, camera);
console.log("compiled")
</script>
</html>
我没有收到任何错误，并且未显示 boxGeometry 我确实看到我为渲染 View 设置的浅灰色 Canvas ，但我尝试过的任何方法都不起作用
我通过 Chrome 在 MacOs 11.0.1 上运行此程序
最佳答案
您的代码中有一个拼写错误。 innerHeight 应为 innerHeight。此外，有必要将点光源添加到场景中。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor("#CCC");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({
color: 0xFFCC00
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const light = new THREE.PointLight(0xffffff, 1, 500);
light.position.set(10, 0, 25);
scene.add(light);
renderer.render(scene, camera);body {
margin: 0;
}<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9eeaf6ecfbfbdeaeb0afacad" rel="noreferrer noopener nofollow">[email protected]</a>/build/three.js"></script>关于dom - 简单的 Three.js 设置不显示任何内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65411246/