Skip to content

起步

此笔记记录于DISCOVER three.js,大多数为其中的摘要,少数为笔者自己的理解

笛卡尔坐标系(3维)

可以看看这个链接

采用右手法则,如下图:

GitHub上的three.js

build文件夹是 repo 中最重要的文件夹,因为它包含最重要的 three.js 文件(库的核心 ):

  • build/three.module.js

这是运行基本的 three.js 应用程序所需的唯一文件。

文件名中的** .module**告诉我们这是一个 JavaScript 模块。在此文件夹中,如果您想支持无法使用模块的过时浏览器,还可以使用两个旧版本的 three.js 核心:

  • build/three.js
  • build/three.min.js

examples/文件夹包含许多好东西,包括:

  • 所有 官方示例的 源代码,您应该将其作为主要学习资源之一进行学习。
  • examples/jsm文件夹中的插件 ,例如相机控件和模型加载器,我们在整本书中都会用到它们。您也应该在这里学习代码,尽管它往往更高级,所以您可能要等到您先了解更多其他基础内容。
  • examples/js文件夹中的旧插件 。这些与您在 examples/jsm 中找到的插件集相同,但是,它们将适用于过时的浏览器。就像核心的遗留版本一样,遗留插件将很快被删除,我们将在本书中忽略它们。
  • 3D 字体
  • 许多不同格式的 3D 模型
  • 音效
  • 纹理
  • … 还有很多。

你需要学习 three.js 的一切都在那里——除了这本书!更重要的是,该文件夹中的几乎所有内容都包含在 MIT license中,这意味着您可以以任何您喜欢的方式自由使用项目中的任何内容。

安装导入

官网入口

shell
// 初始化 NPM 项目
npm init

// 一旦初始化了 NPM 项目,就可以安装 three 的 npm 包了
npm install --save three

导入类

js
import {
Camera,
Material,
Texture,
} from 'three';

导入插件不是很方便,因为一个 NPM 包只能有一个主文件。要导入 OrbitControls,我们需要直接引用包含模块:

js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';