ThreeJS中 3dtiles实现裁切功能

已于 2023-02-04 00:40:31 修改
阅读量1.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Threejs 文章标签： 3d javascript threejs
于 2023-02-02 22:02:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/seelingzheng/article/details/128858164
Threejs 专栏收录该内容
27 篇文章 ¥129.90 ¥299.90
订阅专栏
本文介绍如何在ThreeJS中实现3DTiles模型的裁切功能。由于原生插件不支持裁切，我们需要修改源文件，特别是Shader部分，以适应裁剪需求。裁切方式包括全局模式和指定模型裁切，通过调整renderer的clippingPlanes和模型属性实现。

文章目录

ThreeJS中3dtiles实现裁切功能

裁切

本文介绍的裁切就是基于three-loader-3dtiles来完成，由于插件本身是不支持对模型裁切的，所以这里我们需要对源文件进行一改动，主要是修改shader这块。

因为源文件是基于TS来写的，所有改动的过程中，还需要把一些定义约束加上

插件下载
git clone https://github.com/nytimes/three-loader-3dtiles

我在自己修改的时候，这里切出了一个分支 local

主要变动是在如图所示区域内的文件

shaders.ts 修改

因为在使用的过程中，点云数据是使用的ShaderMaterial的方式来加载的，但是她的VS和TS文件默认是没有支持裁剪的，所有这里需要对两个文件做修改，具体如下


                

                
                
        

    


  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

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

				
			

			

				

					一路走一路学，总会不落后
				

				

					01-02
					
					1317
					
				

			

		

		

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

			
		

	



                

            
              



	

		

			

				
					
THREEJS 数据加载和裁切目录

				
			

			

				

					一路走一路学，总会不落后
				

				

					02-02
					
					221
					
				

			

		

		

			
				
THREEJS 数据加载和裁切目录

			
		

	



              


  
              

                


	

		

			

				
					
three.js中模型的裁剪

				
			

			

				

					11-20
				

			

		

		

			
				
用于裁剪three.js中模型的裁剪。最新版。与three.js模型连用时，用网上的裁剪代码不会出错

			
		

	





	

		

			

				
					
怎样将ES6 bare module引入到本地程序中，3DTilesRendererJS集成问题解决方案探索

				
			

			

				

					山中传奇工作室
				

				

					06-22
					
					6139
					
				

			

		

		

			
				
最近想要将NASA的3DTile的解析渲染代码集成到自己的程序中，在github中clone了

git+https://github.com/NASA-AMMOS/3DTilesRendererJS.git相关代码

在运行其示范代码时却出现以下问题：

“Uncaught SyntaxError: Cannot use import statement outside a module”

因为引用文件引入了class，这是ES6中module中定义的概念，需要在script中加入type=“mod..

			
		

	



		

			
		



	

		

			

				
					
WebGL\THREEJS实现楼宇楼层信息 消防 绿化 建模

				
			

			

				

					HarvestD
				

				

					06-12
					
					2301
					
				

			

		

		

			
				
WEBGL THREEJS  模型搭建   消防安全  3D楼宇 工厂

			
		

	





	

		

			

				
					
threeJS加载3Dtitles数据

				
			

			

				

					qihuanlong的博客
				

				

					07-26
					
					4016
					
				

			

		

		

			
				
加载.gltf文件从网上查找资料，比较容易。但是项目使用的不是该类型的数据，是制作的 3Dtitles，折腾了几天，找到的资料比较少，比对着其他方法加载出了数据。

			
		

	





	

		

			

				
					
3dtile平面剪切功能

				
			

			

				

					m0_46665152的博客
				

				

					04-01
					
					819
					
				

			

		

		

			
				
