我正在观看使用THREE.js库创建太阳系的教程。但是，我在浏览器的窗口中看不到结果。您能帮我找到代码中的错误吗？
这是代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Solar System - Intro (1)</title>
<script src="three.min.js"></script>
</head>
<body>
<script>
var scene, camera, render, container, W, H;
W = parseInt(document.body.clientWidth);
H = parseInt(document.body.clientHeight);
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, W / H, 1, 10000);
camera.position.z = 4300;
scene = new THREE.Scene();
// Sun
var sun, sun_geom, sun_mat;
sun_geom = new THREE.SphereGeometry(430, 30, 30);
sun_mat = new THREE.MeshNormalMaterial();
sun = new THREE.Mesh(sun_geom, sun_mat);
scene.add(sun);
render = new THREE.CanvasRenderer();
render.setSize(W, H);
container.appendChild(render.domElement);
animate();
function animate() {
requestAnimationFrame(animate);
render.render(scene, camera);
}
</script>
</body>
</html>
链接到视频：https : //www.youtube.com/watch?v=kzwEZjVMdkA&list=LLSn1erQiQ7lWhWY9IMOEGTw&index=5
您的代码的问题是，该document.body.clientHeight值为0。请改用这些行：
W = parseInt(window.innerWidth);
H = parseInt(window.innerHeight);
此外THREE.CanvasRenderer has been moved to examples/js/renderers/CanvasRenderer.js，如果您想使用CanvasRenderer()
但是您可以使用WebGLRenderer()：
render = new THREE.WebGLRenderer();
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句