threejs3d环形?

ThreeJS简介

近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画，精美的效果。但是，人总是贪的。那么，在此之上还能做什么呢？其中一种就是通过WebGL在网页中绘制高性能的3D图形。

OpenGL它是最常用的跨平台图形库。

WebGL是基于OpenGL设计的面向web的图形标准，提供了一系列JavaScriptAPI，通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。

而Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。

简单点的说法threejs=three+js，three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript来写3D程序的意思。而javascript的计算能力因为google的V8引擎得到了迅猛的增强，做3D程序，做服务器都没有问题。

WebGL门槛相对较高，需要相对较多的数学知识（线性代数、解析几何）。因此，想要短时间上手WebGL还是挺有难度的。Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失WebGL的灵活性。

因此，从Three.js入手是值得推荐的，这可以让你在较短的学习后就能面对大部分需求场景。

Three.js的入门是相对简单的，但是当我们真的去学的时候，会发现一个很尴尬的问题：相关的学习资料很少。

通常这种流行的库都有很完善的文档，很多时候跟着官方的文档或官方的入门教程学习就是最好的路线。但Three不是的，它的文档对初学者来说太过简明扼要。

不过官方提供了非常丰富的examples，几乎所有你需要的用法都在某个example中有所体现。但这些example不太适合用来入门，倒是适合入门之后的进一步学习。

这里推荐一些相对较好的教程：

当然，实际的学习过程中这些资料肯定是不太够的，遇到问题还是要自己去查资料。不过这里要提醒一下，Three.js的更新是相当频繁的，现在是r80版本，自2010年4月发布r1以来，这已经是第72个版本了(中间有的版本号跳过了)。因此，在网上找到的资料有些可能是不适合当前版本的，需要注意甄别(前面推荐的资料也都或多或少存在这样的问题)。

要在屏幕上展示3D图形，思路大体上都是这样的：

1、构建一个三维空间

Three中称之为场景(Scene)

2、选择一个观察点，并确定观察方向/角度等

Three中称之为相机(Camera)

3、在场景中添加供观察的物体

Three中的物体有很多种，包括Mesh,Line,Points等，它们都继承自Object3D类

4、将观察到的场景渲染到屏幕上的指定区域

Three中使用Renderer完成这一工作

场景是所有物体的容器，也对应着我们创建的三维世界。

Camera是三维世界中的观察者，为了观察这个世界，首先我们要描述空间中的位置。Three中使用采用常见的右手坐标系定位。

Three中的相机有两种，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。

这里补充一个视景体的概念：视景体是一个几何体，只有视景体内的物体才会被我们看到，视景体之外的物体将被裁剪掉。这是为了去除不必要的运算。

正交投影相机的视景体是一个长方体，OrthographicCamera的构造函数是这样的：

Camera本身可以看作是一个点，left则表示左平面在左右方向上与Camera的距离。另外几个参数同理。于是六个参数分别定义了视景体六个面的位置。

可以近似地认为，视景体里的物体平行投影到*面上，然后*面上的图像被渲染到屏幕上。

2）透视投影相机

fov对应着图中的视角，是上下两面的夹角。aspect是*面的宽高比。在加上*面距离near，远平面距离far，就可以唯一确定这个视景体了。

透视投影相机很符合我们通常的看东西的感觉，因此大多数情况下我们都是用透视投影相机展示3D效果。

有了相机，总要看点什么吧？在场景中添加一些物体吧。

Three中供显示的物体有很多，它们都继承自Object3D类，这里我们主要看一下Mesh和Points两种。

1）Mesh

我们都知道，计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。线段很多时，看起来就是一条平滑的弧线了。

计算机中的三维模型也是类似的，普遍的做法是用三角形组成的网格来描述，我们把这种模型称之为Mesh模型。

geometry是它的形状，material是它的材质。

不止是Mesh，创建很多物体都要用到这两个属性。下面我们来看看这两个重要的属性。

2）Geometry

Geometry，形状，相当直观。Geometry通过存储模型用到的点集和点间关系(哪些点构成一个三角形)来达到描述物体形状的目的。

Three提供了立方体(其实是长方体)、平面(其实是长方形)、球体、圆形、圆柱、圆台等许多基本形状；

你也可以通过自己定义每个点的位置来构造形状；

对于比较复杂的形状，我们还可以通过外部的模型文件导入。

3）Material

Material，材质，这就没有形状那么直观了。

材质其实是物体表面除了形状以为所有可视属性的集合，例如色彩、纹理、光滑度、透明度、反射率、折射率、发光度。

这里讲一下材质(Material)、贴图(Map)和纹理(Texture)的关系。

材质上面已经提到了，它包括了贴图以及其它。

贴图其实是‘贴’和‘图’，它包括了图片和图片应当贴到什么位置。

纹理嘛，其实就是‘图’了。

Three提供了多种材质可供选择，能够自由地选择漫反射/镜面反射等材质。

4）Points

讲完了Mesh，我们来看看另一种Object——Points。

Points其实就是一堆点的集合，它在之前很长时间都被称为ParticleSystem(粒子系统)，r68版本时更名为PointCloud,r72版本时才更名为Points。更名主要是因为，Mr.doob认为，粒子系统应当是包括粒子和相关的物理特性的处理的一套完整体系，而Three中的Points简单得多。因此最终这个类被命名为Points。

5）Light

神说：要有光！

光影效果是让画面丰富的重要因素。

