ThreeJs的学习：BufferGeometry的理解（3），Geometry和BufferGeometry的关系

最新推荐文章于 2024-06-21 17:40:53 发布
最新推荐文章于 2024-06-21 17:40:53 发布
阅读量8.1k 收藏 5
点赞数 1
分类专栏： Canvas与WebGL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinold/article/details/98250783
版权

在Three.js的这个方法中可以观察各个Geometry的转换

Geometry

geometry.vertices
geometry.faceVertexUvs
geometry.faces

 BufferGeometry

geometry.attributes
    geometry.attributes.position
    geometry.attributes.uv
    geometry.attributes.normal
geometry.index

目前为止的观察，发现所有的Geometry都会到projectObject进行转换，最后转换成BufferGeometry。

Geometry操作起来比BufferGeometry简单，应该是把BufferGeometry在包装一次了。
BufferGeometry是接近WegGL操作的，有点难度，但是更强大。

function projectObject( object, camera, groupOrder, sortObjects ) 

Geometry

Geometry转换成BufferGeometry

BoxGeometry

BoxGeometry转换成BufferGeometry

CubeGeometry

CubeGeometry转换成BufferGeometry

但有些Geometry并不会转换成BufferGeometry

XXXXBufferGeometry就是了

比如ShapeBufferGeometry、ExtrudeBufferGeometry和InstancedBufferGeometry并没有转换成BufferGeometry

因为他们本身就是BufferGeometry

ShapeBufferGeometry 

ExtrudeBufferGeometry 

比ShapeBufferGeometry多了个groups

Threejs的computeBoundingSphere方法

不管是Geometry还是BufferGeometry都有computeBoundingSphere方法，而且是初始化中必须执行。

两者的区别：BufferGeometry的方法computeBoundingSphere认为一定存在attributes，然后对attributes的一些数据进行操作。

而Geometry不管是否存在attributes，也不操作attributes的数据操作。

执行computeBoundingSphere的地方【intersectsObject: function ()】

Geometry的computeBoundingSphere方法

BufferGeometry的computeBoundingSphere方法

 

 结论

 最后结论是只要掌握好BufferGeometry的attributes以及其他属性的用法，用BufferGeometry可以全部搞定，不需要其他的Geometry。

