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

1、安装3dTilesRenderer 插件

使用npm 安装

npm install 3d-tiles-renderer --save

或者去官网下载都行

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