javascript - 未定义的'appendChild'-6ren

javascript - 未定义的'appendChild'

转载作者：行者123 更新时间：2023-12-04 18:00:26

26

4

所以我正在尝试按照教程使用 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/

26

4

0

文章推荐： swiftui - SwiftUI ScrollView无法更新？

文章推荐： r - 使用 "gap tolerance"对顺序值进行分组

文章推荐： flutter - I/flutter 日志显示来自以前的应用程序

文章推荐： r - 在 R 中使用匹配和应用

javascript - div.appendChild().appendChild()
从逻辑上讲，我想在 div 的链接中嵌入图像。我已经使用链接或图像成功完成了此操作。为了我的目的，我什至并行地使用了链接和图像(这是无用的)。但似乎无法将图像包裹在 div 内的链接中。 var di
不继承父css的javascript appendchild
我需要将特殊的 iconfont 子节点插入到基础文档中。我需要的字符序列是“fT”，我将它包裹在一个跨度中，为它提供我想要的字体的颜色和大小。问题是我附加此“注释”子项的基本文档的父节点有时可能
Javascript:AppendChild
我正在学习 appendChild 并且到目前为止想出了这段代码: var blah = "Blah!"; var t = document.createElement("table"), tb
javascript - appendChild 只在第一次工作
我想通过同一页面上的按钮和事件处理程序将相同的内容重复附加到元素。我遇到的问题是它只在第一次有效。它第一次做的正是我想要的，然后在随后的按钮按下时什么也做不了。我查了一下，似乎在第一次追加之后，“n
javascript - Appendchild 仅适用于最后一个元素
我正在尝试在 JavaScript 中创建一个元素并按类名将其应用于所有元素。对于这个例子，我将使用一个段落来方便。然而，通过 JavaScript 创建元素的目的是因为我想稍后在我的代码中创建一个不
javascript - appendChild 函数未在表单上添加标签
我正在尝试输入一个问题，并将该问题显示为表单“调查表单”中的一个元素。但是，当我使用 JavaScript 将子节点附加到“调查表单”时，文本会出现半秒然后消失。似乎标签元素被附加但随后被删除。知道如
javascript - appendChild 未能将相同的元素附加到相同的类元素之一？
请参阅here . 我们有这样的 JavaScript 代码: document.addEventListener("DOMContentLoaded", function(event) { le
Javascript appendChild 名称属性
所以我尝试向单选按钮输入添加属性，特别是 Javascript 中的名称属性。我将子对象附加到主对象，并且当我使用 Object.setAttribute("name", value); 时然后检查附
javascript - this.appendChild 不是一个函数
我下面有 JS，一旦单击图像下方的图像，我会尝试显示菜单项，一旦单击某个项目，它就会消失。我有多个图像，这就是我构建这个动态内容菜单的原因。我计划在 userMenuContent 中添加一堆 htm
javascript - appendChild 不会将节点添加到子级列表的末尾
根据文档https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild 、appendChild 将一个节点添加到指定父节点的子节点列表的末
javascript - 使用数组创建TextNode/appendChild
我正在尝试以类似表格的方式打印出所有数组项。我正在创建一个标题标签，以及数组中每个元素的标签(与 headers 数组分开)。每当我尝试这样做时，我都会得到预期的结果，但所有数组元素都只是一个长字
javascript - appendChild 在作业上下文中如何工作？
有几个问题与同一段代码相关，包括这个:Understanding JavaScript Styling同样，这摘自本书Secrets of the JavaScript Ninja
javascript - AppendChild 在某个元素之上添加一个元素
所以我有一个 div 元素，它将使用 appendChild 方法动态填充其他 div，这应该显示一个列表。用户现在可以使用 JqueryUI Sortable 选项对该列表进行排序。我还添加了一些
JavaScript AppendChild 在重置之前会显示一小会儿
我正在尝试使用超链接将一些 HTML 数据插入 div 标记，单击超链接时会调用 Javascript 函数。 HTML 数据有效，我要显示的项目出现，但执行后立即消失。我尝试过 event.pre
javascript - appendChild() 尝试追加存储在数组中的值时失败
除了 saved 变量中列出的这些元素之外，以下代码删除特定元素的所有子元素。 let rightCol = document.querySelector("#rightCol"); let save
javascript - appendChild() 不接受传递的字符串参数作为参数？
我的代码是为了添加另一段hello单击“新建”按钮后，在现有的 2 个下。错误一定是在传递来自onclick 的值时发生的函数或 createTextNode或 appendChild() (不是在
javascript - appendChild() 函数属于什么类型的对象？
appendChild()函数属于什么对象？最佳答案一个 DOM 节点/元素。 interface Node { // NodeType const unsigned short
Javascript appendChild() 函数
嘿，我正在尝试 appendChild() 两个连续的 div，但我期望的结果是它们并排放置，但它们像这样一个在另一个之上: 1st div 2nd div 代替第一格第二格 var addBudCo
Javascript Appendchild 为每条记录创建一个计数
我正在使用 Google Maps Javascript 创建 map 。我需要对本创建的每个标记进行计数，并将此计数放在一个 DIV 中。scipt 收集计数，但它显示每个标记的计数。例如，如果查询
javascript - 对象没有方法 'appendChild'
当我将一个 div 发送到一个为文档片段创建内容的函数时，当我将该片段附加到 div 时，它会向我提供此错误。 Object column_left has no method 'appendChil

首页

博学

6Ren·AI

商城

javascript - 未定义的'appendChild'