# three-loader-3dtiles
![license](https://img.shields.io/badge/License-Apache%202.0-yellow.svg) [![npm version](https://badge.fury.io/js/three-loader-3dtiles.svg)](https://badge.fury.io/js/three-loader-3dtiles)
[![Build Status](https://cloud.drone.io/api/badges/nytimes/three-loader-3dtiles/status.svg)](https://cloud.drone.io/nytimes/three-loader-3dtiles)
[Demos](#demos) —
[Usage](#basic-usage) —
[Roadmap](#roadmap) —
[Contributing](#contributing) —
[Docs](#docs) —
[Alternatives](#alternatives)
This is a [Three.js](https://threejs.org/) loader module for handling [OGC 3D Tiles](https://www.ogc.org/standards/3DTiles), created by [Cesium](https://github.com/CesiumGS/3d-tiles). It currently supports the two main formats:
1. Batched 3D Model (b3dm) - based on glTF.
2. Point cloud.
Internally, the loader uses the [loaders.gl library](https://github.com/visgl/loaders.gl), which is part of the [vis.gl platform](https://vis.gl/), openly governed by the [Urban Computing Foundation](https://uc.foundation/). Cesium has [worked closely with loaders.gl](https://cesium.com/blog/2019/11/06/cesium-uber/) 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 **Re**porting to **Tele**porting!
---
## Demos
* [Photogrammetry exported to 3D Tiles in RealityCapture](https://nytimes.github.io/three-loader-3dtiles/examples/demos/realitycapture)
* [LiDAR Point Cloud hosted as 3D Tiles in Cesium ION](https://nytimes.github.io/three-loader-3dtiles/examples/demos/cesium)
* [Map overlay with OpenStreetMap](https://nytimes.github.io/three-loader-3dtiles/examples/demos/map-overlay)
---
## Basic Usage
Here is a simple example using the `Loader3DTiles` module to view a `tileset.json` containing a 3d tile hierarchy.
```javascript
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/three@0.137.0/examples/js/libs/draco',
basisTranscoderPath: 'https://cdn.jsdelivr.net/npm/three@0.137.0/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](https://threejs.org/) r137 and uses its GLTF, Draco, and KTX2/Basis loaders.
Refer to the `browserslist` field in [package.json](./package.json) for target browsers.
### 1. ES Module
Download [dist/three-loader-3dtiles.esm.min.js](dist/three-loader-3dtiles.esm.min.js) and use an `importmap` to import the dependencies. See [here](examples/installation/es-module) for a full example. The [demos](examples/demos) also use this method of installation:
#### **`index.html`**
```html
<script async src="https://ga.jspm.io/npm:es-module-shims@1.4.4/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/three@0.137.0",
"three/examples/jsm/loaders/GLTFLoader.js": "https://cdn.skypack.dev/three@v0.137.0/examples/jsm/loaders/GLTFLoader",
"three/examples/jsm/loaders/DRACOLoader.js": "https://cdn.skypack.dev/three@v0.137.0/examples/jsm/loaders/DRACOLoader",
"three/examples/jsm/loaders/KTX2Loader.js": "https://cdn.skypack.dev/three@v0.137.0/examples/jsm/loaders/KTX2Loader",
"three-loader-3dtiles" : "./three-loader-3dtiles.esm.min.js"
}
}
</script>
<script src='index.js' type='module'>
```
#### **`index.js`**
```javascript
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](examples/installation/webpack) for a complete webpack example.
### 4. A-Frame
Refer to our dedicated A-Frame component: [aframe-loader-3dtiles-component](https://github.com/nytimes/aframe-loader-3dtiles-component).
### 5. React-Three-Fiber
Refer to [examples/r3f](examples/r3f).
---
## Roadmap
### Supporting 3D Tiles Next
The [3D Tiles Next specification](https://cesium.com/blog/2021/11/10/introducing-3d-tiles-next/) 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](https://cesium.com/blog/2017/05/05/skipping-levels-of-detail/) 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](./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](./test). To run it type:
```
npm run test
```
## Docs
* API documentation is available [here](docs/three-loader-3dtiles.md).
* Code for the demos is in [`examples/demos`](examples/demos).
## Alternatives
To our knowledge, this is the only [loaders.gl](https://github.com/visgl/loaders.gl)-based Three.js library, but there are several implementations of 3D Tiles for Three.js. Notable examples:
- [NASSA-AMMOS / 3DTilesRendererJS](https://github.com/NASA-AMMOS/3DTilesRendererJS)
- [ebeaufay / 3DTilesViewer](https://github.com/ebeaufay/3DTilesViewer)
- [iTowns](https://github.com/iTowns/itowns)
---
> 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](https://rd.nytimes.com)
没有合适的资源?快使用搜索试试~ 我知道了~
这是一个用于处理OGC3DTiles的Three.js加载器模块,由Cesium创建。它目前支持两种主要格式,Batch.zip
共119个文件
md:71个
json:12个
ts:8个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 14 浏览量
2023-04-30
23:35:34
上传
评论
收藏 1.39MB ZIP 举报
温馨提示
这是一个用于处理OGC3DTiles的Three.js加载器模块,由Cesium创建。它目前支持两种主要格式,Batch.zip
资源推荐
资源详情
资源评论
收起资源包目录
这是一个用于处理OGC3DTiles的Three.js加载器模块,由Cesium创建。它目前支持两种主要格式,Batch.zip (119个子文件)
.eslintrc.cjs 303B
CODEOWNERS 263B
.eslintignore 5B
.gitignore 64B
index.html 8KB
index.html 7KB
index.html 6KB
index.html 1KB
index.html 920B
index.html 663B
index.html 262B
favicon.ico 2KB
three-loader-3dtiles.esm.js 486KB
three-loader-3dtiles.min.js 232KB
three-loader-3dtiles.esm.min.js 231KB
rollup.config.js 3KB
webpack.config.js 805B
webpack.config.js 761B
index.js 201B
package-lock.json 757KB
package-lock.json 367KB
package-lock.json 323KB
redrocks-tileset.json 41KB
package.json 3KB
api-extractor.json 796B
package.json 780B
package.json 564B
tsconfig.json 518B
tsconfig.json 435B
tsconfig.json 423B
tsdoc-metadata.json 340B
LICENSE 611B
three-loader-3dtiles.esm.js.map 1.26MB
three-loader-3dtiles.min.js.map 1021KB
three-loader-3dtiles.esm.min.js.map 1020KB
README.md 7KB
three-loader-3dtiles.loaderoptions.md 6KB
CODE_OF_CONDUCT.md 5KB
three-loader-3dtiles.runtime.md 4KB
three-loader-3dtiles.api.md 3KB
CONTRIBUTING.md 2KB
CHANGELOG.md 2KB
three-loader-3dtiles.loaderprops.md 1KB
three-loader-3dtiles.md 1KB
three-loader-3dtiles.loader3dtiles.load.md 955B
three-loader-3dtiles.runtime.getlatlongheightfromposition.md 731B
three-loader-3dtiles.runtime.setelevationrange.md 719B
three-loader-3dtiles.runtime.getpositionfromlatlongheight.md 717B
three-loader-3dtiles.runtime.setpointcloudcoloring.md 700B
three-loader-3dtiles.loaderprops.onprogress.md 683B
three-loader-3dtiles.runtime.setintensitycontrast.md 676B
three-loader-3dtiles.runtime.gettileset.md 672B
three-loader-3dtiles.loaderoptions.maximumscreenspaceerror.md 670B
three-loader-3dtiles.pointcloudcoloring.md 657B
three-loader-3dtiles.runtime.sethideground.md 653B
three-loader-3dtiles.runtime.setviewdistancescale.md 652B
three-loader-3dtiles.runtime.setmaxintensity.md 652B
three-loader-3dtiles.loaderoptions.geotransform.md 649B
three-loader-3dtiles.geocoord.md 648B
three-loader-3dtiles.loaderoptions.pointcloudcoloring.md 623B
three-loader-3dtiles.runtime.getstats.md 622B
SECURITY.md 620B
three-loader-3dtiles.runtime.setshading.md 619B
three-loader-3dtiles.runtime.getcamerafrustum.md 618B
three-loader-3dtiles.runtime.update.md 616B
three-loader-3dtiles.loader3dtiles.md 612B
three-loader-3dtiles.runtime.setpointalpha.md 593B
three-loader-3dtiles.loaderoptions.maximummemoryusage.md 587B
three-loader-3dtiles.loaderoptions.basistranscoderpath.md 573B
three-loader-3dtiles.loaderoptions.throttlerequests.md 566B
three-loader-3dtiles.runtime.setwireframe.md 558B
three-loader-3dtiles.shading.md 557B
three-loader-3dtiles.loaderoptions.debug.md 555B
three-loader-3dtiles.loaderoptions.dracodecoderpath.md 551B
three-loader-3dtiles.loaderoptions.shadercallback.md 550B
three-loader-3dtiles.runtime.showtiles.md 550B
three-loader-3dtiles.loaderoptions.preloadtilescount.md 549B
three-loader-3dtiles.loaderoptions.updatetransforms.md 548B
three-loader-3dtiles.runtime.setdebug.md 538B
three-loader-3dtiles.loaderoptions.viewdistancescale.md 525B
three-loader-3dtiles.loaderoptions.shading.md 520B
three-loader-3dtiles.loaderoptions.updateinterval.md 511B
three-loader-3dtiles.loaderoptions.maxconcurrency.md 511B
three-loader-3dtiles.geotransform.md 509B
three-loader-3dtiles.loaderoptions.skiplevelofdetail.md 508B
README.md 507B
three-loader-3dtiles.loaderprops.url.md 504B
three-loader-3dtiles.loaderoptions.computenormals.md 503B
three-loader-3dtiles.loaderoptions.material.md 498B
three-loader-3dtiles.loaderprops.options.md 494B
three-loader-3dtiles.loaderoptions.maxrequests.md 489B
three-loader-3dtiles.loaderoptions.wireframe.md 481B
three-loader-3dtiles.loaderoptions.cesiumiontoken.md 480B
three-loader-3dtiles.runtime.gettileboxes.md 478B
three-loader-3dtiles.loaderprops.renderer.md 475B
three-loader-3dtiles.loaderoptions.worker.md 473B
three-loader-3dtiles.loaderoptions.transparent.md 466B
three-loader-3dtiles.loaderprops.loadingmanager.md 446B
three-loader-3dtiles.loaderoptions.pointsize.md 445B
three-loader-3dtiles.runtime.dispose.md 439B
共 119 条
- 1
- 2
资源评论
快撑死的鱼
- 粉丝: 1w+
- 资源: 9154
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功