Threejs模型切片转3DTiles加载-Toy模板网

这篇具有很好参考价值的文章主要介绍了Threejs模型切片转3DTiles加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

1，模型切片，如下图

选择“通用模型切片”模块
添加 FBX 文件，设置按钮会弹出设置页面；也可以选择obj和ifc格式模型

threejs 加载3dtitles,three.js

存储类型：选择散列，如果没有注意到，Cesiumlab 有散列紧凑互转功能；
选择保存文件的路径；点击提交处理，进入处理页面

threejs 加载3dtitles,three.js

4.2.3 导出 3dtiles转换成功之后的文件如下；

threejs 加载3dtitles,three.js

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的原点在模型包围盒中心

threejs 加载3dtitles,three.js

实时渲染改成如下代码

function renderLoop() {
  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);
}

加载成功

threejs 加载3dtitles,three.js 文章来源地址https://www.toymoban.com/news/detail-672324.html