因此,我试图按照教程使用THREE.js来实现太阳系,但是却出现以下错误:
无法读取未定义的属性'appendChild']
这是我当前的代码:
<html> <head> <meta charset ="utf8"> <title> Solar System Project </title> <script src = "three.min.js"></script> </head> <body> <script> // Standard Variables / To be changed later. var scene, camera, render, container; var W,H; // On load function... window.onload = function() { container = document.createElement('div'); document.body.appendChild(container); W = parseInt(window.innerWidth); H = parseInt(window.innerHeight); } camera = new THREE.PerspectiveCamera(45, W/H, 1, 10000); camera.position.z = 4300; scene = new THREE.Scene(); //Sun var sun, gun_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); // Earth var earth, earth_geom, earth_mat; earth_geom = new THREE.SphereGeometry(50, 20,20); earth_mat = new THREE.MeshNormalMaterial(); earth = new THREE.Mesh(earth_geom,earth_mat); earth.position.x = 2000; scene.add(earth); render = new THREE.WebGLRenderer(); render.setSize(W,H); container.appendChild(render.domElement); var t = 0; animate(); function animate(){ requestAnimationFrame(animate); sun.rotation.y+=0.001; earth.position.x = Math.sin(t*0.1) * 2000; earth.position.z = Math.cos(t*0.1) * 1700; t+= Math.PI/180*2; reneder.render(scene, camera); } </script> </body> </html>
错误发生在第49行。
我已经尝试将其移至我的加载函数中,但这只会产生更多错误。
谢谢。
因此,我试图按照教程通过使用THREE.js来实现太阳能系统,但是却出现以下错误:无法读取未定义的属性'appendChild',这是我目前的...]]
您有两个小问题:
[为了简单起见,所有内容都应该在您试图在onload
函数运行之前将appendChild
移到容器中的onload
内。
window.onload = function() {
W = parseInt(window.innerWidth);
H = parseInt(window.innerHeight);
}
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, W/H, 1, 10000);