Question

这实际上是我已经解决的问题，但出于好奇的缘故，我想知道是否有人可以解释为什么会这样？

这是我的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);

    }

这不起作用，我得到＆＃34; Uncaught TypeError：无法读取属性＆quot; appendChild＆＃39; of null＆＃34;

但是当我将webgl.js脚本移动到正文时，它会正确呈现canvas元素。

为什么会这样？为什么我的脚本需要在body中附加dom元素？渲染器对象在我的控制台中返回一个画布，那么问题是什么？

Answer 1

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

Three.js，appendChild和返回

1 个答案: