Three.js模型几何体面积、体积计算使用帮助_模型教程视频

在工作中通过Three.js开发项目的时候,一些特定的情况下你可能需要计算一个三维模型的表面积或者体积,比如在3D打印的Web项目中,你需要计算一个三维模型的体积,然后通过体积计算打印一个三维模型所需要的3D打印材料费;比如开发的一个程序中,需要自动计算一个地面、墙面或某个零件的表面需要多少涂料,肯定需要先计算它的外表面面积是多少。思路——模型几何体表面积计

Three.js模型几何体面积、体积计算使用帮助

在工作中通过Three.js开发项目的时候,一些特定的情况下你可能需要计算一个三维模型的表面积或者体积,比如在3D打印的Web项目中,你需要计算一个三维模型的体积,然后通过体积计算打印一个三维模型所需要的3D打印材料费;比如开发的一个程序中,需要自动计算一个地面、墙面或某个零件的表面需要多少涂料,肯定需要先计算它的外表面面积是多少。

Three.js模型几何体面积、体积计算使用帮助_模型教程视频

思路——模型几何体表面积计算

如果是一个立方体、球体等规则几何体,计算它们的面积,可以直接代入公式,实际应用中,不一定就是规则几何体,下面的任务是探讨一个通用的算法,可以计算任意形状的几何体,任意自由形状的曲面表面积。

一个三维模型,可能包含多个网格模型Mesh,如果一个三维模型有多个网格模型,你可以分别计算每一个网格模型的表面积,然后求和即可。这里先考虑如何计算一个网格模型Mesh的表面积,每个网格模型的几何体本质上都是多个三角形组成,计算一个网格模型的外表面积,只需要计算该网格模型几何体所有三角形面积就可以,如果想计算所有三角形的面积,肯定要先计算一个三角形的面积。

一个三角形面积

已知三角形的三个顶点p1, p2, p3的坐标值,利用三个顶点的坐标计算三角形的面积,每个顶点的坐标通过一个三维向量对象Vector3表示,具体代码见下方。

下面的计算主要是向量的计算,如果你对Three.js向量相关内容不了解,可以查看官方文档Vector3接口的介绍,更多向量Vector3相关的内容可以参考Three.js进阶视频教程数学部分。

//三角形面积计算
function AreaOfTriangle(p1, p2, p3){
  var v1 = new THREE.Vector3();
  var v2 = new THREE.Vector3();
  // 通过两个顶点坐标计算其中两条边构成的向量
  v1 = p1.clone().sub(p2);
  v2 = p1.clone().sub(p3);

  var v3 = new THREE.Vector3();
  // 三角形面积计算
  v3.crossVectors(v1,v2);
  var s = v3.length()/2;
  return s
}

计算几何体表面积

上面代码封装了一个三角形面积计算函数AreaOfTriangle(),只要以三维向量Vector3形式输入三角形三个顶点坐标就可以返回一个三角形面积值。一般来说加载外部ply、stl、obj、fbx等格式三维模型,模型的几何体都是BufferGeometry,可以通过BufferGeometry的顶点索引.index属性和attributes.position属性获得三角形顶点的位置坐标。

这里不加载外部模型,先以Three.js自带的Geometry类型API为例创建一个几何体,然后计算它的表面,也就是计算一个球体或立方体的表面积来验证上面函数AreaOfTriangle()是否正确,你可以通过公式先计算一个立方体或球体的表面积,然后再和通过调用AreaOfTriangle()函数计算的结果相比较,来验证AreaOfTriangle()函数的算法是否可行。

// var geometry = new THREE.SphereGeometry(10, 50, 50);
var geometry = new THREE.BoxGeometry(10, 10, 10);
// 声明一个变量表示几何体的表面积
var area = 0.0;
// 遍历一个几何体的全部三角形geometry.faces,所有三角形面积累积就是几何体的表面积
// 对于不规则曲面,细分程度越高,面积计算精度越高
for (var i = 0; i < geometry.faces.length; i++) {
  //三角形的对应顶点索引
  var a = geometry.faces[i].a;
  var b = geometry.faces[i].b;
  var c = geometry.faces[i].c;
  // 获得三角形对三个顶点的坐标
  var p1 = geometry.vertices[a];
  var p2 = geometry.vertices[b];
  var p3 = geometry.vertices[c];
  // 调用三角形面积计算函数AreaOfTriangle
  area += AreaOfTriangle(p1, p2, p3); //三角形Face3面积累计计算
}
// 查看面积计算结果
document.write("面积:" + area)