Three提供了包括环境光AmbientLight、点光源PointLight、聚光灯SpotLight、方向光DirectionalLight、半球光HemisphereLight等多种光源。

只要在场景中添加需要的光源就好了。

6）Renderer

在场景中建立了各种物体，也有了光，还有观察物体的相机，是时候把看到的东西渲染到屏幕上了。这就是Render做的事情了。

Renderer绑定一个canvas对象，并可以设置大小，默认背景颜色等属性。

调用Renderer的render函数，传入scene和camera，就可以把图像渲染到canvas中了。

现在，一个静态的画面已经可以得到了，怎么才能让它动起来？

很简单的想法，改变场景中object的位置啊角度啊各种属性，然后重新调用render函数渲染就好了。

那么重新渲染的时机怎么确定？

HTML5为我们提供了requestAnimFrame，它会自动在每次页面重绘前调用传入的函数。

如果我们一开始这样渲染：

只需要改成这样：

object就可以动起来了！

下面我们用一个简单的例子来梳理一下这个过程。

首先写一个有Canvas元素的页面吧。

下面来做Javascript的部分

首先初始化Renderer

初始化场景:

初始化相机：

要唯一确定一个相机的位置与方向，position、up、lookAt三个属性是缺一不可的。

这里我们创建了一个正交投影相机，这里我将视景体大小与屏幕分辨率保持一致只是为了方便，这样坐标系中的一个单位长度就对应屏幕的一个像素了。

我们将相机放在Z轴上，面向坐标原点，相机的上方向为Y轴方向，注意up的方向和lookAt的方向必然是垂直的（类比自己的头就知道了）。

下面添加一个立方体到场景中：

注意我们使用了法向材质MeshNormalMaterial，这样立方体每个面的颜色与这个面对着的方向是相关的，更便于观察/调试。

在这个简单的demo里我不打算添加光影效果，而法向材质对光也是没有反应的。最后来创建一个动画循环吧

每次重绘都让这个立方体转动一点点。当页面加载好时，调用前面这些函数就好了。

WebGL中文网强烈推荐!!

WebGL中文教程网

1.检查npm-v版本和使用对应的vite安装vue3项目

需要安装依赖：npminstall

运行：npmrundev

目录结构：

2.threejs官网：

3.安装threejs

4.准备3D模型素材(我这里使用glb格式)和HDR图片，素材网上可以找有免费的。

5.在App.vue中绑定id，挂载，实例化使用

6.在项目中的src目录下创建utils目录，在utils目录下创建Base3d.js脚本

效果展示：手机模型已经加载至场景中，背景是hdr图。

功能展示：用户可以滑动滚轮将模型进行放大缩小，场景360度无死角旋转。

1、THREEJS官方网址：u。/uthreejs通过封装WEBGLAPI实现了在网页端直接进行三维3d模型渲染。应用场景包括：小游戏，在线展厅，DIY互动等现代互联网应用，极具发展前景。

2、官方使用案例，可以直接套用。

以u;/u为例，讲解如何使用Threejs构建自己的应用：

步骤一、新建html页面。

3、如何在vue中引入THREEJS

步骤一、新建threejs组件，ZeusStage.vue

步骤二、调用ZeusStage.vue组件

微信小程序使用ThreeJs需要使用官方库threejs-miniprogram，API和原生ThreeJS基本一样，很好上手。喜欢数字孪生或者游戏的朋友，强烈推荐学习ThreeJs。该库入门简单，官方有很多优秀的demo可供参考，文档(包含中英文)也比较详细。有计划用ThreeJS做一个动物世界，模拟原始森林里各种各样的有趣的可爱的动物，包括它们声音和故事。有兴趣的或想加入这个计划的朋友可以在下面留言。

添加canvash画布，设置宽度100%，高度设置为屏幕高度减去状态栏高度和导航栏高度。

导入threejs，并创建threejs变量传入模型中，方便使用该变量。

Loader

FileLoader

FontLoader

ImageLoader

JSONLoader

Cache

缓存

MaterialLoader

ObjectLoader

TextureLoader

AnimationLoader

用于以JSON格式加载动画的类。

AudioLoader

加载

BufferGeometryLoader

用于加载BufferGeometry的装载器。这在内部使用FileLoader来加载文件。

MaterialLoader

用于以JSON格式加载素材的加载器

ObjectLoader

用于加载JSON资源的加载程序,此加载程序无法加载几何

TextureLoader

基类

CompressedTextureLoader

基于块的纹理加载器（dds，pvr，...）的抽象基类

CubeTextureLoader

立方体加载器

DataTextureLoader

抽象基类加载通用二进制纹理格式（rgbe，hdr，...）

MaterialLoader

用于以JSON格式加载素材的加载器

ObjectLoader

TextureLoader

BabylonLoader

.babylon

ColladaLoader

.dae

GLTF2Loader

.gltf

MTLLoader

.mtl资源的装载器(材质)

OBJLoader

.obj资源的装载器(3d对象)

OBJLoader2

.obj资源的装载器(3d对象)

WWOBJLoader2

用于在webworker中加载.obj资源的装载器。(3d对象)

PCDLoader

用于.pcd文件的加载程序。加载ascii和二进制。不支持压缩的二进制文件(3d对象)

PDBLoader

.pdb是geometryAtoms，geometryBonds和JSON结构。

SVGLoader

TGALoader

加载.tga文件纹理的类。