'appendChild'of undefined

问题描述 投票:4回答:2

因此,我试图按照教程使用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',这是我目前的...]]

javascript html webgl
2个回答
3
投票

您有两个小问题:

  • [为了简单起见,所有内容都应该在您试图在onload函数运行之前将appendChild移到容器中的onload内。


2
投票
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);
© www.soinside.com 2019 - 2024. All rights reserved.