三.js，appendChild和return答案

【问题标题】：Three.js, appendChild and returning三.js，appendChild和return
【发布时间】：2015-01-04 16:49:15
【问题描述】：

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

这是我的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: Cannot read property 'appendChild' of null”

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

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

【问题讨论】：

标签： javascript canvas three.js

【解决方案1】：

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

【讨论】：