Three.js 剖切模型功能封装
1.获取到需要剖切模型的包围盒,并计算每个包围盒的顶点位置,代码如下:
var Box = new THREE.Box3().setFromObject(mesh);
console.log(Box);
var point_max =new THREE.Vector3();
var point_max_right =new THREE.Vector3();
var point_max_behind =new THREE.Vector3();
var point_max_under =new THREE.Vector3();
var point_min =new THREE.Vector3();
var point_min_front =new THREE.Vector3();
var point_min_top =new THREE.Vector3();
var point_min_left =new THREE.Vector3();
point_max.set(Box.max.x,Box.max.y,Box.max.z);
point_max_right.set(Box.min.x,Box.max.y,Box.max.z);
point_max_under.set(Box.max.x,Box.max.y,Box.min.z);
point_max_behind.set(Box.max.x,Box.min.y,Box.max.z);
point_min.set(Box.min.x,Box.min.y,Box.min.z);
point_min_front.set(Box.min.x,Box.max.y,Box.min.z);
point_min_top.set(Box.min.x,Box.min.y,Box.max.z);
point_min_left.set(Box.max.x,Box.min.y,Box.min.z);
2.剖切面可视化,这里以前切面为例,别的切面以此类推,这里的clipping_box_mesh为全局变量。(部分读者不太清楚clipping_box_mesh变量存储的信息,这里解释一下clipping_box_mesh就是一个存储可视化剖切面mesh的全局索引数组方便我后续去拿到其中一个mesh去做一些改动,我这里用数组做收集当然读者也可以用Map;而Get_normal函数返回的是我后续将得到的三角面的法线,传入值是三个顶点:v1,v2,v3, 按照右手定理,得到的面法线 )代码如下:
//前切面可视化
var planeFront=new THREE.Geometry();
planeFront.name='front';
planeFront.vertices.push(point_max,point_max_right,point_min_front,point_max_under);
var planeFront_normal=Get_normal(point_max,point_min_front,,point_max_under);
var planeFront_face1=new THREE.Face3(0,1,2, planeFront_normal);
var planeFront_face2=new THREE.Face3(2,3,0, planeFront_normal);
planeFront.faces.push(planeFront_face1,planeFront_face2);
var planeFront_material=new THREE.MeshBasicMaterial({
color:0x00BFFF,
side:THREE.DoubleSide,
opacity: 0.2,
transparent: true
});
var planeFront_mesh= new THREE.Mesh(planeFront,planeFront_material);
clipping_box_mesh.push(planeFront_mesh);
scene.add(planeFront_mesh);
3.对应可视化切面的真实切面,以前切面为例,记得打开剖切的局部效果:
//对应前剖面
clipping_localPlane[0] = new THREE.Plane( new THREE.Vector3( 0, -1, 0 ),point_max.y );renderer.localClippingEnabled = true; //剖切局部效果
4.绑定需要切面的mesh,以及对各个可视化切面的自身的剖切。代码如下:
mesh.traverse(function (child) {
if (child.isMesh)
{
child.material.clippingPlanes=clipping_localPlane;
child.material.side=THREE.DoubleSide;
}
});
for(var i=0;i<clipping_box_mesh.length;i++){
var array_clipping=new Array();
for(var j=0;j<clipping_box_mesh.length;j++) {
if (i != j) {
array_clipping.push(clipping_localPlane[j])
}
}
clipping_box_mesh[i].material.clippingPlanes=array_clipping;
}
6.效果展示
Three.js 剖切模型功能封装相关推荐
- 基于 React hooks + Typescript + Cesium 实现模型剖切分析
文章目录 效果截图 功能介绍 实现思路 实现步骤 根据数据获取裁剪面 modelMatrix 创建 clippingPlanes 添加鼠标事件 封装 Clipping3D 类 使用 Clipping3 ...
- threejs 场景中模型部分剖切
scene.getObjectByName('A2_4_Building_Opacity').traverse(function (obj) {if (obj.type == 'Mesh') {obj ...
- Unity插件使用(2)_剖切插件CrossSection(HDRP)
目录 一.插件使用 二.修改增加动态切换的功能 三.包围盒移动问题 四.合并项目中后剖切的效果错误问题 五.剖切面贴图 插件默认是Build-in,需要打开HDRP包,2.7版本才开始支持HDRP,有 ...
- springboot ajax下载文件功能封装
通过js ajax下载文件功能封装 function exportExcel(formId, url) {try {var queryForm = $("#" + formId); ...
- Three.js OBJ模型的剖切
一. 由于项目需要,我进行了模型剖切功能方面的研究,如果单纯实现模型剖切效果,我相信你会从这篇文章中得到收获. 二. 我对模型剖切功能的研究主要基于three.js中的webgl_clipping_s ...
- Unity Shader Graph实现模型任意方向剖切(学习笔记/五毛钱特效)
使用Shader Graph:Unlit Master 使用Position获取物体Object的空间坐标信息. 使用Split拆分物体的空间坐标信息,比如拆分为x.y.z. 使用Split拆分后的x ...
- Three.js实现剖切
three.js-cutting 基于Three.js实现的剖切 欢迎交流与指正,需要源码以及这个小Demo教程的可以评论区留言或者私信我
- 基于cesium的地形开挖地形剖切
基于cesium地形开挖结合示例以及官方代码修改后封装TerrainClipPlan.js文件,在代码引入即可使用,详细介绍请往下看 一.地形剖切效果图 : 图一 图二 二.核心 ...
- JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录 一.事件与事件流 二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式 三.事件对象 四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...
最新文章
- 最基础的绑定服务步骤
- JavaScript编码命名规范及格式规范
- ocr python opencv_如何使用(opencv/python)来实现OCR处
- sketch怎么移动图层_什么是Photoshop Express,Fix,Mix和Sketch移动应用程序?
- VS2005 VS2008新建网站和新建项目里选Web应用程序区别
- 部品se分析_汽车储物箱部品模具,二色产品模具专业厂
- 编写有效用例电子版_JavaScript ES6代理的实际用例
- maven安装和eclipse集成
- Cognos report studio 清单表优化实录
- r语言和python哪个难学_明明R语言比python容易学的多,为什么还有那么多人说R语言学起来陡峭?...
- openstack安装文档
- (自我介绍范文)java面试自我介绍
- 32位系统和64位区别
- java Thread的start和run方法的区别
- 举例说明专用计算机和通用计算机的区别,计算机原理答案
- 记一次Maven发布Jar包中文乱码解决方法
- 车内看车头正不正技巧_最常见的3种车位倒库技巧,以后停车都不是事,建议收藏!...
- win11蓝牙无法连接怎么办?win11蓝牙无法连接的解决方法
- 水花: java特点及配置环境
- 微信小程序外卖cps和cpa系统