Threejs加载倾斜摄影OSGB数据

个人主页： 左本Web3D，更多案例预览请点击==》 在线案例
个人简介：专注Web3D使用ThreeJS实现3D效果技巧和学习案例
💕 💕积跬步以至千里，致敬每个爱学习的你。获取模型或源码请点赞收藏加留言，有问题请私信或加微信

1，无人机倾斜摄影后的数据结构osgb，如下图

2，倾斜摄影模型转为3DTiles格式

下载模型转换工具  官方下载地址

选择倾斜模型切片，选择osgb数据文件夹中的根目录osgb文件

  

存储类型：选择“散列”，选择输出路径

提交处理后，处理成功生成数据文件 

3，Threejs加载3Dtiles文件

 安装插件，插件地址 3DTilesRendererJS

npm install 3d-tiles-renderer --save

 代码引入数据文件

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

renderLoop();

function renderLoop() {

	requestAnimationFrame( renderLoop );

	// The camera matrix is expected to be up to date
	// before calling tilesRenderer.update
	camera.updateMatrixWorld();
	tilesRenderer.update();
	renderer.render( scene, camera );

}

模型不显示？是因为输出3Dtiles的原点在模型包围盒中心

  

改成如下代码！

function renderLoop() {
  console.log(needsRerender)
  if (needsRerender) {
    needsRerender = false;

    if (tilesRenderer.getBounds(box)) {
      box.getCenter(tilesRenderer.group.position);
      tilesRenderer.group.position.multiplyScalar(-1);
    }

    offsetParent.updateMatrixWorld(true);
    camera.updateMatrixWorld();
    tilesRenderer.update();
  }
  renderer.render(scene, camera);
}

加载显示成功！