@mapcatch/three-loader-3dtiles
v1.1.18-d
Published
A 3D Tiles loader for Three.js
Downloads
16
Readme
three-loader-3dtiles
options增加配置
access_token
,用于请求需要授权的url
Demos — Usage — Roadmap — Contributing — Docs — Alternatives
This is a Three.js loader module for handling OGC 3D Tiles, created by Cesium. It currently supports the two main formats:
- Batched 3D Model (b3dm) - based on glTF.
- Point cloud.
Internally, the loader uses the loaders.gl library, which is part of the vis.gl platform, openly governed by the Urban Computing Foundation. Cesium has worked closely with loaders.gl to create a platform-independent implementation of their 3D Tiles viewer.
Development of this library started at The New York Times R&D as an effort to create a clean bridge between the 3D Tiles specification and the widely used 3D library Three.js. The library helps us deliver massive 3D and Geographical journalism to desktops and mobile readers alike. From Reporting to Teleporting!
Demos
- Photogrammetry exported to 3D Tiles in RealityCapture
- LiDAR Point Cloud hosted as 3D Tiles in Cesium ION
- Map overlay with OpenStreetMap
Basic Usage
Here is a simple example using the Loader3DTiles
module to view a tileset.json
containing a 3d tile hierarchy.
import {
Scene,
PerspectiveCamera,
WebGLRenderer,
Clock
} from 'three'
import { Loader3DTiles } from 'three-loader-3dtiles';
const scene = new Scene()
const camera = new PerspectiveCamera()
const renderer = new WebGLRenderer()
const clock = new Clock()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
let tilesRuntime = null;
async function loadTileset() {
const result = await Loader3DTiles.load(
url: 'https://<TILESET URL>/tileset.json',
renderer: renderer,
options: {
dracoDecoderPath: 'https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/draco',
basisTranscoderPath: 'https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/basis',
}
)
const {model, runtime} = result
tilesRuntime = runtime
scene.add(model)
}
function render() {
const dt = clock.getDelta()
if (tilesRuntime) {
tilesRuntime.update(dt, renderer, camera)
}
renderer.render(scene, camera)
window.requestAnimationFrame(render)
}
loadTileset()
render()
Installation
The library supports three.js r137 and uses its GLTF, Draco, and KTX2/Basis loaders.
Refer to the browserslist
field in package.json for target browsers.
1. ES Module
Download dist/three-loader-3dtiles.esm.min.js and use an importmap
to import the dependencies. See here for a full example. The demos also use this method of installation:
index.html
<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/[email protected]",
"three/examples/jsm/loaders/GLTFLoader.js": "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader",
"three/examples/jsm/loaders/DRACOLoader.js": "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/DRACOLoader",
"three/examples/jsm/loaders/KTX2Loader.js": "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/KTX2Loader",
"three-loader-3dtiles" : "./three-loader-3dtiles.esm.min.js"
}
}
</script>
<script src='index.js' type='module'>
index.js
import { Scene, PerspectiveCamera } from 'three';
import { Loader3DTiles } from 'three-loader-3dtiles';
3. NPM
If you use a build system such as Webpack / Parcel / Rollup etc, you should also install the library along with three.js from npm:
npm install -s three three-loader-3dtiles
The application script would be the same as in the ES Module example (when using importmap
).
See here for a complete webpack example.
4. A-Frame
Refer to our dedicated A-Frame component: aframe-loader-3dtiles-component.
5. React-Three-Fiber
Refer to examples/r3f.
Roadmap
Supporting 3D Tiles Next
The 3D Tiles Next specification is in the works, with some of the features already supported in loaders.gl. Supporting the new extensions opens up possibilities for new applications.
Skip-traversal
Implementing the Skip traversal mechanism could greatly improve performance of b3dm (mesh) tiles, but requires a shader/Stencil buffer-based implementation which manually manges Z-culling. This is a very wanted feature and contributions would be greatly appreciated.
Contributing
Refer to CONTRIBUTING.MD for general contribution instructions.
Developing
The library is built using rollup. To run a simple development server type:
npm run dev
It is also possible to develop the library while developing loaders.gl. Just clone the source of loaders.gl and run:
LOADERS_GL_SRC=<path to loaders.gl> npm run dev
Building
To build the library run:
npm run build
To build the production minified version run:
npm run build:production
And to build the API documentation run:
npm run docs
Tests
A rudimentary test spec is available at ./test. To run it type:
npm run test
Docs
- API documentation is available here.
- Code for the demos is in
examples/demos
.
Alternatives
To our knowledge, this is the only loaders.gl-based Three.js library, but there are several implementations of 3D Tiles for Three.js. Notable examples:
This repository is maintained by the Research & Development team at The New York Times and is provided as-is for your own use. For more information about R&D at the Times visit rd.nytimes.com