计算几何体体积

几何体的每一个三角形可以和顶点坐标构成一个四面体,计算一个几何体的体积,可以计算所有所有三角形和坐标原点构成的四面体体积,然后求和。

四面体体积

三角形三个顶点和坐标系原点构成一个四面体,已知三角形的三个顶点坐标p1、 p2和p3,计算该四面体的体积。

计算的结果可能是正可能是负,几何体所有的四面体累积后可以计算出正确的结果。

// 四面体体积计算公式
function vFun(p1, p2, p3) {
  //借助threejs的Vector3的叉乘、点乘方法进行计算
  return p1.clone().cross(p2).dot(p3) / 6; //p1叉乘p2点乘p3除以6
}

几何体体积计算

下面一个立方体BoxGeometry为例验证vFun函数封装的算法是否正确,实际应用的时候,如果是BufferGeometry类型几何体,只需要改变顶点的坐标获取方式就可以,具体查看Three.js官方文档,或者学习Three.js视频教程的第二章。

var box = new THREE.BoxGeometry(10, 10, 10);
box.translate(200, 200, 1000); //平移之后并不影响结果
// 声明一个变量表示几何体的体积
var V = 0.0;
// 几何体三角形索引
for (var i = 0; i < box.faces.length; i++) {
  // 几何体三角形索引
  var index0 = box.faces[i].a;
  var index1 = box.faces[i].b;
  var index2 = box.faces[i].c;
  // 通过索引访问三角形顶点坐标值
  var p0 = box.vertices[index0];
  var p1 = box.vertices[index1];
  var p2 = box.vertices[index2];
  //使用下面的函数,并不会改变p0, p1, p2引用指向的geo顶点坐标值
  //三角形与坐标原点构成的四面体体积累计计算
  V += vFun(p0, p1, p2);
}
//查看体积计算结果
document.write("体积:" + V);
console.log("体积", V);

个人技术博客  

海计划公众号
(0)
上一篇 2020/03/30 07:13
下一篇 2020/03/30 07:13

