三.js报错document.getElementById答案

【问题标题】：Three.js error document.getElementById三.js报错document.getElementById
【发布时间】：2018-11-06 21:13:13
【问题描述】：

我一直在四处寻找，但找不到有同样问题的人。我刚开始学习使用 Three.js，这个 (Lynda.com) 教程指示我编写以下 php 文件和 javascript 代码。

chrome 控制台显示如下错误：

main.js:25 Uncaught TypeError: Cannot read property 'appendChild' of null
at init (main.js:25)
at main.js:36

我不太明白我做错了什么，我创建了一个具有相同 id 的 div 元素。

PHP：

<?php
echo "Three JS Course";
?>


<!DOCTYPE html>
<html>
<head>
    <title>Three.js Course</title>
</head>

<body>
    <div id="webgl"></div>
</body>

JS：

function init()
{
//Create scene
var scene = new THREE.Scene();

//Create camera
var camera = new THREE.PerspectiveCamera(
    //Perspective
    45,
    //Ratio
    window.innerWidth/window.innerHeight,
    //Near clipping distance
    1,
    //Far clipping distance
    1000
);

//Create renderer
var renderer = new THREE.WebGLRenderer();
//Set renderer size
renderer.setSize(window.innerWidth, window.innerHeight);

//Get element by ID
document.getElementById('webgl').appendChild(renderer.domElement);

//Make the renderer render the scene and the camera
renderer.render(
    scene,
    camera
);
}

init();

【问题讨论】：

文件中的JS放在什么位置？
Why does jQuery or a DOM method such as getElementById not find the element?的可能重复

标签： javascript html three.js

【解决方案1】：

我找到了解决方案，所以我发布一个答案，以防其他人遇到这个问题：

确保在 HTML 文件之后加载脚本。如果 document.getElementById() 试图访问尚未加载的元素，它将无法找到它！

【讨论】：