0.安装

学习资料

官网:https://threejs.org/

文档地址: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模块方式引用。


关键词: threejs 3d 安装
微信 遇到疑问可加微信进行反映