admin 发布：2024-06-14 09:46 167
在Three.js中创建几何图形需要了解坐标系。Three.js提供了三种坐标系：世界坐标系、本地坐标系和视口坐标系。在创建几何图形时，需要指定物体的位置、旋转和缩放等属性。这些属性通常使用三维向量表示，可以通过坐标系中的坐标值进行设置。Three.js还提供了许多内置的几何体和材质，可以方便地创建各种形状的几何图形。
今天给各位分享threejs里的几何图形代码的知识，其中也会对threejs 坐标系进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画，精美的效果。 但是，人总是贪的。那么，在此之上还能做什么呢？其中一种就是通过WebGL在网页中绘制高性能的3D图形。
OpenGL 它是最常用的跨平台图形库。
WebGL 是基于 OpenGL 设计的面向web的图形标准，提供了一系列JavaScript API，通过这些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中文教程网
threejs怎么把点连成面可以用模型的方法。
1、在ThreeJs中：模型由几何体和材质构成和模型以何种形式（点、线、面）展示取决于渲染方式，所有的三位物体都是由点构成，两点构成线，三点构成面，在three.js中利用THREE.Vector3()是用来缺点点的位置的，它的三个参数分别是对应于三维坐标的x轴，y轴和z轴。MeshBasicMaterial：用于以简单的阴影（平面或线框）方式绘制几何的材料。MeshDepthMaterial：用于通过深度绘制几何的材料。深度是基于相机附近和远处的平面。白色最近，黑色最远。MeshLambertMaterial：无光泽表面材质，无镜面高光。MeshNormalMaterial：将法线矢量映射为RGB颜色的材质。MeshPhongMaterial：光泽表面材质，镜面高光，反射。MeshStandardMaterial：使用金属粗糙度工作流程的标准物理基础材料。
ThingJS 使用角度控制物体旋转。
通常使用如下属性和接口控制物体旋转：
在世界坐标系下，使用 angles 属性来设置或访问旋转信息。
obj.angles = [0,45,0] //设置世界坐标系Y轴向旋转45角度
在父物体坐标系下，使用 localAngles 属性来设置或访问旋转信息。
obj.localAngles = [0,45,0] //设置父物体坐标系Y轴向旋转45角度
在自身坐标系下，使用如下接口方法：
//使用rotate，可输入角度和轴向。设置沿给定轴向转一定角度，传入的旋转轴是自身坐标系下的轴方向 obj.rotate( 45, [0,1,0]) //沿自身x轴向旋转，等同于 obj.rotate( 30, [1,0,0]) obj.rotateX(30) //沿自身y轴向旋转，等同于 obj.rotate( 90, [0,1,0]) obj.rotateY(90)
//沿自身z轴向旋转，等同于 obj.rotate( -45, [0,0,1]) obj.rotateZ(-45)
我们还可以使用 lookAt 接口方法，使得物体的观察方向一直对准一个位置或物体
//让物体面向[0,1,0]，该坐标是在世界坐标下obj.lookAt( [0,1,0]) //让物体一直面向摄影机obj.lookAt( app.camera ) //让物体一直面向一个物体obj.lookAt( obj ) //让物体一直面向一个物体,同时物体沿自身Y轴向再旋转90度obj.lookAt( obj， [0,90,0] ) //取消lookAt功能obj.lookAt( null )
查看示例网页链接
正常情况下，子物体会随着父物体旋转而一起旋转，如果想控制子物体不随父物体旋转，可通过设置子物体的 inheritAngles 属性为 false 而实现。
呵呵，这个我才做过的
这个分三层，一层放图片画面，一层放按钮和文字，一层放隐形按钮（放在最上面）。每个图片画面是一个影片剪辑，效果就是透明度的变化。假设每个剪辑用了30帧（前10帧透明度从0变到100），在场景中加入剪辑后，就要插入30帧，再放下一个剪辑。依次。。。
按钮“1”上写代码：
on (release) {
gotoAndPlay(1);//跳到相应画面的首帧
}
隐形按钮层在最上面，透明度为1，大小与图片大小一致，在第一个按钮上写代码：
on (rollOver) {
gotoAndStop(29);
}
on (rollOut) {
gotoAndPlay(18);//这里没有让它直接就在29帧处播放，有一个停顿
}
CircleGeometry
圆形
RingGeometry
环形
PlaneGeometry
矩形的几何体
ShapeGeometry
通过路径构建一个多边形=自定义形状
BoxGeometry
长方体
TetrahedronGeometry
四面体
ConeGeometry
圆锥
CylinderGeometry
圆柱
DodecahedronGeometry
十二面体
IcosahedronGeometry
二十面体
OctahedronGeometry
八面体
SphereGeometry
球体
TorusGeometry
圆环几何
TubeGeometry
管状体
LatheGeometry
轴向对称：例如花瓶
PolyhedronGeometry
多面体 =顶点+面
注：将它们投射到球体上，然后将其分割到所需的细节水平
ParametricGeometry
通过函数构建几何体，参量体
TextGeometry
文字体
TorusKnotGeometry
创建圆环结，其特殊形状由一对互质整数p和q定义。如果p和q不是互质的，结果将是环面连接。
ExtrudeGeometry
伸出的几何体,该对象将2D形状挤出到3D几何体。
EdgesGeometry
获取几何体的边线
WireframeGeometry
作帮助对象来将几何 对象视为线框
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
用于在web worker中加载.obj资源的装载器。(3d对象)
PCDLoader
用于.pcd文件的加载程序。加载ascii和二进制。不支持压缩的二进制文件(3d对象)
PDBLoader
.pdb是geometryAtoms，geometryBonds和JSON结构。
SVGLoader
TGALoader
加载.tga文件 纹理的类。
关于threejs里的几何图形代码和threejs 坐标系的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
版权说明：如非注明，本站文章均为 AH站长 原创，转载请注明出处和附带本文链接；
