Three.js如何计算3DObject的2D包围框?

在这里插入图片描述

推荐:用 NSDT编辑器 快速搭建可编程3D场景

在Three.js应用开发中,有时你可能需要为3D场景中的网格绘制2D的包围框,应该怎么做?

朴素的想法是把网格的3D包围框投影到屏幕空间,例如,下图中的绿色框 3D包围框, 当将其投影为 2D 时,得到的红色2D包围框,显然比想要的蓝色框大很多:
在这里插入图片描述

正确的做法是先将3D网格投影到屏幕空间,再计算2D包围框。

1、计算单个网格的2D包围框

只需将所有顶点转换为屏幕空间并从中创建一个 2d 边界框:

function computescreenspaceboundingbox(mesh, camera) {var vertices = mesh.geometry.vertices;var vertex = new three.vector3();var min = new three.vector3(1, 1, 1);var max = new three.vector3(-1, -1, -1);for (var i = 0; i < vertices.length; i++) {var vertexworldcoord = vertex.copy(vertices[i]).applymatrix4(mesh.matrixworld);var vertexscreenspace = vertexworldcoord.project(camera);min.min(vertexscreenspace);max.max(vertexscreenspace);}return new three.box2(min, max);
}

生成的 box2 位于标准化屏幕坐标 [-1, 1] 中, 可以通过乘以渲染器高度和宽度的一半来获得像素:

function normalizedtopixels(coord, renderwidthpixels, renderheightpixels) {var halfscreen = new three.vector2(renderwidthpixels/2, renderheightpixels/2)return coord.clone().multiply(halfscreen);
}

2、计算3DObject的2D包围框

更完善的实现需要考虑组、子节点等各种3DObject,其中可能包含多个网格,这需要一个递归实现,代码如下:

function computescreenspaceboundingbox(obj, camera) {var min;var max;// is this an array of objects?if(array.isarray(obj)) {for(var i = 0; i < obj.length; ++i) {let box2 = computescreenspaceboundingbox(obj[i], camera);if(min === undefined) {min = box2.min.clone();max = box2.max.clone();} else {min.min(box2.min);max.max(box2.max);}}}// does this object have geometry?if(obj.geometry !== undefined) {var vertices = obj.geometry.vertices;if(vertices === undefined&& obj.geometry.attributes !== undefined&& 'position' in obj.geometry.attributes) {// buffered geometryvar vertex = new three.vector3();       var pos = obj.geometry.attributes.position;for(var i = 0; i < pos.count * pos.itemsize; i += pos.itemsize){vertex.set(pos.array[i], pos.array[i + 1], pos.array[1 + 2]);var vertexworldcoord = vertex.applymatrix4(obj.matrixworld);var vertexscreenspace = vertexworldcoord.project(camera);if(min === undefined) {min = vertexscreenspace.clone();max = vertexscreenspace.clone();}min.min(vertexscreenspace);max.max(vertexscreenspace);}} else {// regular geometryvar vertex = new three.vector3();       for(var i = 0; i < vertices.length; ++i) {var vertexworldcoord = vertex.copy(vertices[i]).applymatrix4(obj.matrixworld);var vertexscreenspace = vertexworldcoord.project(camera);if(min === undefined) {min = vertexscreenspace.clone();max = vertexscreenspace.clone();}min.min(vertexscreenspace);max.max(vertexscreenspace);}}}// does this object have children?if(obj.children !== undefined) {for(var i = 0; i < obj.children.length; ++i) {let box2 = computescreenspaceboundingbox(obj.children[i], camera);if(min === undefined) {min = box2.min.clone();max = box2.max.clone();} else {min.min(box2.min);max.max(box2.max);}}}return new three.box2(min, max);
}

原文链接:计算3D对象的2D包围框 — BimAnt

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/105783.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

npm install报--4048错误和ERR_SOCKET_TIMEOUT问题解决方法之一

一、问题描述 学习vue数字大屏加载动漫效果时&#xff0c;在项目终端页面输入全局下载指令 npm install -g json-server 问题1、报--4048错误 会报如下错误 operation not permitted......errno: -4048code:EPERMsyscall: mkdir......The operation was reiected by your op…

【分布式计算】九、容错性 Fault Tolerance

分布式系统应当有一定的容错性&#xff0c;发生故障时仍能运行 一些概念&#xff1a; 可用性Availability&#xff1a;系统是否准备好立即使用 可靠性Reliability&#xff1a;系统连续运行不发生故障 安全性&#xff1a;衡量安全故障的指标&#xff0c;没有严重事件发生 可维护…

RBF神经网络案例——客户流失率预测

目录 背景介绍 1、径向基神经网络结构 2、符号说明 3、计算网络输出 4、计算能量函数 网络学习步骤 步骤1、先将能量函数E写成各参数的复合函数结构 步骤2、求E关于各参数的偏导 步骤3、求各参数的调整量 步骤4、计算各参数的调整量 5、按照步骤1-步骤4编写RBF神经网络…

【广州华锐互动】智轨列车AR互动教学系统

智轨列车&#xff0c;也被称为路面电车或拖电车&#xff0c;是一种公共交通工具&#xff0c;它在城市的街头巷尾提供了一种有效、环保的出行方式。智轨列车的概念已经存在了很长时间&#xff0c;但是随着科技的发展&#xff0c;我们现在可以更好地理解和欣赏它。通过使用增强现…

