学习资料
文档地址:https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
three.js
有多中安装方式,由于是入门学习,本次以最简单最传统的使用 script
标签的形式进行引入。开发的时候,一般会配合对应的打包工具等一起使用,具体步骤可以在文档中找到。
下载
首先我们需要下载 three.js
,下载地址:https://github.com/mrdoob/three.js/releases
注意看好版本,因为它在不同版本之间可能有细微的差别,所以看文档的时候要注意选择对应版本的文档。
下载解压完以后,里面有很多目录,这里面含有 three.js
的源码、文档、还有例子等,有几个文件夹我们要注意:
build
目录:打包后的可以直接引入的three.js
,也是我们将来使用script
引入的文件在这里保存(r160
之前的版本)。docs
目录:当前版本的文档目录,可以放到我们自己搭建的服务器上直接使用。examples
目录:案例目录,如果我们搭建的有服务器,可以直接部署后访问。
最简单的引入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入three.js -->
<script src="./three.min.js"></script>
<script>
// 如果引入正确,可以在控制台中看到该对象的信息
console.log(THREE);
</script>
</body>
</html>
three.js
的运行是需要在部署后才能正常访问的,直接打开HTML,在很多时候是无法正常看到效果的,我们可以在本地搭个测试环境或者使用编辑器的插件(如:vscode的Live Server插件)搞个本地测试环境。
运行
注意:按照计划,这种引入方式,在r150
版本以后弃用,并将在 r160
版本以后删除,后续需要使用ES
模块方式引用。