未定义的'appendChild'

Question

未定义的'appendChild'

因此，我尝试按照教程使用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>

Run Code Online (Sandbox Code Playgroud)

该错误发生在第49行。

我尝试将其移到我的加载函数中，但这只会产生更多错误。

谢谢。

Answer 1

Zev*_*van 3

你有两个小问题：

为了简单起见，所有内容可能都应该在函数运行之前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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，1 月前
查看次数：	70 次
最近记录：	6 年，1 月前