threejs加载3dtiles（倾斜摄影）数据

最新推荐文章于 2025-04-08 09:27:50 发布

（Always）

最新推荐文章于 2025-04-08 09:27:50 发布

阅读量1.5w

点赞数 13

分类专栏： threejs 文章标签： 3d javascript three.js

本文链接：https://blog.csdn.net/weixin_39481659/article/details/121270254

版权

threejs 专栏收录该内容

2 篇文章

订阅专栏

本文档介绍了如何安装和使用3dTilesRenderer插件来加载3D瓷砖数据。通过npm安装插件后，可以指定3DTiles数据的本地或网络路径进行加载。在动画函数中调用`update()`方法以更新渲染。当遇到官方3DTiles数据格式与自定义数据不匹配的问题时，可以通过解析tileset.json并逐个加载子块来解决。此外，还提供了一个示例代码片段，展示如何处理和加载自定义数据路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 TilesRenderer( './path/to/tileset.json' );

const tilesRenderer = new TilesRenderer( 'http://192.168.1.136:8080/path/to/tileset.json' );

注意在动画函数中添加更新 tilesRenderer.update();

import { TilesRenderer } from '3d-tiles-renderer';

// ... initialize three scene ...

const tilesRenderer = new TilesRenderer( './path/to/tileset.json' );
tilesRenderer.setCamera( camera );
tilesRenderer.setResolutionFromRenderer( camera, renderer );
scene.add( tilesRenderer.group );

animate();

function animate() {
	tilesRenderer.update();
	renderer.render( camera, scene );
    requestAnimationFrame( animate);
}

3、问题总结

官方的3dtiles数据格式可能与我们自己使用osg2cesiumApp和cesiumlab切片工具切出来的数据格式不同，使用我们自己的数据可能加载不出来，那是因为3dTilesRenderer 插件默认只处理和.b3dm数据同级目录下的.json文件，由官方的数据格式对比可以看出，自己数据的文件夹更深。

如果将文件夹目录换成更深一级或几级，也是可以正常加载的，但只能加载这一小片。

所以要处理加载方式，我们查看自己数据的tileset.json发现这里存储着每块的路径，我们就可以取出这些路径一块一块的加载，这样就可以加载全部的3dtiles数据了。

const tilesRendererArr = []

// 加载json，解析json 取出children中的路径进行拼装加载
  const qzpath = 'http://192.168.1.136:8077/sqsftilte/'

  get(qzpath + 'tileset.json').then((res)=>{
    // console.log(res)
    const tilesetArr = res.root.children
    for (const tilese of tilesetArr) {
      // console.log(qzpath + tilese.content.uri)
      tilesRenderer = new TilesRenderer( qzpath + tilese.content.uri )
      tilesRenderer.setCamera( camera )
      tilesRenderer.setResolutionFromRenderer( camera, renderer )
      const tilesObj = tilesRenderer.group
      tilesObj.rotation.set(-Math.PI / 2, 0, 0)
      scene.add( tilesObj )
      tilesRendererArr.push(tilesRenderer)
    }
  })

// 动画
function animate() {
  controls.update()
  for (const tilesRenderer of tilesRendererArr) {
    tilesRenderer.update()
  }
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}