太古时代
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js加载3d模型_ThreeJS:几何体相关(BufferGeometry)
weixin_39760389的博客
11-24 616
使用 BufferGeometry 可以有效减少向 GPU 传输几何体相关数据所需的开销可以自定义顶点位置, 面片索引, 法向量, 颜色值作者:随遇丿而安出处:https://www.cnblogs.com/xiaxiangx/p/13849204.html1. BufferGeometry使用初体验在之前的学习中, 我是已经了解到建立一个3d场景, 不知道屏幕前的你是否有了解到, threejs...
mesh threejs 属性_应用转换时，ThreeJS bufferGeometry位置属性不会更新
weixin_34520664的博客
12-23 505
I used STLLoader to load an stl onto a threeJS scene returning a BufferGeometry.I then usedmyMesh.position.set( x,y,z )myMesh.rotation.setFromQuaternion ( quaternion , 'XYZ');to translate the geometry...
`THREE.BufferGeometry` 是 Three.js 中一个强大的类，用于表示几何体数据。
qq_37030315的博客
06-05 454
demo案例 是 Three.js 中一个强大的类，用于表示几何体数据。与传统的 类相比，它使用缓冲区来存储顶点数据，从而在性能上有显著的提升。以下是 的详细说明，包括其输入参数、输出结果、属性和方法。 属性 的主要属性有： 提供了丰富的方法，用于操作几何体数据：addAttribute: 添加或更新属性。自 Three.js r125 版本起已废弃，推荐使用 。 setIndex: 设置顶点索引。 setAttribute: 添加或更新属性。 getAttribute: 获取属性。
`THREE.BufferGeometry` 是 three.js 中的一个核心类，用于创建和处理几何体。它使用缓冲区数组存储几何数据，如顶点、法线和颜色，从而提高了性能。
最新发布
qq_37030315的博客
06-21 637
demo案例 是 three.js 中的一个核心类，用于创建和处理几何体。它使用缓冲区数组存储几何数据，如顶点、法线和颜色，从而提高了性能。以下是 的详细说明，包括其构造函数、属性和方法。 属性 attributes: index: morphAttributes: groups: boundingBox: boundingSphere: drawRange: userData: setAttribute(name, attribute): getAttribute(name):
Three.js-BufferGeometry
damadashen的博客
07-09 589
Three中BufferGeometry的介绍及使用
three.js 教程BufferGeometry讲解
yy_1028的博客
01-20 3110
首先先用BufferGeometry创建一条无限延长的线段，初始化线段点 addRunline(){ // geometry var geometry = new THREE.BufferGeometry(); // attributes // var positions = new Float32Array( this.MAX_POINTS * 3 ); // 3 vertices per point geometry.setAttribute( 'positi
Three.js入门（一）——几何体BufferGeometry
weixin_47159518的博客
10-16 644
非常简单，你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。法线：数学上的法线概念，比如一个平面，法线的就是改平面的垂线，如果是光滑曲面，一点的法线就是该点切面的法线。对于曲面而言，细分数越大，表面越光滑，但是三角形和顶点数量越多，渲染性能越差。
学习 Three.js (4) —— BufferGeometry()
weixin_52872413的博客
11-14 587
three.js 中的几何体都是使用三角形构成的，而 BufferGeometry() 方法就是用于构建三角形的核心方法
【Three.js】BufferGeometry 基础讲解（position、normal、color、index）
热门推荐
qq_34695703的博客
12-01 1万+
1. BufferGeometry 首先，在 three.js 中有THREE.Mesh 网格、THREE.Points 点、THREE.Line 线条等模型。其中： Mesh 网格模型创建的物体是由一个个小三角形组成，如下面各图。这些小三角形又是由三个点确定，需要三个确定的位置，即确定的 xyz Points 模型创建的物体是由一个个点构成，每个点都有自己的位置，Points 相当于点的集合。 Line 模型创建的物体是连续的线条，这些线可以理解为是按顺序把所有点连接起来。
Three.js 基础- 第 2 章 - 几何体BufferGeometry
能带孩子会做饭
04-14 1439
Three.js 基础- 第 2 章 - 几何体BufferGeometry 1. 几何体顶点位置数据和点模型 2. 线模型对象 3. 网格模型(三角形概念) 4. 构建一个矩形平面几何体 5. 几何体顶点索引数据 6. 顶点法线数据 7. 查看threejs自带几何体顶点 8. 旋转、缩放、平移几何体
ThreeJs的学习：BufferGeometry理解（1） 生成正方形立方体
太古时代的专栏
07-08 3276
var bgeometry = new THREE.BufferGeometry(); /* // BufferGeometry形成一个最简单的平面 // 一个平面由两个三角形组成，每个三角形由3个坐标，每个坐标由XYZ组成 // 所以一个平面需要六个坐标 var vertices = new Float32Array( [ // 三角形1 - 三个顶点 -10 ,10, 0, -10 ...
threejs-csg:用于Three.js，ES6 + BufferGeometry的构造实体几何
04-05
threejs-csg（进行中） 用于Three.js，ES6 + BufferGeometry的构造实体几何 发展 运行npm install然后npm start 要查看演示，请将浏览器定向到 用法 const box = new Mesh(new BoxBufferGeometry(0.2, 0.2, 1), material); // console.log('box: ', new BoxBufferGeometry(0.2, 0.2, 1)); box.position.set(0.1, 0.1, 0); const sphere = new Mesh(new SphereBufferGeometry(0.1), material); sphere.position.set(0, 0, -0.3); const sphereB = sphere.clone(); spher
Threejs入门之十:认识缓冲几何体BufferGeometry（三）
九仞山的专栏
04-04 841
详细介绍几何体顶点索引、顶点法线以及缓冲几何体缩放、平移、旋转操作的本质
Threejs入门之八：认识缓冲几何体BufferGeometry（一）
九仞山的专栏
04-03 979
认识Threejs中的缓冲几何体BufferGeometry，并通过BufferGeometry创建一个自定义几何体
Three几何体BufferGeometry
n_229397218的博客
02-28 1265
/ 创建几何体的 顶点数据0, 0, 0, // 第一个点的位置3, 0, 0,0, 3, 0,0, 0, 3,1, 0, 0,0, 1, 0,0, 0, 1,2, 0, 0,0, 5, 0,0, 0, 7])通过threejs的属性缓冲区对象表示threejs几何体顶点数据。// 通过 BufferAttribute来创建几何体的具体的顶点数据一个矩形平面，可以至少通过两个三角形拼接而成。而且两个三角形有两个顶点的坐标是重合的。
threejs中bufferGeometry合并几何体实现
qq_37055675的博客
09-08 3932
在项目中升级threejs版本，原版本中用到了Geometry.nerge()方法。升级后的threejs删除了Geometry相关类，转而使用BufferGeometry实现生成几何体。BufferGeometry中的merge()方法使用后，并未将多个几何体进行合并，故自实现了合并多个几何体的功能。 本文中的合并几何体函数只对position、normal、uv、groups进行了合并，合并的几何体为shape拉伸的多个几何体，且为表面和侧立面分别使用不同的material。 以下为实现合并多个几何
【ThreeJS基础教程-高级几何体篇】2.6 BufferGeometry与BufferAttribute
qq_42760477的博客
11-04 1508
Threejs基础教程：BufferGeometry与BufferAttribute介绍
three.js中BufferGeometry和InstancedBufferGeometry
X01动力装甲的专栏
04-02 1749
three.js中BufferGeometry和InstancedBufferGeometry 除了BufferGeometry和InstancedBufferGeometry还有BufferAttribute和InstancedBufferAttribute。 InstancedBufferGeometry是BufferGeometry 的实例化版本。 three对实例化buffergeomet...
threeJS22-geometry-buffergeometry-lines
谷子的博客
01-03 1121
需要电子档书籍或者源码可以Q群：828202939   希望可以和大家一起学习、一起进步！！ 如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！ 涉及的知识点博主已经从three源码库里面摘要出来放在对应的注释里面！ 本案例是根据线管组合成一个立方体 效果图： 代码： <html> <head> ...
使用three.js的BufferGeometry和ShaderMaterial实现3D火焰特效
05-24
要实现3D火焰效果，可以使用BufferGeometry和ShaderMaterial来创建一个自定义的火焰材质。下面是一个简单的实现步骤： 1. 创建一个BufferGeometry对象，并设置顶点、索引和UV坐标数据。这些数据可以通过编写一个简单的函数来生成。 ``` function createFireGeometry() { const geometry = new THREE.BufferGeometry(); const vertices = []; const indices = []; const uvs = []; // Generate vertices and indices // ... geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); geometry.setIndex(indices); geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2)); return geometry; } ``` 2. 创建一个自定义的ShaderMaterial，并设置uniform变量。这些变量将用于控制火焰的外观和动画。在这个例子中，我们设置了时间、颜色、火焰高度、火焰密度和火焰速度等变量。 ``` const fireMaterial = new THREE.ShaderMaterial({ uniforms: { time: { value: 0 }, color: { value: new THREE.Color('#ff5500') }, flameHeight: { value: 1.5 }, flameDensity: { value: 1.0 }, flameSpeed: { value: 1.0 }, noiseTexture: { value: noiseTexture }, }, vertexShader: ` // Vertex shader code `, fragmentShader: ` // Fragment shader code `, }); ``` 3. 编写着色器代码，实现火焰效果。着色器代码包括顶点着色器和片段着色器。顶点着色器用于将顶点位置转换为屏幕空间坐标，并将一些变量传递给片段着色器。片段着色器用于计算像素颜色，以实现火焰效果。 ``` // Vertex shader code attribute vec3 position; attribute vec2 uv; uniform float time; uniform float flameHeight; uniform float flameDensity; uniform float flameSpeed; varying vec2 vUv; varying float vDistortion; void main() { // Vertex shader code } // Fragment shader code uniform vec3 color; uniform sampler2D noiseTexture; void main() { // Fragment shader code } ``` 4. 将BufferGeometry和ShaderMaterial组合到一个Mesh对象中，并将其添加到场景中。 ``` const fireGeometry = createFireGeometry(); const fireMesh = new THREE.Mesh(fireGeometry, fireMaterial); scene.add(fireMesh); ``` 5. 在渲染循环中更新uniform变量，以实现动画效果。 ``` function animate() { requestAnimationFrame(animate); const time = performance.now() / 1000; fireMaterial.uniforms.time.value = time; renderer.render(scene, camera); } ``` 6. 完成。现在可以看到一个简单的3D火焰效果了。 完整的代码示例可以参考这里：https://codepen.io/zadvorsky/pen/xxKXxYp。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值