时间戳

首页 > 解决方案 > 图书馆无法连接？错误：三个未定义

three.js - 图书馆无法连接？错误：三个未定义

问题描述

我在脚本部分添加了three.js 库。我尝试了不同的方法，从链接到 cdn 网站到下载three.js 库并将其保存在我的目录中，但没有任何效果。当我尝试创建场景时，它无法识别 THREE 并说未定义。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera();
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>practice</title>
	<style>
			body { margin: 0; }
			canvas { display: block; }
		</style>
</head>

<body>
	
	<script src="main.js"></script>
	<script src="https://threejs.org/build/three.js"></script>
	<script src="js/three.js"></script>
</body>
</html>

标签： three.js

解决方案

你应该把 three.js 的脚本放在你的 main.js 之前。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>practice</title>
    <style>
            body { margin: 0; }
            canvas { display: block; }
        </style>
</head>

<body>


    <script src="https://threejs.org/build/three.js"></script>
    <script src="js/three.js"></script>
    <script src="main.js"></script>
</body>
</html>

由于您没有带有deferor的脚本async，HTML 解析器将等待下载并执行脚本并继续。

推荐阅读