Webgl展示Revit模型——剖切

最新推荐文章于 2024-07-07 11:29:46 发布
最新推荐文章于 2024-07-07 11:29:46 发布
阅读量2.5k 收藏 7
点赞数
分类专栏： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niuge8905/article/details/85072254
版权

three.js的剖切实例：

https://threejs.org/examples/?q=clip#webgl_clipping_intersection

https://threejs.org/examples/?q=clip#webgl_clipping_advanced

https://threejs.org/examples/?q=clip#webgl_clipping

从上面例子的代码可以看出，关键的解决方法是：

material.clipShadows = true;     //显示被剪切
material.clipIntersection = false;

以及设置material.clippingPlanes的值。

另外renderer.localClippingEnabled = true;控制剖切框的显示。

最后效果：

qq：254033230交流

 

niuge No.1
关注
专栏目录
基于WebGL/Threejs技术的模型剖切
ALLENJIAO的专栏
06-27 1万+
更多细节和功能改进后续赘述，感兴趣的可以留言或发邮件1985692469@qq.com，欢迎一起探讨！时间有限，很多细节没办法写的很详细，请大家包涵。
五、WebGL入门，shader剖析
a23366192007的博客
01-20 4417
WebGL用的shader语言是glsl(OpenGL Shading Language), shader的主要工作有： 1. 利用视图和投影矩阵对点的位置进行变化 2. 如果需要利用法线的时候，也同样需要利用视图矩阵对其进行转换 3. 纹理坐标的产生和转换 4. 顶点的光照或者象素光照的计算 5. 颜色计算        1-4在后面会详细的介绍，本节我们利
webGL可用的14种3D文件格式，但要具体问题具体分析。
最新发布
2401_82616673的博客
07-07 815
hello，我威斯数据，你在网上看到的各种炫酷的3d交互效果，背后都必须有三维文件支撑，就好比你网页的时候，得有设计稿源文件一样。3DS是一种由Autodesk开发的三维模型文件格式，主要用于3D建模软件之间的数据交换，可以包含多个场景、动画和材质信息。FBX是一种由Autodesk开发的三维模型文件格式，支持多种3D建模软件和游戏引擎，可以包含多个场景、动画和材质信息。STEP是一种用于表示产品数据的标准化文件格式，可以用于存储3D模型的几何信息和属性信息。
基于HTML5 Canvas的CSG构造实体几何书架
HT for Web 3D
11-08 488
CSG 构造实体几何这个概念在工业水利水电施工上、游戏上已经有很多人使用了，最简单的实体表示叫作体元，通常是形状简单的物体，如立方体、圆柱体、棱柱、棱锥、球体、圆锥等。根据每个软件包的不同这些体元也有所不同，在一些软件包中可以使用弯曲的物体进行 CSG 处理，在另外一些软件包中则不支持这些功能。构造物体就是将体元根据集合论的布尔逻辑组合在一起，这些运算包括：并集、交集以及补集。我们一般可以用 ...
Three.js入门篇之1 - WebGL on HTML
跟随技术的脚步-linolzhang的专栏
03-10 1507
一. 何为WebGL？       WebGL 是基于Web的 三维渲染接口，与OpenGL的不同之处在于，添加了对 JavaScript 的支持，能够为 HTML5 提供硬件加速的三维图形渲染（通过Canvas来和DOM打交道）。       WebGL 是基于 OpenGL ES 2.0 的 Javascript API。通过 HTML5 的 Canvas 来和 DOM 打交道。
快捷方式：适用于您的WebGL应用程序的最快和最小JavaScript多边形三角剖分库
02-02
耳塞 最快和最小JavaScript多边形三角剖分库。 压缩为2.5KB。 算法 该库实现了改进的耳朵切片算法，通过哈希优化，并扩展了处理Kong，扭曲多边形，退化性和自相交的方式，这种方式不能保证三角剖分的正确性，但会尝试始终为实际数据。 它基于思想 Martin Held的和David Eberly提出的“。 为什么要使用另一个三角剖分库？ 该项目的目的是创建一个足够快速的JS三角剖分库，以在浏览器中进行实时三角剖分，牺牲三角剖分质量以达到原始速度和简便性，同时又足够健壮以处理大多数实际数据集而不会崩溃或产生垃圾。 使用Node 0.12的一些基准测试： （操作数/秒） 点 耳塞 解放 聚2tri l 宝丽 OSM大厦 15 795,935 50,640 61,501 122,966 175,570 花花公子形状 94 35,658 10,339 8,784 11,172 13,557 Kong花花公子形状 104 28,319 8,883 7,494 2,130 不适用 复杂的OSM水 2523 543 77.54 失败 失败
three.js中模型的裁剪
11-20
用于裁剪three.js中模型的裁剪。最新版。与three.js模型连用时，用网上的裁剪代码不会出错
three.js模型剖切功能的实现
03-22
多个面剖切（xOy平面、xOz平面、yOz平面），可以随意调节，可以实现将剖切口封装（住），支持鼠标拖拽调节剖切面。 资源来自开源github网站，故不设置积分。 国内浏览github极其慢，经常由于网络原因下载失败，故将...
基于WebGL的Revit三维建筑模型重建_
11-26
### 基于WebGL的Revit三维建筑模型重建 #### 概述 随着信息技术的发展，WebGL技术逐渐成为在Web环境中渲染复杂三维图形的重要工具。WebGL是一种用于渲染交互式3D图形的标准API，无需任何插件即可在网页上运行。而...
效果超棒的Webgl模型-人体肺
04-11
这个名为“效果超棒的Webgl模型-人体肺”的资源，显然是一个利用WebGL技术创建的、展示人体肺部结构的三维模型。在网页中，用户可以通过鼠标或触摸操作来旋转、缩放和平移模型，从而从不同角度观察肺部的细节。 ...
效果超棒的Webgl模型-人体头部模型
04-11
这个"效果超棒的WebGL模型-人体头部模型"是利用WebGL技术创建的一个三维人体头部展示，它能够在网页上实现逼真的、动态的三维渲染。下面将详细介绍这个模型所涉及的关键知识点： 1. **WebGL基础**：WebGL是Web图形...
WebGL着色器——数组
01-20
在WebGL编程中，着色器是至关重要的组成部分，它们负责处理图形渲染的计算工作。在WebGL的上下文中，着色器分为两种主要类型：顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。这些着色器程序可以使用...
Three.js OBJ模型的剖切
weixin_45699870的博客
11-02 5442
由于项目需要，我进行了模型剖切功能方面的研究，如果只是为了实现模型剖切效果，我相信你会从这篇文章中得到收获。我对模型剖切功能的研究主要基于three.js中的webgl_clipping_stencil.html进行的，我研究模型剖切的过程比较曲折，剖切的难点主要在于剖切面的绘制，最初由于对three.js的了解不足，走了很多弯路，中间暂停该方面的研究，后来重新进行研究，取得一些收获。 模型剖切功能完全基于webgl_clipping_stencil.html实现，不涉及任何着色器的知识，现在就其代码进行分
threejs-剖切
NCQuan
04-21 2423
1.剖切整体，直接设置渲染器的全局剖切面，空间中与该平面点积为负的点将被切掉。 const globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 ); renderer.clippingPlanes = [globalPlane]; 2.剖切某个对象，设置该对象的材质的剖切面，并设置渲染器开启对象级剖切。 const localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1
ThreeJS中 3dtiles实现裁切功能
一路走一路学，总会不落后
02-02 1188
因为threejs 裁切只两种模式，一种是全局模式，就是设置renderer的clippingPlanes，然后场景中的所有模型都进行了裁切，另外一种是指定模型的裁切，同时需要开启。因为在使用的过程中，点云数据是使用的ShaderMaterial的方式来加载的，但是她的VS和TS文件默认是没有支持裁剪的，所有这里需要对两个文件做修改，具体如下。来完成，由于插件本身是不支持对模型裁切的，所以这里我们需要对源文件进行一改动，主要是修改shader这块。来写的，所有改动的过程中，还需要把一些定义约束加上。
threejs+vue房子模型，实现BSP模型剪切，导入obj+mtl文件
qq_40994735的博客
10-22 1818
threejs版本选择 "dependencies": { "@types/three": "^0.126.1", "three": "^0.126.1", }, 代码 <template> <div id="myThree" ref="myThreeRef" @dblclick="onMouseDblclick"> </div> </template> <script> import * as THREE f
threejs 第四十用 shader实现剖切
webgpu
10-22 1889
var geo=new THREE.BoxBufferGeometry(10,10,10,1,1,1) var material=shader(); setInterval(() => { material.uniforms.t.value+=0.1; }, ...
three.js基础案例day09——物体剪切clipping
qq_46056472的博客
12-13 1110
今日份案例是物体剪切。主要是创建一个plane(类似于刀)，将物体切掉一部分。具体效果如下（实际物体是圆环扭结，切了两刀后的效果）
threejs 场景中模型部分剖切
weixin_45815569的博客
07-29 1375
threejs 模型部分裁剪
基于WebGL的Revit三维建筑模型重建技术探讨
"基于WebGL的Revit三维建筑模型重建-JSON数据接口定义-BIM技术应用" 本文主要探讨了如何利用WebGL技术在浏览器端重建Revit三维建筑模型，以便用户可以在不同设备上便捷地查看三维模型。WebGL是一种基于OpenGL ES ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值