threejs加载3dtiles（倾斜摄影）数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了threejs加载3dtiles（倾斜摄影）数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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文件，由官方的数据格式对比可以看出，自己数据的文件夹更深。

threejs 3dtiles,threejs,3d,javascript,three.js

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

threejs 3dtiles,threejs,3d,javascript,three.js

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

threejs 3dtiles,threejs,3d,javascript,three.js 文章来源地址https://www.toymoban.com/news/detail-602262.html

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)
}

到了这里，关于threejs加载3dtiles（倾斜摄影）数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！