A-Frame Loader for 3D Tiles 组件使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00900/article/details/147384159

A-Frame Loader for 3D Tiles 组件使用教程

aframe-loader-3dtiles-component A-Frame component using 3D-Tiles 项目地址: https://gitcode.com/gh_mirrors/af/aframe-loader-3dtiles-component

1. 项目介绍

A-Frame Loader for 3D Tiles 是一个开源组件，用于在 A-Frame 虚拟现实环境中加载和显示 OGC 3D Tiles。该组件基于 nytimes/three-loader-3dtiles 开发，使用了 loaders.gl 库，是 vis.gl 平台的一部分，由 Urban Computing Foundation 开源治理。这个组件使得 3D Tiles 更易于被创作者使用，并将沉浸式新闻带入网络上的混合现实。

2. 项目快速启动

浏览器环境

以下示例展示了如何从 CDN 加载库以及处理 KTX2/basis_universal glTFs 所需的缺失组件：

<!DOCTYPE html>
<html>
<head>
  <title>我的 A-Frame 场景</title>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.137.0/examples/js/utils/WorkerPool.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.137.0/examples/js/loaders/KTX2Loader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/aframe-loader-3dtiles-component/dist/aframe-loader-3dtiles-component.min.js"></script>
</head>
<body>
  <a-scene environment="preset: default">
    <a-camera id="camera"></a-camera>
    <!-- 这里添加你的 3D Tiles 实体 -->
  </a-scene>
</body>
</html>

npm 环境

通过 npm 安装组件：

npm install aframe-loader-3dtiles-component

然后在你的 JavaScript 代码中引入并使用：

require('aframe');
require('aframe-loader-3dtiles-component');

3. 应用案例和最佳实践

以下是一个使用 RealityCapture 影像测量模型的基本场景示例：

<a-scene environment="preset: default">
  <a-camera id="camera"></a-camera>
  <a-entity id="freeman-tiles"
            position="0 2.6 0"
            rotation="-90 180 0"
            scale="2 2 2"
            loader-3dtiles="url: https://int.nyt.com/data/3dscenes/ONA360/TILESET/0731_FREEMAN_ALLEY_10M_A_36x8K__10K-PN_50P_DB/tileset_tileset.json;
                         maximumSSE: 48;
                         cameraEl: #camera;"></a-entity>
</a-scene>

在此例中，loader-3dtiles 组件被用来加载和显示 3D Tiles 模型。url 属性指定了 tileset 的路径，maximumSSE 定义了屏幕空间误差的最大值，cameraEl 指定了用于确定显示哪些瓦片的相机。