使用 Three.js 手动剔除视锥体

2023-12-12

我正在使用 Three.js 开发体素游戏。为此,我需要生成填充屏幕所需的尽可能多的块。目前,我正在围绕玩家加载一个半径为 20 的圆。

计算填充相机视锥体所需的块的精确范围并避免计算不可见块的最简单方法是什么?

每个块都有完全相同的大小(假设我们有一个向量size具有正确的值),并且位于 Y=0(X 和 Z 变化)。


var frustum = new THREE.Frustum();
frustum.setFromMatrix( new THREE.Matrix4().multiply( camera.projectionMatrix, camera.matrixWorldInverse ) );

for (var i=0; i<objects.length; i++) {
  objects[i].visible = frustum.intersectsObject( objects[i] );
}

仅渲染相机视锥体内的对象

有记录的here

希望这对你有帮助吗?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Three.js 手动剔除视锥体 的相关文章

  • 如何制作可点击的 CSS3DObject

    我正在使用三个 JS CSS3DRenderer 尝试使 CSS3DObject 在单击时更新其position z 这是我的代码 var element document createElement div element style w
  • 该浏览器无法识别 React Three Fiber 网格标签

    我正在关注 Youtube 上的 3d 作品集教程 但遇到了这个错误 在这里 我尝试渲染网格 但控制台显示警告 此元素在此浏览器中无法识别 浏览器正在渲染其余部分 但这部分代码没有被渲染 这是代码块 const Computers gt c
  • Three.js ShaderMaterial 灯光问题

    你好 这是我的代码的一部分 地球仪 function createGlobe var normalMap THREE ImageUtils loadTexture images earth normal 2048 jpg var surfa
  • 向该对象的每一面添加不同的颜色

    我为我的应用程序重新创建了一个包模型 并将其作为 obj 导出到 ThreeJs 中 我为模型几何中发现的每个面分配了不同的颜色 如下所示 var geometry new THREE Geometry fromBufferGeometry
  • 使用 Three.js 在片段着色器中手动选择 mipmap 的 lod

    我正在使用 Three js 中的 glsl es 编写一个基于物理的着色器 为了添加镜面全局照明 我使用内部带有 mipmap 链的立方体贴图 dds 纹理 按照 CubeMapGen 的说明进行预先计算here http seblaga
  • Three.js - 如何更新 arrowHelper?

    我正在尝试更新 arrowHelper 我尝试过操作箭头对象线中的顶点 设置所有内容dynamic true等等 但我似乎能做到的唯一方法就是删除旧线并绘制新线 有没有办法更新 arrowHelper 因此 您无法通过更改用于创建对象的值来
  • Three.js 支持波斯语/阿拉伯语文本

    我需要以波斯语 阿拉伯语显示一些文本 我加载了包含字符的字体 并使用 TextGeometry 在场景上创建文本 var loader new THREE FontLoader loader load B Zar Regular js fu
  • 将球体上的 3d 点转换为 UV 坐标

    我在球体上有一个 3d 点 想要将其转换为球体纹理上的 UV 点 有人可以指出正确的方向吗 我可以采用纯数学解决方案 Edit 我目前有这个 它不会返回正确的 UV 坐标 p 是球体上的 3d 点 mesh position 是球体的位置
  • 获取网格顶点的最佳方法 Three.js

    我是 Three js 的新手 所以也许我不会以最佳方式解决这个问题 我创建的几何图形如下 const geo new THREE PlaneBufferGeometry 10 0 然后我对其进行旋转 geo applyMatrix new
  • 从数组 THREE.js 创建纹理

    我正在研究地形生成器 但我不知道如何处理颜色 我希望能够生成一张占据整个 PlaneGeometry 的图像 我的问题是如何根据我的高度图创建一个覆盖整个 PlaneGeometry 没有环绕 的单个图像 我可以想到一种方法 但我不确定它是
  • Three.js 通过加载模型上的材质名称为材质添加边框

    是否可以在材料周围添加边框 如图所示 我可以通过以下代码设置材质颜色 object traverse function child if child instanceof THREE Mesh child material color se
  • 如何沿着简单的路径移动相机

    如何沿着简单的路径 由顶点 点数组创建 移动相机 我需要自动移动它 而不是像第一人称射击游戏那样通过键盘 鼠标事件来移动它 找了这个例子 http trijs org examples webgl geometry extrude spli
  • FontLoader 和 TextGeometry 未在 Threejs 中正确导入

    我正在尝试在 BoxGeometry 侧面的前 右 左和顶部添加 3D 文本 我实现了这个代码如下 loadFont gt const loader new THREE FontLoader loader load https threej
  • 在 React 中渲染 Three.js 元素?

    我正在尝试制作一个渲染 Three js 场景的 React 组件 但是 每当我尝试安装组件而不是看到正在渲染的任何类型的场景时 我只看到文本 object HTMLCanvasElement 正在显示 这是我的组件 import Reac
  • THREE.js 导入的模型不应用面部纹理

    我正在尝试导入使用 THREEJS 导出器从搅拌机导出的模型 到目前为止 模型已加载并出现在我的场景中 并且正确应用了材质 汽车应为黄色 玻璃应为透明 但它并没有将我的纹理应用到以 tga 形式保存的汽车上 如果我不将纹理包含在模型所在的服
  • 可点击的精灵标签?

    我一直在玩精灵文本标签 更具体地说是这个例子 http stemkoski github io Three js Sprite Text Labels html http stemkoski github io Three js Sprit
  • 如何计算给定坐标处相机可见矩形的大小? [复制]

    这个问题在这里已经有答案了 我制作了一个小型的 Three js 应用程序 它将一堆圆圈从画布的底部移动到顶部 let renderer scene light circles camera initialize animate funct
  • 使用 ThreeJS 获取球体纹理上的点击位置

    目前 我有一个带有纹理的球体 它绕 y 轴旋转 我还有在 3D 空间中单击的位置 以及球体上的旋转位置 我认为 目标 获取纹理上的位置 例如 我想获取我点击的图像的哪个方块 参见示例球体和下图 在实践中 我不会使用此图像 但我觉得这将是一个
  • Three.js 对象的“中心”是什么?

    当我使用 Blender 对对象进行建模时 我能够明确定义其发生平移和旋转的中心位置 当使用 Three js 对象时 我似乎没有找到等效的对象 Three js 对象是否具有定义其 中心 位置的属性 如果不是 物体的中心是如何确定的 在
  • 如何在 React Native 中渲染自定义 3D 对象

    我已经成功使用 Three js expo Three 和 expo gl 在 React Native 中配置了红色立方体的 3D 渲染 但我想让用户渲染他们自己可能拥有的自定义 3D 对象 obj 或 mtl 扩展名 但我不确定如何让他

随机推荐