通过 threejs 加载 3dtiles模型数据，实现面板和包围盒采裁切功能

已于 2023-01-02 19:15:55 修改
阅读量951 收藏
点赞数
分类专栏： Threejs 文章标签： threejs 3dtiles 裁剪 clipping
于 2023-01-02 19:13:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seelingzheng/article/details/128523703
版权
Threejs 专栏收录该内容
23 篇文章 1 订阅 ¥129.90 ¥99.00
订阅专栏

通过 threejs 加载 3dtiles模型数据，实现面板和包围盒采裁切功能

260148606合作 qq:260148606

seelingzheng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
ThreeJS-加载3dtiles数据
一路走一路学，总会不落后
02-02 2735
使用方法参考 https://loaders.gl/examples/3d-tiles。目前加载3dtiles数据的方式有三种，均是借助第三方插件的方式。
3DTilesRendererJS:使用three.js的Java 3D Tiles渲染器
03-08
3D瓷砖渲染器 Three.js渲染器实现。 渲染器支持大多数3D Tiles规范功能，但有一些例外。 有关尚未实现哪些功能的信息，请参见期。 如果图块集或几何图形无法正确加载或渲染，请提出问题！ 添加和测试功能需要示例数据。 例子 ！ ！ ！ ！ ！ 使用 安装 npm install 3d-tiles-renderer --save 基本TilesRenderer 设置基本应用程序的3D拼贴集。 import { TilesRenderer } from '3d-tiles-renderer' ; // ... initialize three scene ... const tilesRenderer = new TilesRenderer ( './path/to/tileset.json' ) ; tilesRenderer . setCamera ( came
WEB 3D技术 three.js 多元素包围盒
weixin_45966674的博客
01-08 676
遍历 scene.children 我们只要里面的盒子元素 所以 判断 要有geometry字段才继续。然后computeBoundingBox计算出包围盒属性 然后通过boundingBox字段拿到包围盒属性。然后 通过 union 将每一次算出的结果 都合并到 我们最开始创建的 box 盒子中。觉得阐述为 我们要遍历 拿到每一个元素的包围盒 然后将他们合并为一个大的包围盒。先创建一个 盒子 叫box 后面的包围盒 用它来创建。本文 我们说多个物体的包围盒。
three.js 包围盒
最新发布
yinge0508的博客
03-09 337
想要显示包围盒的样子；需要借助 Box3Helper 辅助显示；
jQuery+CSS实现Ajax图片裁切功能
05-12
内容索引:脚本资源,jQuery,图片裁切,Ajax　　jQuery+CSS两者完美结合实现的图片裁切功能，适时显示裁切区域坐标，鼠标拖动选取裁切区域，并高亮显示被裁切的区域，双击即可完成裁切动作，所有需要的资源文件都已打包，学习jQuery不能错过的实例。
3D编辑器-Web在线编辑基于WebGL/Threejs技术
热门推荐
ALLENJIAO的专栏
11-20 2万+
在线场景编辑器 3D场景在线编辑器，可导出工程、场景、物体或几何体等。 内置多种几何体、光源，场景支持雾效、影子、反光等。 支持导入多种不同格式的3D模型（json、obj、stl、dae等)。 可视化修改场景、相机、几何体、材质、纹理等属性。 应用不同项目场景机房、大楼、园区、设备、器材等 更多细节和功能改进后续赘述，感兴趣的可以留言或发邮件1985692469...
Three.js实现剖切
m0_61929867的博客
09-21 731
基于three.js和Vue实现的3d模型的剖切
threeJS加载3Dtitles数据
qihuanlong的博客
07-26 2586
加载.gltf文件从网上查找资料，比较容易。但是项目使用的不是该类型的数据，是制作的 3Dtitles，折腾了几天，找到的资料比较少，比对着其他方法加载出了数据。
threejs加载3dtiles（倾斜摄影）数据
weixin_39481659的博客
11-11 1万+
1、安装3dTilesRenderer 插件 使用npm 安装 npm install 3d-tiles-renderer --save 或者去官网下载都行 GitHub - NASA-AMMOS/3DTilesRendererJS: Renderer for 3D Tiles in Javascript using three.js 2、使用 首先引入，在填入3dtiles数据的地址，可以是文件路径也可以是网站路径 const tilesRenderer = new TilesRend..
【ThreeJS基础教程-高级几何体篇】2.6.1 BufferGeometry应用1-物体居中与包围盒的应用
qq_42760477的博客
11-15 842
Threejs基础教程：BufferGeometry的应用
threejs如何显示box的包围盒boundingbox？
weixin_73320836的博客
02-25 842
threejs的boundingbox快速显示
three.js模型剖切功能的实现
03-22
多个面剖切（xOy平面、xOz平面、yOz平面），可以随意调节，可以实现将剖切口封装（住），支持鼠标拖拽调节剖切面。 资源来自开源github网站，故不设置积分。 国内浏览github极其慢，经常由于网络原因下载失败，故将此资源放置在CSDN，方便大家学习，发扬IT开源共享精神，共同促进IT进步。
使用 Node.js 实现图片的动态裁切及算法实例代码详解
10-17
主要介绍了使用 Node.js 实现图片的动态裁切功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
CSS3+HTML5实现图片按照固定比例尺寸裁切特效下载特效代码
03-20
利用vtk进行提数据球裁切功能
04-02
vtk 球体裁切 vtkImplicitFunctionToImageStencil
threejs入门
梨子社区
07-28 319
1.使用爱思助手
three.js学习笔记(十三)——真实渲染
hongsir的博客
12-18 8015
初始场景 只有一个测试白球和gui面板 设置 把球体材质改为标准网格材质MeshStandardMaterial，再添加平行光 const directionalLight = new THREE.DirectionalLight('#ffffff',1) directionalLight.position.set(0.25,3,-2.25) scene.add(directionalLight) gui.add(directionalLight, 'intensity').min(0).max(10)
Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换
仙魁XAN
05-02 1万+
Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换 目录 Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换 一、简单介绍 二、实现原理 三、正投影和透视投影简单解释 四、透视相机（PerspectiveCamera） 五、正交相机（OrthographicCamera） 六、threejs中透视投影相机转换正交投影相机基本原理与代码实现 七、案例实现 八、案例代码下载 一、简单介绍 T...
Three.js (四) 插件工具(dat.GUI、stats、ThreeBSP、OrbitControls)
Cool的博客
11-17 1490
dat.GUI dat.GUI 是一个轻量级的图形用户界面库，可以很容易地创建出能够改变代码变量的界面组件。 定义一个 JavaScript 对象（这里假设叫做 controls），该对象将保存希望通过 dat.GUI 改变的属性。 基础设置 创建一个GUI实例，并其添加待监听的对象、对象中具体的监听值、其他配置。当用户对 dat.GUI 控件进行操作时，对应的属性值也会同步修改。 var gui = new dat.GUI(); var controls = new function () { t
大佬 threejs 裁切模型怎么实现
04-05
在 Three.js 中，裁剪模型有多种方法可以实现。以下是其中一种基本方法： 1. 创建裁剪平面 首先，我们需要创建一个裁剪平面。可以使用 Three.js 中的 PlaneGeometry 和 MeshBasicMaterial 创建一个平面网格。然后，将其放置在场景中，并将其设置为“不可见”。 ``` var planeGeometry = new THREE.PlaneGeometry(10, 10); var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide, opacity: 0, transparent: true }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); scene.add(plane); ``` 2. 创建裁剪器 接下来，我们需要创建一个裁剪器对象。这可以通过使用 Three.js 中的 Three.PlaneBufferGeometry 和 Three.ClipPlane 函数来实现。ClipPlane 函数接受平面的法线和距离，并返回一个表示裁剪平面的对象。 ``` var clipPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0)); var plane = new THREE.PlaneBufferGeometry(100, 100); var clipper = new THREE.ClipPlane(clipPlane); ``` 3. 将裁剪器应用于模型 现在，我们可以将裁剪器应用于模型。这可以通过将裁剪器添加到模型的材质中来实现。为此，我们需要设置模型材质的剪切平面属性。 ``` var material = new THREE.MeshBasicMaterial({ color: 0xff0000, clipShadows: true, clipIntersection: true }); material.clippingPlanes = [clipper]; ``` 4. 渲染场景 最后，我们需要在渲染场景时启用裁剪。 ``` renderer.clippingPlanes = [clipper]; renderer.localClippingEnabled = true; renderer.render(scene, camera); ``` 现在，模型将在裁剪平面之上或之下被裁剪，只有可见部分将被渲染到屏幕上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

seelingzheng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值