Three.js报错：document.getElementById获取元素为null致appendChild失败求助

这个报错的核心原因很清晰：当你的init()函数执行时，浏览器还没解析到<div id="webgl">这个元素，导致document.getElementById('webgl')返回了null，自然没法调用appendChild方法。另外你的PHP输出的HTML结构也存在规范问题，得先把这两处问题修复：

1. 修正HTML文档结构 #

你的PHP代码把Three JS Course直接输出在了<!DOCTYPE html>前面，这违反了HTML规范——DOCTYPE必须是HTML文档的第一行，否则浏览器可能进入怪异模式，还会干扰DOM的正常解析。把PHP输出的内容放到<body>内部合适的位置：

<!DOCTYPE html>
<html>
<head>
    <title>Three.js Course</title>
</head>
<body>
    <?php echo "Three JS Course"; ?>
    <div id="webgl"></div>
</body>
</html>

2. 确保JS在DOM加载完成后执行 #

你现在直接在JS末尾调用init()，如果这段JS是在<head>里引入的，或者放在<div id="webgl">之前，代码执行时DOM元素还没被创建。这里提供三种可行的解决方法：

方法一：把JS脚本放在<body>末尾 #

把你的main.js引用放在</body>标签之前，这样浏览器会先解析完所有DOM元素再执行JS：

<!-- ... 其他HTML内容 ... -->
    <div id="webgl"></div>
    <script src="main.js"></script>
</body>
</html>

方法二：监听DOM加载完成事件 #

如果必须把JS放在<head>里，可以用DOMContentLoaded事件确保DOM加载完成后再执行init()：

function init() {
    // 你的原有代码...
}

document.addEventListener('DOMContentLoaded', function() {
    init();
});

方法三：使用window.onload（兼容性更广，会等待所有资源加载完成） #

function init() {
    // 你的原有代码...
}

window.onload = init;

最后提个小建议：你的Three.js场景里，相机默认位置是(0,0,0)，和场景原点重合，可能看不到任何内容，记得给相机设置一个位置，比如camera.position.z = 5;，这样才能正常看到场景里的物体。

内容的提问来源于stack exchange，提问作者Teije