所以我正在尝试按照教程使用 THREE.js 实现太阳能系统，但是我收到以下错误:
Cannot read property 'appendChild' of undefined
这是我当前的代码:
<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 行。
我已经尝试将它移到我的加载功能中，但这只会产生更多错误。
谢谢你。
最佳答案
你有两个小问题:
onload 范围内。你试图 appendChild到 onload 之前的容器功能已运行。 render在您的 animate功能 这个例子有两个修复:
<html>
<head>
<meta charset ="utf8">
<title> Solar System Project </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/109/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;
// `render` now spelled correctly
render.render(scene, camera);
}
// everything now within `onload`
}
</script>
</body>
</html>关于javascript - 未定义的'appendChild'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59001799/