使用 THREE.Frustum 计算近/远平面顶点

2023-11-25

我需要一些帮助来处理 THREE.Frustum 对象。

我的问题:

我需要计算近/远平面顶点;我已经看过这些教程

  1. http://www.lighthouse3d.com/tutorials/view-frustum-culling/view-frustums-shape/
  2. http://www.lighthouse3d.com/tutorials/view-frustum-culling/geometric-approach-extracting-the-planes/

我已经草绘了这个函数,它准确地实现了(我希望如此)所解释的过程(只是为了获得左上/右上顶点,假设相机只能向左和向右看):

        // Near Plane dimensions
        hNear = 2 * Math.tan(camera.fov / 2) * camera.near; // height
        wNear = hNear * camera.aspect; // width

        // Far Plane dimensions
        hFar = 2 * Math.tan(camera.fov / 2) * camera.far; // height
        wFar = hFar * camera.aspect; // width

getVertices : function() {
        var p = camera.position.clone();
        var l = getCurrentTarget(); // see below
        var u = new THREE.Vector3(0, 1, 0);

        var d = new THREE.Vector3();
        d.sub(l, p);
        d.normalize();

        var r = new THREE.Vector3();
        r.cross(u, d);
        r.normalize();

        // Near Plane center
        var dTmp = d.clone();
        var nc = new THREE.Vector3();
        nc.add(p, dTmp.multiplyScalar(camera.near));

        // Near Plane top-right and top-left vertices
        var uTmp = u.clone();
        var rTmp = r.clone();
        var ntr = new THREE.Vector3();
        ntr.add(nc, uTmp.multiplyScalar(hNear / 2));
        ntr.subSelf(rTmp.multiplyScalar(wNear / 2));

        uTmp.copy(u);
        rTmp.copy(r);
        var ntl = new THREE.Vector3();
        ntl.add(nc, uTmp.multiplyScalar(hNear / 2));
        ntl.addSelf(rTmp.multiplyScalar(wNear / 2));

        // Far Plane center
        dTmp.copy(d);
        var fc = new THREE.Vector3();
        fc.add(p, dTmp.multiplyScalar(camera.far));

        // Far Plane top-right and top-left vertices
        uTmp.copy(u);
        rTmp.copy(r);
        var ftr = new THREE.Vector3();
        ftr.add(fc, uTmp.multiplyScalar(hFar / 2));
        ftr.subSelf(rTmp.multiplyScalar(wFar / 2));

        uTmp.copy(u);
        rTmp.copy(r);
        var ftl = new THREE.Vector3();
        ftl.add(fc, uTmp.multiplyScalar(hFar / 2));
        ftl.addSelf(rTmp.multiplyScalar(wFar / 2));

getCurrentTarget : function() {
        var l = new THREE.Vector3(0, 0, -100);
        this.camera.updateMatrixWorld();
        this.camera.matrixWorld.multiplyVector3(l);
        return l;
    }

这似乎有效,但是...

我的问题:

我可以使用 THREE.Frustum 对象以更优雅(也许更正确)的方式获得相同的结果吗?


Three.Frustum并不会真正帮助你——它只是一组飞机。好消息是您的解决方案看起来是正确的,但有一种更简单的方法来考虑这个问题。

近平面的右上角是相机空间中的一个点,其坐标如下:

var ntr = new THREE.Vector3( wNear / 2, hNear / 2, -camera.near );

使用你的定义wNear and hNear,这是正确的。

现在,确保camera.matrixWorld更新后,您可以将该点转换为世界坐标,如下所示:

camera.updateMatrixWorld();
ntr.applyMatrix4( camera.matrixWorld );

现在,翻转符号以获得其他三个角,然后对远平面重复计算。

看,你说得对;你只是走了一条更复杂的路线。 :-)

编辑:更新到 Three.js r.66

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

