Three.js - 几何体(五)
几何体
- 在
three.js
中如球体、立方体、平面、狗、猫、人、树、建筑等物体,都是几何体。它们都是根据大量顶点参数生成。 - 在
three.js
中内置了许多基本几何体,也提供了自定义几何体的方法。在开发中常见的做法是让美术在 3D 建模软件中创建 3D 模型,在由开发人员进行交互开发。
常见几何体
BoxGeometry 盒子
- 分段数简单理解,就是每多一个分段,在对应面的轴上添加两个顶点,增加组成这个面三角形的数量。分段数越多面就越精细,性能消耗也会变大。
const width = 8 // 宽度const height = 8 // 高度const depth = 8 // 深度const widthSegments = 4 // ui: 宽度的分段数const heightSegments = 4 // ui: 高度的分段数const depthSegments = 4 // ui: 深度的分段数const boxGeometry = new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
SphereGeometry 球
SphereGeometry
是通过扫描并计算围绕着Y轴和X轴的顶点来创建的。我们可以通过修改水平、垂直扫描角度的大来实现球体切片。
const radius = 8 // 球体半径const widthSegments = 32 // 水平分段数const heightSegments = 16 // 垂直分段数const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)// 网格const mesh = new THREE.Mesh(geometry, material)mesh.position.x = 10scene.add(mesh){const radius = 8 // 球体半径const widthSegments = 32 // 水平分段数const heightSegments = 16 // 垂直分段数const phiStart = Math.PI * 0.25 // 水平(经线)起始角度const phiLength = Math.PI * 2 // 水平(经线)扫描角度的大小const thetaStart = Math.PI * 0.25 // 垂直(纬线)起始角度const thetaLength = Math.PI * 0.5 // 垂直(纬线)扫描角度大小const geometry1 = new THREE.SphereGeometry(radius,widthSegments,heightSegments,phiStart,phiLength,thetaStart,thetaLength)// 网格const mesh1 = new THREE.Mesh(geometry1, material)mesh1.position.x = -10scene.add(mesh1)}
PlaneGeometry 平面几何体
const width = 8 // 宽度const height = 8 // 高度const widthSegments = 2 // 宽度的分段数const heightSegments = 2 // 高度的分段数const geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
BufferGeometry 自定义几何体
BufferGeometry
是面片、线或点几何体的有效表述。通过顶点位置、法相量、颜色值、UV 坐标等值来绘制几何体- 使用
BufferGeometry
可以有效减少向 GPU 传输顶点数据所需的开销。
- 定义面的顶点位置,法线坐标(法线是面朝向的信息)。一个面是两个三角形组成,所以需要6个顶点,一个立方体就需要36个顶点信息。
const vertices = [// front{ pos: [-1, -1, 1], norm: [0, 0, 1] },{ pos: [1, -1, 1], norm: [0, 0, 1] },{ pos: [-1, 1, 1], norm: [0, 0, 1] },{ pos: [-1, 1, 1], norm: [0, 0, 1] },{ pos: [1, -1, 1], norm: [0, 0, 1] },{ pos: [1, 1, 1], norm: [0, 0, 1] },// right{ pos: [1, -1, 1], norm: [1, 0, 0] },{ pos: [1, -1, -1], norm: [1, 0, 0] },{ pos: [1, 1, 1], norm: [1, 0, 0] },{ pos: [1, 1, 1], norm: [1, 0, 0] },{ pos: [1, -1, -1], norm: [1, 0, 0] },{ pos: [1, 1, -1], norm: [1, 0, 0] },// back{ pos: [1, -1, -1], norm: [0, 0, -1] },{ pos: [-1, -1, -1], norm: [0, 0, -1] },{ pos: [1, 1, -1], norm: [0, 0, -1] },{ pos: [1, 1, -1], norm: [0, 0, -1] },{ pos: [-1, -1, -1], norm: [0, 0, -1] },{ pos: [-1, 1, -1], norm: [0, 0, -1] },// left{ pos: [-1, -1, -1], norm: [-1, 0, 0] },{ pos: [-1, -1, 1], norm: [-1, 0, 0] },{ pos: [-1, 1, -1], norm: [-1, 0, 0] },{ pos: [-1, 1, -1], norm: [-1, 0, 0] },{ pos: [-1, -1, 1], norm: [-1, 0, 0] },{ pos: [-1, 1, 1], norm: [-1, 0, 0] },// top{ pos: [1, 1, -1], norm: [0, 1, 0] },{ pos: [-1, 1, -1], norm: [0, 1, 0] },{ pos: [1, 1, 1], norm: [0, 1, 0] },{ pos: [1, 1, 1], norm: [0, 1, 0] },{ pos: [-1, 1, -1], norm: [0, 1, 0] },{ pos: [-1, 1, 1], norm: [0, 1, 0] },// bottom{ pos: [1, -1, 1], norm: [0, -1, 0] },{ pos: [-1, -1, 1], norm: [0, -1, 0] },{ pos: [1, -1, -1], norm: [0, -1, 0] },{ pos: [1, -1, -1], norm: [0, -1, 0] },{ pos: [-1, -1, 1], norm: [0, -1, 0] },{ pos: [-1, -1, -1], norm: [0, -1, 0] }]const positions = []const normals = []// 以数组形式获取 数据for (const vertex of vertices) {positions.push(...vertex.pos)normals.push(...vertex.norm)}
- 通过
.setAttribute()
设置定义好的顶点信息。这里需要注意的是.BufferAttribute()
第二个参数是确认,数组中连续的几个值组合为一组信息。
const geometry = new THREE.BufferGeometry()const positionNumComponents = 3 // 3个一组 为一个顶点const normalNumComponents = 3 // 3个一组 为一个顶点geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents))geometry.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents))
- 自定义几何体的优势是它和GPU传输的数度快,缺点是顶点信息难以修改,在开发中需要根据需求判断是否使用。
总结
- 在
three.js
中内置的几何体非常的多,需要深入了解的需要到官网上查看。本节简单的介绍了几何体是什么。 - 在创建几何体时需要注意,分段数的大小要控制好。细分的越少,运行的越流畅,使用的内存也会更少。细分的越多,动画越精细,运行的越不流畅。
Three.js - 几何体(五)相关推荐
- three.js 几何体-组合网格_ThreeJS 粒子系统实现雪花飘落动画
ThreeJS 粒子系统中,THREE.Points是用来创建点的类,也用来批量管理粒子,基于几何体的顶点来渲染每个粒子.这个类的构造函数有两个参数,geometry(几何体)和material(材质 ...
- three.js几何体的旋转,缩放,平移
附带一个可用的OrbitControls.js http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js ...
- three.js几何体的_UV_、法向属性以及BufferGeometry类介绍
一.几何体的_UV_以及法向属性 UV属性是一组二维坐标,每个顶点都有一个对应的UV坐标.在三维模型上贴上二维的纹理贴图时,需要将所有顶点映射到纹理上的对应位置.UV属性的取值范围一般是[0,1],表 ...
- three.js 几何体-组合网格_3dmax利用优化和多边形倒角制作饰品组合1
大家好,今天为大家讲解一下如何利用3dmax的优化和多边形倒角命令制作饰品组合. 单击创建,选择几何体,对象切换为标准基本体,选择圆柱体在场景中进行创建. 单击修改,半径设置为60mm,高度设置为28 ...
- js html异步加载的属性,异步加载JS的五种方式
方案一: 点评:HTML5中新增的属性,Chrome.FF.IE9&IE9+均支持(IE6~8不支持).此外,这种方法不能保证脚本按顺序执行. 方案二: 点评:兼容所有浏览器.此外,这种方法可 ...
- JS 四舍六入五成双
规则: 四舍六入五考虑, 五后非零就进一, 五后皆零看奇偶, 五前为偶应舍去, 五前为奇要进一. function evenRound(num, decimalPlaces) {var d = dec ...
- Zoom and pan, introduction to FabricJS part 5(缩放和平移,介绍Fabric.js第五部分)
Zoom and pan, introduction to FabricJS part 5 其他文章见:Fabric.js中文文档导航 在上一个系列中,我们讨论了很多主题.从基本的对象操作到动画,事件 ...
- Three.js学习五——让模型沿着轨迹移动
目录 流程 搭建场景环境 添加模型 增加运动轨迹 让模型沿轨迹运动 完整代码和效果 流程 基本流程 1.添加模型 2.增加运动轨迹 3.让模型沿轨迹运动 工程文件结构如下图: static:存放静态资 ...
- arcgis js(五)切换底图
1.经过四节的学习终于能够显示天地图了arcgis js(四)加载天地图_郝大大的博客-CSDN博客,以后的开发也就能基于天地图的底图了,这节学习天地图矢量底图和影像底图的自由切换,主要介绍两种方法. ...
最新文章
- 计算机网络技术包括哪几种,计算机网络技术包含的两个主要技术是计算机技术和( )。...
- imu oracle,问一个关于IMU REDO的问题~
- 操作系统第一章作业(2020@usc)
- HarmonyOS之bytrace命令的使用
- 全国计算机等级考试题库二级C操作题100套(第83套)
- 拟态个人主页UI源码开源
- Debugging with GDB (6) gdb 命令
- 多线程下单例模式的实现_ThreadLocal_ReentrantLock
- [asp.net] 验证控件的属性及用法
- poj_2299Ultra-QuickSort,树状数组离散化
- 神经结构化学习 4 图像分类的对抗性学习Adversarial learning for image classification
- java8分组求和_Java8 stream 中利用 groupingBy 进行多字段分组求和案例
- python正则表达式与re模块
- 基于RT-Thread的光照强度传感器BH1750FVI 软件包
- 第6章 垃圾邮件识别
- android的app图标大全,安卓app图标
- c语言捕鱼达人源码,用捕鱼达人去理解C中的多线程.doc
- sendgrid html text,当我保存时,SendGrid通过更改我的html模板“帮助”我?
- 爬虫练习 -- 链家
- 相关系数 Correlation Coefficient 的理解
热门文章
- 专业游戏录屏软 Camtasia 2023强悍来袭,Camtasia 2023软件安装激活教程
- jaxb xml 生成 java_使用 JAXB 工具根据 Java 类生成 XML 模式
- Arm和Unity联合推出:适用于移动应用程序的3D美术优化-[3]纹理
- [附源码]JAVA毕业设计绿色生活基于PS、DW的绿色环保宣传网站(系统+LW)
- 不是吧,还有人不知道计算机以及Linux基础知识?
- 计算机行业求职总结--准备篇
- Linux - 第12节 - 网络编程套接字(一)
- react native 上拖拽元素
- pgsql 命令行连接数据库
- 备注html网页代码,备注.html · dengzhao/prd_zhangyao - Gitee.com