Three.js, appendChild and returning

Three.js, appendChild and returning

本文关键字：and returning appendChild js Three      更新时间：2023-09-26

这实际上是我已经解决的问题，但为了安全起见，我想知道是否有人能解释为什么会这样？

这是我的html:

    <!DOCTYPE html>
    <html>
        <head>
            <script src="three.min.js"></script>
            <script src="OrbitControls.js"></script>
            <script type="text/javascript" src="webgl.js"></script>
        </head>
        <body style="margin: 0;">
        </body>
    </html>

和我的JS:

    var scene, camera, renderer;
    init();
    animate();
    function init(){
        scene = new THREE.Scene();
        var width = window.innerWidth, height =  window.innerHeight;
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);
    }

这不起作用，我得到"Uncaught TypeError:无法读取null的属性‘appendChild’"

但是，当我将webgl.js脚本移动到主体时，它会正确地渲染画布元素。

为什么会发生这种情况？为什么我的脚本需要在主体中才能附加dom元素？渲染器对象在我的控制台中返回一个画布，那么问题出在哪里呢？

当在头部内部调用脚本时，主体还不存在。您可以通过在头部和身体中调用console.log(document.body)来看到这一点。您会发现document.body是null，因为实体尚未创建。

相关文章：