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

最新推荐文章于 2024-06-05 10:11:22 发布
最新推荐文章于 2024-06-05 10:11:22 发布
阅读量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
    评论
专栏目录
3D空间包围球(Bounding Sphere)的求法
i_dovelemon的专栏
06-21 1万+
讲述基本碰撞检测概念，给出两种计算3D模型包围球体的方法。
three.js 入门三：buffergeometry贴图属性（position、index和uvs）
12-08
在本篇关于“three.js 入门三：buffergeometry贴图属性（position、index和uvs）”的文章中，我们将深入探讨如何使用three.js库在3D场景中应用纹理贴图，特别是关注BufferGeometry对象中的关键属性。BufferGeometry...
THREE.js，引入3d模型时报错THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The “positio
weixin_43951592的博客
03-30 6456
let loader = new OBJLoader(); let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,200); camera.position.set(40, 40, -40); loader.load( '../assets/flower.obj', ( obj )=> { let object
threejs加载obj报错
weixin_39531565的博客
05-24 1318
【代码】threejs加载obj报错。
`THREE.BufferGeometry` 是 Three.js 中一个强大的类，用于表示几何体数据。
最新发布
qq_37030315的博客
06-05 433
demo案例 是 Three.js 中一个强大的类，用于表示几何体数据。与传统的 类相比，它使用缓冲区来存储顶点数据，从而在性能上有显著的提升。以下是 的详细说明，包括其输入参数、输出结果、属性和方法。 属性 的主要属性有： 提供了丰富的方法，用于操作几何体数据：addAttribute: 添加或更新属性。自 Three.js r125 版本起已废弃，推荐使用 。 setIndex: 设置顶点索引。 setAttribute: 添加或更新属性。 getAttribute: 获取属性。
【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入门（一）——几何体BufferGeometry
weixin_47159518的博客
10-16 612
非常简单，你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。法线：数学上的法线概念，比如一个平面，法线的就是改平面的垂线，如果是光滑曲面，一点的法线就是该点切面的法线。对于曲面而言，细分数越大，表面越光滑，但是三角形和顶点数量越多，渲染性能越差。
threejs之3D飞行线
08-19
three.js提供了一个完整的3D场景框架，包括场景(Scene)、相机(Camera)、光源(Light)、几何体(Geometry)、材质(Material)和渲染器(Renderer)等核心元素。在我们的3D飞行线项目中，我们将创建一个地球模型作为背景，并...
threejs-tutorial:Three.js 系列教程，学习和探索 Three.js 世界
04-18
threejs-tutorial 从今天 2020年11月27日 开始学习和探索 Three.js 。 以下内容更新于 2021.04.16 特别提醒： 本教程最开始使用的是 r123 版本，但是后来 Three.js 更新到 r125 版后，r125 中做了一些修改，将 ...
threejs设置宽度线例子
06-10
在Three.js中，线条是由一系列点连接而成的，这些点由`THREE.Geometry`或`THREE.BufferGeometry`对象定义。为了创建带宽度的线条，我们需要使用`THREE.LineWidthMaterial`材质，该材质允许我们设置线条的宽度。然而...
ThreeJsTutorial:灵感来自josdirksenessential-threejs
03-28
这个教程旨在帮助初学者和有经验的开发者理解如何利用Three.js来构建令人惊叹的交互式3D场景。JosDirksen's Essential Three.js是本教程的重要灵感来源，它提供了深入的理论和实践指导。 一、基础知识 1. ...
学习 Three.js (4) —— BufferGeometry()
weixin_52872413的博客
11-14 579
three.js 中的几何体都是使用三角形构成的，而 BufferGeometry() 方法就是用于构建三角形的核心方法
three.js 把geometry转换成BufferGeometry，计算tangents
默茉的博客
03-27 2431
一、geometry=>buffergeomerty var bufferGeometry = new THREE.BufferGeometry().fromGeometry( geometry ); threejs官方文档：https://threejs.org/docs/index.html#api/en/core/BufferGeometry.fromGeometry 二，计算Ta...
Three.js 基础- 第 2 章 - 几何体BufferGeometry
能带孩子会做饭
04-14 1406
Three.js 基础- 第 2 章 - 几何体BufferGeometry 1. 几何体顶点位置数据和点模型 2. 线模型对象 3. 网格模型(三角形概念) 4. 构建一个矩形平面几何体 5. 几何体顶点索引数据 6. 顶点法线数据 7. 查看threejs自带几何体顶点 8. 旋转、缩放、平移几何体
Threejs入门之八：认识缓冲几何体BufferGeometry（一）
九仞山的专栏
04-03 965
认识Threejs中的缓冲几何体BufferGeometry，并通过BufferGeometry创建一个自定义几何体
threejs中bufferGeometry合并几何体实现
qq_37055675的博客
09-08 3906
在项目中升级threejs版本，原版本中用到了Geometry.nerge()方法。升级后的threejs删除了Geometry相关类，转而使用BufferGeometry实现生成几何体。BufferGeometry中的merge()方法使用后，并未将多个几何体进行合并，故自实现了合并多个几何体的功能。 本文中的合并几何体函数只对position、normal、uv、groups进行了合并，合并的几何体为shape拉伸的多个几何体，且为表面和侧立面分别使用不同的material。 以下为实现合并多个几何
three.js 教程BufferGeometry讲解
yy_1028的博客
01-20 3099
首先先用BufferGeometry创建一条无限延长的线段，初始化线段点 addRunline(){ // geometry var geometry = new THREE.BufferGeometry(); // attributes // var positions = new Float32Array( this.MAX_POINTS * 3 ); // 3 vertices per point geometry.setAttribute( 'positi
threejs 几何体顶点颜色数数据geometry.attributes.color
u014291990的博客
12-15 666
自定几何体顶点颜色数据，然后用网格模型Mesh渲染，和Line一样，也会产生颜色渐变效果。，下面以以点模型为例给大家演示，你可以看到geometry的不同点被你设置为了不同颜色。自定几何体顶点颜色数据，然后用线模型Line渲染，你可以看到直线的颜色是渐变的。章节2中介绍过顶点位置、顶点法向量数据，下面给大家介绍顶点颜色。下面代码两端直线，分别是红色到蓝色渐变、蓝色到绿色渐变。每个点对应一个位置数据，同时对应一个颜色数据。通过点、线、网格模型渲染几何体。一一对应的顶点颜色数据。设置的直线颜色渐变效果。
threejs 学习三
weixin_45730243的博客
02-06 423
BufferGeometry ：是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。MeshBasicMaterial：基础网格材质。一个以简单着色（平面或线框）方式来绘制几何体的材质。这种材质不受光照的影响。textureLoader：纹理加载器 可设置纹理的偏移、旋转、重复等。
使用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、付费专栏及课程。

余额充值