个人主页： 左本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);
}加载显示成功！
