Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。

https://img-1253324855.cos.ap-chengdu.myqcloud.com/picgo/20210803003715.png

从现在起开始学习three.js作为以后开发AR项目的起步，每次看到别人做的炫酷的three.js应用都非常羡慕，大家如果对3D、AR等等概念有兴趣的话一定要了解一下，这篇文章作为我的three.js首篇笔记，简单介绍一下three.js的基本操作，已收录在黑鲸知识库里，欢迎大家关注后续的文章，也希望帮助不知道three.js的同学了解一下这个好玩的js库。如果大家感兴趣可以添加本站的交流微信群，一起讨论交流一下。

通过一个简单的例子来认识Three.js

  • 为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景, 下面是一个创建cube场景的小例子，你可以点击js查看源码及说明。

See the Pen Threejs练习1 by Kp (@uzizkp) on CodePen.

安装

  • NPM安装
npm install --save three

所有安装 three.js 的方式都依赖于 ES modules（参见 Eloquent JavaScript: ECMAScript Modules）。ES modules使你能够在最终项目中包含所需库的一小部分。

然后你就可以将它导入你的JS里代码了：

// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';

const scene = new THREE.Scene();

// 方式 2: 仅导入你所需要的部分
import { Scene } from 'three';

const scene = new Scene();

并非所有功能都可以通过 three 模块来直接访问（也称为“裸导入”）。three.js 中其它较为流行的部分 —— 如控制器（control）、加载器（loader）以及后期处理效果（post-processing effect） —— 必须从 examples/jsm 子目录下导入。

你可以从 Eloquent JavaScript: Installing with npm 来了解更多有关 npm 模块的信息。

  • 通过CDN安装
<script type="module">

  // 通过访问 https://cdn.skypack.dev/three 来查找最新版本。

import * as THREE from 'https://cdn.skypack.dev/three@<version>';

const scene = new THREE.Scene();

</script>

WebGL兼容性检查（WebGL compatibility check）

虽然这个问题现在已经变得越来不明显，但不可否定的是，某些设备以及浏览器直到现在仍然不支持WebGL。以下的方法可以帮助你检测当前用户所使用的环境是否支持WebGL，如果不支持，将会向用户提示一条信息。

请将https://github.com/mrdoob/three.js/blob/master/examples/jsm/WebGL.js引入到你的文件，并在尝试开始渲染之前先运行该文件。

if (WEBGL.isWebGLAvailable()) {
    // Initiate function or other initializations here
    animate();
} else {
    const warning = WEBGL.getWebGLErrorMessage();
    document.getElementById('container').appendChild(warning);
}

画线

初步了解了three.js后，我们来尝试尝试一些简单的操作，比如画线

See the Pen Three.js练习2 by Kp (@uzizkp) on CodePen.

载入3D模型

目前，3D模型的格式有成千上万种可供选择，但每一种格式都具有不同的目的、用途以及复杂性。 虽然 three.js已经提供了多种导入工具， 但是选择正确的文件格式以及工作流程将可以节省很多时间，以及避免遭受很多挫折。某些格式难以使用，或者实时体验效率低下，或者目前尚未得到完全支持。

如果有可能的话，推荐使用glTF（gl传输格式）。.GLB和.GLTF是这种格式的这两种不同版本， 都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的，所以它的传输效率非常高，且加载速度非常快。 功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。

公共领域的glTF文件可以在网上找到，例如 Sketchfab，或者很多工具包含了glTF的导出功能：

加载

Three.js的examples文件夹里有少数加载器（如ObjectLoader）默认包含在three.js中例如使用loaders里的GLTFLoader来加载模型–其他加载器应单独添加到你的应用程序中。

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

一旦你引入了一个加载器，你就已经准备好为场景添加模型了。不同加载器之间可能具有不同的语法 —— 当使用其它格式的时候请参阅该格式加载器的示例以及文档。对于glTF，使用全局script的用法类似：

const loader = new GLTFLoader();

loader.load( 'path/to/model.glb', function ( gltf ) {

	scene.add( gltf.scene );

}, undefined, function ( error ) {

	console.error( error );

} );

推荐使用glTF（gl传输格式）来对三维物体进行导入和导出，由于glTF这种格式专注于在程序运行时呈现三维物体，因此它的传输效率非常高，且加载速度非常快。

viewport相关的meta标签

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

这些标签用于在移动端浏览器上控制视口的大小和缩放（页面内容可能会以与可视区域不同的大小来呈现）。

Safari: Using the Viewport

MDN: Using the viewport meta tag

  • 帮助论坛

Three.js官方使用forum（官方论坛） 和 Stack Overflow来处理帮助请求。 如果你需要一些帮助，这才是你所要去的地方。请一定不要在GitHub上提issue来寻求帮助。