使用 THREE.Frustum 计算近/远平面顶点 的相关文章

  • 在 contenteditable div 中选择范围

    我有一个contenteditablediv 和其中的一些段落 这是我的代码 div style border solid 1px black width 300px height 300px div Hello world div div
  • 为什么我的淘汰单选按钮在另一个具有点击绑定的元素内时会失败?

    我有一个单选按钮列表 我想要点击 li 他们还检查单选按钮 这一切都有效 直到我放了一个name单选元素上的属性 然后我的代码停止工作 我的代码如下所示 ul li li ul li
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • 编写 C++ 版本的代数游戏 24

    我正在尝试编写一个像游戏 24 一样工作的 C 程序 对于那些不知道如何玩的人 基本上你会尝试通过 四个代数运算符找到 4 个数字总计为 24 的任何方法 和括号 举个例子 假设有人输入 2 3 1 5 2 3 5 1 24 由于括号位置的
  • ADB 安装失败并显示 INSTALL_FAILED_TEST_ONLY

    我在将 apk 安装到我的设备时遇到问题 adb install lt apk gt 使用上述命令将返回以下内容 5413 KB s 99747 bytes in 0 017s pkg data local tmp AppClient Te
  • SQL 的扩展占位符,例如id 在哪里 (??)

    赏金更新 已经从马克那里得到了很好的答案 将 改编为 如下 然而 除了 DBIx 之外 我仍在寻找类似的方案 我只是想兼容anything 我需要有关我为参数化 SQL 语句中的 扩展 占位符选择的语法的建议 因为构建一些构造 IN 子句
  • 带弹性盒的计算器键盘布局

    我正在用 Flexbox 构建一个计算器 我想要其中一个键的高度是两倍 另一个键的宽度是两倍 我用谷歌搜索了很多 但找不到这两个案例 对于两倍高度的键 我发现的唯一答案是flex direction as column 但在这种情况下 我将
  • iPython 笔记本避免在函数内打印

    我想阻止某个函数在 iPython 笔记本中打印 在标准 python 中 可以防止打印问题中回答的某些代码行 防止函数在 Python 的批处理控制台中打印然而 此方法在 iPython Notebook 中不起作用 在内核重新启动之前会
  • 您如何在协作、版本控制的环境中处理 Oracle 软件包? [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我在 Oracle 的多开发人员环境中工作 有一个大包 我们有DEV gt TST gt PRD的促销模式 目前 所有包编辑都是直接在 TOAD 中进行 然后编译到 DEV 包中 我们遇到
  • 使用 Bash 重定向到多个文件时重定向不明确

    echo gt home jem rep 0 1 3 logs SystemOut log bash home jem rep 0 1 3 logs SystemOut log ambiguous redirect 我可以一次重定向到多个文
  • 如何根据特殊条件进行分组

    目前 当我发出此 SQL 时 它会获取不同的用户名 我有一些不同的用户名 它们代表组 例如GRP BSN 我想将所有其他用户名 恰好是数字 分组到一个组中 例如GRP OTHERS select username count from ho
  • 连接到 SoftHSM java

    Code String pkcs11cfg pkcs11 cfg Provider p new SunPKCS11 pkcs11cfg Security addProvider p KeyStore ks KeyStore getInsta
  • 如何在 Angular cli 6.0.1 中创建 Angular 5 项目

    My 角度 cli 版本是 6 0 1 and node版本是8 11 1 如何创建或添加 Angular 5 的新项目 如果我使用ng 新的 项目名称 然后该项目正在下载角6 我也偶然发现了这个场景 这是我的解决方案 不幸的是 我们受到
  • 找出 Windows 的安装语言为

    我遇到一个问题 用户设置的区域设置 德语 与安装的语言 Windows 英语 不同 有没有办法发现安装的 Windows 语言与用户设置的区域设置 我应该注意的问题是我正在创建共享 并且根据区域设置设置权限 因此如果用户将区域设置设置为德语
  • LFSR 实现中的高效位调整

    虽然我有一个很好的 LSFR C 实现 但我想我会在 Haskell 中尝试同样的方法 只是看看它是如何进行的 到目前为止 我的想法比 C 实现慢两个数量级 这就引出了一个问题 如何提高性能 显然 位调整操作是瓶颈 分析器也证实了这一点 这
  • 如何在 Node Js 应用程序的多个实例之间同步对象

    Node JS 应用程序中是否有任何对象可以锁定 是否有多个应用程序实例可用 某些功能不应并发运行 如果实例 A 功能完成 它应该解锁该对象 密钥或某些标识符 并且应用程序的 B 实例应该检查其解锁是否应该运行某些功能 任何对象或密钥都可以
  • 通过 BinaryReader 将字节数组解压缩为字符串会产生空字符串

    我正在尝试解压缩字节数组并使用二进制读取器将其转换为字符串 当执行以下代码时 inStream 位置从 0 更改为数组的长度 但 str 始终是空字符串 BinaryReader br null string str String Empt
  • JavaScript 方括号函数调用

    当我浏览 jQuery 源代码时 我遇到了这一行 jQuery this state show hide 相比之下有什么优势吗 state jQuery this show jQuery this hide 独立示例 var object
  • Google App Engine 和 Google Compute Engine 有什么区别?

    我想知道 App Engine 与 Compute Engine 之间有什么区别 谁能向我解释其中的区别吗 应用引擎是一个平台即服务 这意味着您只需部署代码 平台就会为您完成其他所有事情 例如 如果您的应用程序非常成功 App Engine
  • 可变参数模板递归返回类型推导编译错误

    为什么下面的代码不能编译 template
  • 为什么 fclose 会挂起/死锁? (视窗)

    我有一个目录更改监视器进程 它从一组目录中的文件读取更新 我有另一个进程 可以对这些目录中的大量文件执行少量写入 测试程序 想象一下大约 100 个目录 每个目录有 10 个文件 每秒修改大约 500 个文件 运行一段时间后 目录监视器进程
  • “错误:‘myfn’声明为返回函数的函数”是什么意思?

    我正在尝试编写一个返回函数指针的函数 这是我的最小示例 void myfn int Doesn t work supposed to be a function called myfn that returns a pointer to a
  • 使用 THREE.Frustum 计算近/远平面顶点

    我需要一些帮助来处理 THREE Frustum 对象 我的问题 我需要计算近 远平面顶点 我已经看过这些教程 http www lighthouse3d com tutorials view frustum culling view fr