【设计模式】七、适配器模式

文章目录 现实生活中的适配器例子基本介绍工作原理举例&#xff1a;类适配器模式类适配器模式介绍类适配器模式应用实例 举例&#xff1a;对象适配器模式基本思路对象适配器模式应用实例 举例&#xff1a;接口适配器模式接口适配器模式应用实例适配器模式在 SpringMVC 框架应用…

并查集路径压缩

我们来看看如果要是100个数&#xff0c;往20个数的集合合并如何 那么我们应该&#xff0c;把数据量小的集合往数据量大的合并 解决另一种极端场景的路径压缩

ChatGPT快速入门

ChatGPT快速入门 一、什么是ChatGPT二、ChatGPT底层逻辑2.1 实现原理2.2 IO流程 三、ChatGPT应用场景3.1 知心好友3.2 文案助理3.3 创意助理3.4 角色扮演 一、什么是ChatGPT ChatGPT指的是基于GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型的对话生成系…

设计模式03———包装器模式 c#

首先我们打开一个项目 在这个初始界面我们需要做一些准备工作 创建基础通用包 创建一个Plane 重置后 缩放100倍 加一个颜色 &#xff08;个人喜好&#xff09;调节渐变色 可更改同种颜色的色调 &#xff08;个人喜好&#xff09; 调节天空盒 准备工作做完后 接下我们做【…

java中okhttp和httpclient那个效率高

在比较OkHttp和HttpClient的效率时&#xff0c;需要考虑多个因素&#xff0c;包括性能、吞吐量、资源消耗等。这些因素往往取决于具体的使用场景和需求。 OkHttp是一个由Square开发的现代化HTTP客户端库&#xff0c;它在Android平台上广泛使用&#xff0c;并且也可以在Java应用…

接口测试如何测?最全的接口测试总结,资深测试老鸟整理...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、接口测试的流程…

点云目标检测——pointpillars环境配置与训练

点云目标检测——pointpillars环境配置与训练 (二十五)实践出真知——OpenPCDet 制作pointpillars自定义数据集 - 知乎 基于深度学习的高铁周界入侵监测方法研究 - 中国知网 基于点云数据的三维目标检测技术研究进展 - 中国知网 面向恶劣天气的自动驾驶三维目标检测算法研究…

Windows:Arduino IDE 开发环境配置【保姆级】

参考官网&#xff1a;Arduino - Home Arduino是一款简单易学且功能丰富的开源平台&#xff0c;包含硬件部分&#xff08;各种型号的Arduino开发板&#xff09;和软件部分&#xff08;Arduino IDE)以及广大爱好者和专业人员共同搭建和维护的互联网社区和资源。 Arduino IDE软件…

算法村开篇

大家好我是苏麟从今天开始我将带来算法的一些习题和心得体会等等...... 算法村介绍 我们一步步地学习算法本专栏会以闯关的方式来学习算法 循序渐进地系统的学习算法并掌握大部分面试知识 , 期待和大家一起进步 . 索大祝大家学有所成 , 前程似锦.

车载电子电器架构 —— 国产基础软件生态简介

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

D - Square Permutation-AtCoder Beginner Contest 324

D - Square Permutation 给出长度为n的字符串s 通过排列组合问有多少种产生平方数的方式。 全排列时间复杂度O(13!)过大&#xff0c;不合适。 可以生成所有平方数放入数组&#xff0c;之后用这些数和输入的字符串位数字符数比较。 注意可以有前导0&#xff0c;所以长度不一致要…

vue3 新特性(defineOptions defineModel)

Vue3.3 新特性-defineOptions 背景说明&#xff1a; 有 <script setup> 之前&#xff0c;如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。 但是用了 <script setup> 后&#xff0c;就没法这么干了 setup 属性已经没有了&#xff0c;自然无法…

专栏汇总(一)

专栏1&#xff1a;https://blog.csdn.net/lovemy134611/category_12417811.html 部分文章&#xff1a;PyTorch深度学习实战&#xff08;20&#xff09;——从零开始实现Fast R-CNN目标检测-CSDN博客

一文深入理解高并发服务器性能优化

我们现在已经搞定了 C10K并发连接问题 &#xff0c;升级一下&#xff0c;如何支持千万级的并发连接&#xff1f;你可能说&#xff0c;这不可能。你说错了&#xff0c;现在的系统可以支持千万级的并发连接&#xff0c;只不过所使用的那些激进的技术&#xff0c;并不为人所熟悉。…

Hadoop3教程(三):HDFS文件系统常用命令一览

文章目录 语法格式&#xff08;44&#xff09; HDFS的文件系统命令&#xff08;开发重点&#xff09;参考文献 语法格式 hdfs命令的完整形式&#xff1a; hdfs [options] subcommand [subcommand options]其中subcommand有三种形式&#xff1a; admin commandsclient comman…

【记录】使用Python读取Tiff图像的几种方法

文章目录 PIL.Imagecv2gdal 本文总结了使用 PIL Image, cv2, gdal.Open三种python package 读取多通道Tiff格式遥感影像的方法。 PIL.Image PIL对Tiff只支持两种格式的图像&#xff1a; 多通道8bit图像单通道int16, int32, float32图像 多通道多bit的tiff图像PIL不支持读取…