根据沙盒例子做的3d tiles的平面剪切
 			var tileset;
            var viewModel = {
                debugBoundingVolumesEnabled : false,
                edgeStylingEnabled : true,
                // exampleTypes : c...

			
		

	





	

		

			

				
					
Web端如何快速展现超大场景的三维模型3DTiles格式

				
			

			

				

					m0_70326213的博客
				

				

					03-24
					
					1691
					
				

			

		

		

			
				
三维工厂3DMaker是一款国内团队开发的三维模型浏览、分析、轻量化、顶层构建、几何校正、格式转换、调色裁切等功能专业处理软件。可以进行三维模型的网格简化、纹理压缩、层级优化等操作，从而实现三维模型轻量化。轻量化压缩比大，模型轻量化效率高，自动化处理能力高；采用多种算法对三维模型进行几何精纠正处理，精度高，处理速度快，超大模型支持；优秀数据处理和转换工具，支持将OSGB格式三维模转换为3DTile等格式，可快速进行转换。优点在于免费、功能强大、支持多种文件格式，适用于多种领域。

			
		

	





	

		

			

				
					
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..

			
		

	





	

		

			

				
					
3dtiles文件大略裁剪方法

				
			

			

				

					qq_43546520的博客
				

				

					06-02
					
					732
					
				

			

		

		

			
				
1.2 模型在cesiumlab加载后，打开控制台的 “网络” 可以看到请求的地址，把模型放大到指定想删除的部分，从地址中可以看到文件夹的名字，删除对应的文件夹就可以。顶层重建后的模型组织是某一块模型在其他文件夹里也可能有，模型文件的组织不是集中组织的，所以用上面的方法无法进行大致的裁剪。模型如果未采用顶层重建的话，可以使用下面的方法进行大略的裁剪。

			
		

	





	

		

			

				
					
3DTilesViewer:3.js的3DTile查看器

				
			

			

				

					04-28
				

			

		

		

			
				
3DTilesViewer
 与我联系： 
 3.js的3DTile查看器
演示：  : 
 当前，该库仅限于B3DM文件。
 向场景添加磁贴集很容易：
 import { Tileset } from './tileset';
...
var tileset = new Tileset("http://127.0.0.1:8080/tileset.json", scene, camera);
setInterval(function(){
  tileset.update();
}, 100);
与现有库相比，该库具有几个优点：
 无论结构如何，它都能正确遍历tileet树。
 它处理动态加载的嵌套tileet.json文件（tileet.json可能指向其他tileet.json文件作为其子对象）。
快取
B3DM的缓存尚未实现。 当前代码依赖简单的浏览器缓存。
选项
几何误差乘数
几

			
		

	





	

		

			

				
					
three.js模型剖切功能的实现

				
			

			

				

					03-22
				

			

		

		

			
				
多个面剖切（xOy平面、xOz平面、yOz平面），可以随意调节，可以实现将剖切口封装（住），支持鼠标拖拽调节剖切面。
资源来自开源github网站，故不设置积分。
国内浏览github极其慢，经常由于网络原因下载失败，故将此资源放置在优快云，方便大家学习，发扬IT开源共享精神，共同促进IT进步。

			
		

	





	

		

			

				
					
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

			
		

	





	

		

			

				
					
three.js使用3DTilesRendererJS加载3d tiles数据

				
			

			

				

					2301_79959413的博客
				

				

					09-05
					
					4293
					
				

			

		

		

			
				
如果是做大场景下的 GIS 应用，也许 Cesium.js 和 Three.js 做深度融合（绘制在同一个 canvas 上，深度值做统一），GIS 功能交给 Cesium.js，Three.js 做一些效果上的补充，可能会是更好的方案。它为 three.js 提供了加载和调度 3d tiles 数据的基本能力，虽说和 Cesium.js 对 3d tiles 的支持相比还有很大的差距，但也比没有的好。github上只提供了源码，没有提供打包好的库。下面的示例以调试插件为例，简要说明插件的注册和使用方式。

			
		

	





	

		

			

				
					
threejs 裁剪

				
			

			

				

					weixin_43974540的博客
				

				

					05-20
					
					1691
					
				

			

		

		

			
				
设置渲染器中的localClippingEnabled为true,即


renderer.localClippingEnabled = true;//设置为可剪裁

对于模型的material，如


let material = new THREE.MeshLambertMaterial(
				{
						color: colorToHex(meshData.Color[0]),
						flatShading: THREE.SmoothShading,
						clippingPlan

			
		

	





	

		

			

				
					
ThreeJS-加载3dtiles数据

				
			

			

				

					一路走一路学，总会不落后
				

				

					02-02
					
					3724
					
				

			

		

		

			
				
使用方法参考 https://loaders.gl/examples/3d-tiles。目前加载3dtiles数据的方式有三种，均是借助第三方插件的方式。

			
		

	





	

		

			

				
					
Threejs模型切片转3DTiles加载

				
			

			

				

					左本Web3D
				

				

					07-12
					
					4673
					
				

			

		

		

			
				
Threejs大模型加载，obj模型、fbx模型、ifc模型切片加载。Threejs加载3DTiles格式文件

			
		

	





	

		

			

				
					
threejs模型拆解、剖切、标尺

				
			

			

				

					qq_54513180的博客
				

				

					08-27
					
					1638
					
				

			

		

		

			
				
threejs实现模型的剖切、爆炸拆解、文字标尺

			
		

	





	

		

			

				
					
在THREEJS中加载3dtile模型

					
最新发布

				
			

			

				

					我码玄黄的博客
				

				

					12-18
					
					1073
					
				

			

		

		

			
				
3DTiles规范用于管理大规模三维数据，通过3d-tiles-renderer库在three.js中渲染，需安装依赖、创建场景、渲染循环，接入3DTiles并更新，实现动态渲染和交互。

			
		

	





	

		

			

				
					
大佬 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、付费专栏及课程。

              

            

          

      

      余额充值