Question

我一直在寻找，但找不到同样问题的人。我正在学习使用Three.js的开始，这个（Lynda.com）教程指示我编写以下php文件＆amp; 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();

Answer 1

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

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

Three.js错误document.getElementById

1 个答案: