Three.js 更新了bufferGeometry，线，后交互不到解决办法

最新推荐文章于 2024-06-05 10:11:22 发布
最新推荐文章于 2024-06-05 10:11:22 发布
阅读量495 收藏
点赞数 1
分类专栏： three.js 文章标签： html 前端 图形渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40765480/article/details/129895614
版权
在Three.js中，更新BufferGeometry的属性后可能导致交互失效，因为包围球未更新。解决方案是调用computeBoundingSphere()方法来重新计算几何体的边界球形，确保交互判断的准确性。
摘要由CSDN通过智能技术生成

Three.js 更新了BufferGeometry后交互不到的问题原因是更新了bufferGeometry的Attributed后，BufferGeometry的形状大小发生了改变，但是，其用于交互判断的包围球没有被更新，所以还需要再执行   BufferGeometry.computeBoundingSphere()  方法更新改几何的包围球。

BufferGeometry.boundingSphere : Sphere

当前 bufferGeometry 的外边界球形。可以通过 .computeBoundingSphere() 计算。默认值是 null。

BufferGeometry.computeBoundingSphere () : undefined

计算当前几何体的的边界球形，该操作会更新已有 [param:.boundingSphere]。
边界球形不会默认计算，需要调用该接口指定计算边界球形，否则保持默认值 null。

苏剑涛@XM
关注
专栏目录
Three.js 基础入门--第13课：进阶篇之 Three.js 场景交互
liuhao9999的博客
04-11 387
浏览器是一个 2D 视口，而 Three.js 展示的是 3D 场景。场景交互时，需要在二维平面中控制三维场景的模型，那如何将 2D 视口的 x 和 y 坐标转换成 Three.js 场景中的 3D 坐标呢？好在 Three.js 已经有了解决相关问题的方案，那就是射线，用于鼠标拾取（计算出鼠标移过的三维空间中的对象）等。我们看下面这张图片：我们一般都会设置三维场景的显示区域，如果指明当前显示的 2D 坐标给，它将生成一条从显示起点到终点的射线，也就是射线与近视面交点和射线与远视面交点连成的这一条直线。
Three.js（0.165.0）入门到实战
郭宝的博客
08-20 3541
WebGL是一个图形库，WelGL给我们提供了很多 Javascript API ，用于在Web浏览器中呈现交互式3D和2D图形，而且无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的API，可以在HTML5 的 元素中使用。WebGL给我们提供了一系列的图形操作接口，能够让我们通过 Javascript 去使用 GPU 来进行浏览器图形渲染。
three.js报错集锦
Beam
07-23 6540
1、KeyframeTrack 帧动画 报错： THREE.Matrix3: .getInverse() can’t invert matrix, determinant is 0 代码： // 此处是一个缩放动画 let times = [0, 1] let scales = [0, 0, 0, 1, 1, 1] let scaleKeyframeTrack = new THREE.Keyfra...
THREE.js，引入3d模型时报错THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The “positio
weixin_43951592的博客
03-30 6795
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
Three.js 基础- 第 2 章 - 几何体BufferGeometry
能带孩子会做饭
04-14 1594
Three.js 基础- 第 2 章 - 几何体BufferGeometry 1. 几何体顶点位置数据和点模型 2. 线模型对象 3. 网格模型(三角形概念) 4. 构建一个矩形平面几何体 5. 几何体顶点索引数据 6. 顶点法线数据 7. 查看threejs自带几何体顶点 8. 旋转、缩放、平移几何体
【ThreeJS基础教程-高级几何体篇】2.6.1 BufferGeometry应用1-物体居中与包围盒的应用
qq_42760477的博客
11-15 1082
Threejs基础教程：BufferGeometry的应用
threejs导入obj文件报错 buffergeometry.setAttribute is not a function error
Tz
07-12 3301
Uncaught (in promise) TypeError: buffergeometry.addAttribute is not a function at OBJLoader.parse (index.js?53f9:1211:1) at Object.eval [as onLoad] (index.js?53f9:947:1) at eval (three.module.js?5a89:39584:1)
threejs设置宽度线例子
06-10
在Three.js这个强大的JavaScript 3D库中，创建带宽度线和动态连续的箭头线是一种常见的需求，尤其是在构建交互式3D场景时。本文将深入探讨如何利用Three.js实现这一功能。 首先，理解Three.js的基本概念至关重要。...
three.js-master.zip
08-04
Three.js是一款强大的JavaScript库，专为在Web浏览器中创建交互式3D图形而设计。它提供了丰富的API和工具，使得开发者无需深入理解底层的WebGL技术，也能轻松构建出引人入胜的3D视觉效果。"three.js-master.zip"这个...
1.three.js开发指南
05-30
《Three.js开发指南》是一本专注于介绍WebGL图形库Three.js的专业教程，旨在帮助开发者深入理解和熟练运用这个强大的JavaScript框架，构建丰富的3D交互式网页应用。Three.js库简化了WebGL的复杂性，使得3D图形编程变...
Threejs入门之十:认识缓冲几何体BufferGeometry（三）
九仞山的专栏
04-04 905
详细介绍几何体顶点索引、顶点法线以及缓冲几何体缩放、平移、旋转操作的本质
threejs加载obj报错
weixin_39531565的博客
05-24 1525
【代码】threejs加载obj报错。
threejs报错记录_1
m0_60707623的博客
03-18 764
threejs找不到textGeometry bug记录
ThreeJs的学习：BufferGeometry的理解（3），Geometry和BufferGeometry的关系
太古时代的专栏
08-02 8144
在Three.js的这个方法中可以观察各个Geometry的转换 目前为止的观察，发现所有的Geometry都会到projectObject进行转换，最后转换成BufferGeometry。 function projectObject( object, camera, groupOrder, sortObjects ) Geometry Geometry转换成BufferGeome...
`THREE.BufferGeometry` 是 Three.js 中一个强大的类，用于表示几何体数据。
最新发布
小豆包
06-05 576
demo案例 是 Three.js 中一个强大的类，用于表示几何体数据。与传统的 类相比，它使用缓冲区来存储顶点数据，从而在性能上有显著的提升。以下是 的详细说明，包括其输入参数、输出结果、属性和方法。 属性 的主要属性有： 提供了丰富的方法，用于操作几何体数据：addAttribute: 添加或更新属性。自 Three.js r125 版本起已废弃，推荐使用 。 setIndex: 设置顶点索引。 setAttribute: 添加或更新属性。 getAttribute: 获取属性。
vue显示3d模型|vue-3d-model不显示问题
qq_42877655的博客
03-12 2601
vue显示3d模型使用vue-3d-model 1. 下载 npm install vue-3d-model --save 引入组件，可支持7种模型文件类型 类型 对应组件 obj <model-obj> json <model-three> stl <model-st> dae <model-collada> ply <model-ply> fbx <model-fbx> gltf(2.0)
【Three.js】vue2导入pcd文件 PCDLoader
weixin_44424265的博客
01-18 1932
a.edd4:34:1)b.两者本质同个问题，都是没有获取到pcd文件资源，第一个由于设置了vue-router，使他没有获取到后返回来index.html (官方文档404,我先检查了路径名称发现没拼写错误，后来尝试 public下其他常见类型文件可以，只有这个pcd文件不行，然后我就看了他们的请求网站，发现pcd文件的请求网址多了个‘/public'，导致请求路径错误。解决办法：url直接不写public/直接从第二级开始写。
vue中展示3D模型 -- vue-3d-model
热门推荐
Rainy_X的博客
08-14 1万+
一、搜集到的网址 3D模型库 three.js WebGL babylonJS ThingJS EverAPI 3D数据可视化库 echarts — 基于Canvas Highcharts —基于SVG d3.js — 基于SVG/Canvas+SVG g2.js — 基于Canvas 二、需求 尝试使用three.js后发现上手不是特别快，后来发现了vue-3d-model组件，能够很简单的展示出3D模型 效果图如下 使用原因可看这篇文章 https://www.jianshu.com/p/
使用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。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值