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 geometry
            var 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 geometry
            var 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

相关推荐
F-2H1 小时前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
gqkmiss1 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247553 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255024 小时前
前端常用算法集合
前端·算法
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2345 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1235 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~6 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语6 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js