您可能感兴趣的内容

  • 远程协作尝试,Github远程协作入门基础知识_github指南攻略

    远程协作是一个听起来很酷的词,就像谈恋爱一样,听起来总是觉得它和浪漫一词相关,但实际进行起来却由于各种原因感觉不是那么浪漫。那么,我们这次就来分享一下远程协作过程中的浪漫和苦闷,以及我们在两者之间的取舍。远程协作,我们也把它叫做“云办公”,好处是自然可以想象:节省办公室租金( HR 曾好几次跟我说公司办公室位置不够了,把我从这个地方赶到那个地方。)工作环境自

    2020/04/06
  • ES6之Promise入门基础_Promise小白攻略

    ES6之Promise入门基础 前言 Promise,用于解决回调地域带来的问题,将异步操作以同步的操作编程表达出来,避免了层层嵌套的回调函数。 什么是 Promise 所谓的 p…

    2020/03/20
  • 在Vue中实现随hash改变响应菜单高亮小白帮助_菜单基础教程

    在Vue中实现随hash改变响应菜单高亮小白帮助 情景 Vue+Element 实现管理页面菜单栏, 点击菜单时 router 改变 hash 访问不同子组件。但是改变 hash …

    2020/03/20
  • 什么是单点登录?入门基础知识_登录基础知识教程

    在日常工作中,用户需要访问大量的信息资源,例如,用户首先要登录到操作系统中,然后进入各个应用系统。进入每一个系统都需要对用户的身份进行识别与验证,这样,用户需要提供多个用户帐号与口令,为了便于记忆,用户很可能把各种帐号与口令信息记录在笔记本上,甚至写在便条上并贴在办公桌或屏幕边,这就使口令信息很容易泄露出去,增加了组织信息系统被入侵的安全风险。为了解决这个问

    2020/03/26
  • 在Vue项目中使用Typescript菜鸟知识_Typescript小白知识

    3.0迟迟没有发布release版本,现阶段在Vue项目中使用Typescript需要花不小的精力在工程的配置上面。主要的工作是webpack对TS,TSX的处理,以及2.x版本下面使用class的形式书写Vue 组件的一些限制和注意事项。Webpack 配置配置webpack对TS,TSX的支持,以便于我们在Vue项目中使用Typescript和tsx。m

    2020/03/23
  • 对象扩展运算符和 rest 运算符及 keyof 和查找类型小白指南_运算符教程视频

    TypeScript 2.1 增加了对 对象扩展运算和 rest 属性提案的支持,该提案在 ES2018 中标准化。可以以类型安全的方式使用 rest 和 spread 属性。对象 rest 属性假设已经定义了一个具有三个属性的简单字面量对象const marius = {name: “Marius Schulz”,website: “https://mar

    2020/03/22
  • CSS简介小白知识_简介菜鸟攻略

    什么是CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥

    2020/03/23
  • svg生成环形进度条使用攻略_svg教程视频

    之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制。具体效果如下图:代码非常简单:<circle r="70" cy="75" cx

    2020/03/26
  • jquery的on绑定点击事件执行两次的解决办法小白知识_事件小白入门

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下(其中.tabDel是页面加载之后新生成的元素,故不能用普通的$(‘.tabDel).click(funct

    2020/03/26
  • 前端之CSS编码规范菜鸟知识_规范菜鸟攻略

    前端之CSS编码规范菜鸟知识 前言 项目启动时 css 应该注意哪些问题 文件名规范 文件名建议用小写字母加中横线的方式。为什么呢?因为这样可读性比较强,看起来比较清爽,像链接也是…

    2020/03/19
  • 通过js代码来改变div的宽度小白攻略_宽高菜鸟知识

    当做网页图片的切换时,有的做法是将两个div并排在一起,但是只能显示一个div的宽度,当要切换图片时将一个div的宽度从一个宽度值改为0,就实现了简单的图片替换了。 首先,我们将要更改宽度的div摆上来
    测试#ddd{backg

    2020/03/29
  • 看看程序员工资怎么样?小白指南_程序员使用攻略

    程序员相比其他行业工资确实高了不少,这可能是圈里一直流行”要嫁就嫁程序员”的原因之一,在BAT这些大厂,普通的程序员轻松拿到2万+。不同职业程序员薪酬水平仅次于企业中高层管理者,近半程序员税前收入过万。程序员的工资就是很高高高高高啊!不同城市在一线城市,大部分程序员的工资已过万。上海程序员收入最高,16.9%月入2万及以上。其次是杭州、北京和深圳。不同岗位J

    2020/03/29
  • 工作中最常用的Git 命令收藏菜鸟教程_命令使用帮助

    分支操作git branch 创建分支git branch -b 创建并切换到新建的分支上git checkout 切换分支git branch 查看分支列表git branch -v 查看所有分支的最后一次操作git branch -vv 查看当前分支git brabch -b 分支名 origin/分支名 创建远程分支到本地git branch –me

    2020/03/23
  • 如何利用HTML5打造桌面应用,介绍基于Nodejs实现搭建跨平台桌面应用的框架入门基础_桌面基础指南

    通常我们会感觉网上有很多有趣的HTML应用,但这些应用非要你打开浏览器,输入网址。其实我们更喜欢直接点击桌面的一个图标就启动一个程序的这种体验。用html5+javascirpt+Css开发的本地桌面应用就是要提高给用户这种体验,这篇文章将介绍开发HTML5本地桌面应用的框架:ElectronElectron是这样一个框架,它可以帮助您使用JavaScrip

    2020/04/06
  • 如何使用24行JavaScript代码实现Redux?基础入门_Redux新手入门

    90%的规约,10%的库。Redux是迄今为止创建的最重要的JavaScript库之一,灵感来源于以前的艺术比如Flux和Elm,Redux通过引入一个包含三个简单要点的可伸缩体系结构,使得JavaScript函数式编程成为可能。如果你是初次接触Redux,可以考虑先阅读官方文档。1. Redux大多是规约考虑如下这个使用了Redux架构的简单的计数器应用。

    2020/03/23
  • JS 引擎底层的工作原理入门攻略_原理小白教程

    有没有想过浏览器如何读取和运行JS代码? 这看起来很神奇,我们可以通过浏览器提供的控制台来了解背后的一些原理。在Chrome中打开浏览器控制台,然后查看Sources这栏,在右侧可以到一个 Call Stack 盒子。JS 引擎是一个可以编译和解释我们的JS代码强大的组件。 最受欢迎的JS 引擎是V8,由 Google Chrome 和 Node.j s使用

    2020/03/24