LCCRender::load
加載 LCC 數據,返回 LCCObject 對象。
WebSDK 支持 Three.js 和 CesiumJS 引擎,通過傳入不同的引擎參數來加載 LCC 模型。
版本要求
SDK v0.2.0+
引擎支持
Three.js / CesiumJS
API
LCCRender::load(param: LoadOptions, successFunc: SuccessFunc, progressFunc: ProgressFunc, failureFunc: FailureFunc, preProcessFunc?: PreProcessFunc): LCCObject
參數
param(Three.js)
| 參數 | 類型 | 必選 | 默認值 | 描述 |
|---|---|---|---|---|
param.camera | THREE.PerspectiveCamera / THREE.OrthographicCamera | 是 | - | Three.js 相機對象。 |
param.scene | THREE.Scene | 是 | - | Three.js 場景對象。 |
param.renderLib | THREE | 是 | - | Three.js 庫引用,例如 import * as THREE from 'three'。 |
param.renderLibWebgpu | typeof import('three/webgpu') | 否 | - | Three.js WebGPU 模塊引用,例如 import * as THREE_WEBGPU from 'three/webgpu'。 |
param.renderLibTSL | typeof import('three/tsl') | 否 | - | Three.js TSL 模塊引用,例如 import * as TSL from 'three/tsl'。 |
param.renderer | THREE.WebGLRenderer | 是 | - | Three.js 渲染器。 |
param.dataPath | String / Object | 是 | - | LCC 數據路徑。支持字符串路徑(.lcc / .lcc2 / 帶 token 的 meta.lcc)或路徑描述集合對象。 |
param.canvas | HTMLCanvasElement | 是 | - | 渲染的 canvas 畫布,可通過 renderer.domElement 獲得。 |
param.appKey | String | 否 | - | 用於去除水印的 AppKey。 |
param.useEnv | Boolean | 否 | - | 是否顯示環境數據。 |
param.useIndexDB | Boolean | 否 | true | 是否開啟本地數據緩存。SDK v0.5.0+ |
param.useLoadingEffect | Boolean | 否 | false | 是否開啟加載特效。SDK v0.5.1+ |
param.loadingEffectCenter | { x: number, y: number, z: number } | 否 | - | 加載特效的中心位置。SDK v0.5.1+ |
param.pointsColor | String | 否 | 'default' | 點雲顯示效果:'default'(原色)或 'rainbow'(高程色)。 |
param.modelMatrix | THREE.Matrix4 | 否 | - | 模型矩陣。SDK v0.5.2+ |
param.maxHostCacheSize | number | 否 | - | Host 緩存大小。SDK v0.5.4+ |
param.maxGpuCacheSize | number | 否 | - | GPU 緩存大小。SDK v0.5.4+ |
param.usePrecisionRaycast | Boolean | 否 | true(PC) | 啟用高精度射線檢測。PC 端默認啟用,移動端不支持該參數。SDK v0.6.3+ |
param(CesiumJS)
| 參數 | 類型 | 必選 | 默認值 | 描述 |
|---|---|---|---|---|
param.camera | Cesium.Camera | 是 | - | Cesium 相機對象。 |
param.scene | Cesium.Scene | 是 | - | Cesium 場景對象。 |
param.renderLib | Cesium | 是 | - | CesiumJS 庫引用,例如 import * as Cesium from 'cesium'。 |
param.dataPath | String / Object | 是 | - | LCC 數據路徑。支持字符串路徑(.lcc / .lcc2 / 帶 token 的 meta.lcc)或路徑描述集合對象。 |
param.canvas | HTMLCanvasElement | 是 | - | 渲染的 canvas 畫布,可通過 viewer.scene.canvas 獲得。 |
param.modelMatrix | Cesium.Matrix4 | 否 | - | 模型變換矩陣。RTK 真實坐標數據時無需設置。 |
param.appKey | String | 否 | - | 用於去除水印的 AppKey。 |
param.useEnv | Boolean | 否 | - | 是否顯示環境數據。 |
param.useIndexDB | Boolean | 否 | true | 是否開啟本地數據緩存。SDK v0.5.0+ |
param.useLoadingEffect | Boolean | 否 | false | 是否開啟加載特效。SDK v0.5.1+ |
param.loadingEffectCenter | { x: number, y: number, z: number } | 否 | - | 加載特效的中心位置。SDK v0.5.1+ |
param.pointsColor | String | 否 | 'default' | 點雲顯示效果:'default'(原色)或 'rainbow'(高程色)。 |
param.maxHostCacheSize | number | 否 | - | Host 緩存大小。SDK v0.5.4+ |
param.maxGpuCacheSize | number | 否 | - | GPU 緩存大小。SDK v0.5.4+ |
param.usePrecisionRaycast | Boolean | 否 | true(PC) | 啟用高精度射線檢測。PC 端默認啟用,移動端不支持該參數。SDK v0.6.3+ |
回調函數
| 參數 | 類型 | 必選 | 描述 |
|---|---|---|---|
successFunc | (model: any) => void | 是 | 模型加載完成回調,參數為構建完成的 Mesh。 |
progressFunc | (progress: number) => void | 是 | 模型加載進度回調,參數為加載百分比(0~1)。 |
failureFunc | () => void | 是 | 模型加載失敗回調。 |
preProcessFunc | (buffer: ArrayBuffer, filename: string) => Promise<{ data: ArrayBuffer; rawData: ArrayBuffer }> | 否 | 數據預處理回調,用於在渲染前對數據進行預處理。 SDK v0.5.0+ |
dataPath 格式
dataPath 支持兩種方式:
方式一:字符串路徑(推薦)
直接傳入字符串,指定 LCC 數據路徑:
- 指定完整的
.lcc文件路徑,例如http://example.com/data/xxxx.lcc。SDK v0.4.1+(推薦) - 指定完整的
.lcc2文件路徑,例如http://example.com/data/xxxx.lcc2。SDK v0.6.0+(推薦) - 指定帶有 token 等信息的
meta.lcc文件路徑,適用於請求加密數據的場景,例如https://example.com/data/meta.lcc?token=xxx&other=xxx - 指定目錄,要求該目錄下存在
meta.lcc文件,例如https://example.com/data(已廢棄)
const lccObject = LCCRender.load({
// ...other params
dataPath: 'http://example.com/data/xxxx.lcc',
}, successFunc, progressFunc, failureFunc);
方式二:路徑描述集合(SDK v0.5.0+)
採用對象形式自定義所有文件的路徑,支持加密路徑,適用於 LCC 格式。
文件路徑描述格式:
{
"fileName": {
"url": "xxxxxxxxxxxx",
"header": { "field1": "xxx", "field2": "yyy" } // Optional, added to HTTP request headers
}
}
示例:
const dataPath = {
meta: { url: 'http://example.com/xxx/meta.lcc' },
index: { url: 'http://example.com/xxx/index.bin' },
data: { url: 'http://example.com/xxx/data.bin' },
environment: { url: 'http://example.com/xxx/environment.bin' },
collision: { url: 'http://example.com/xxx/collision.lci' },
shcoef: { url: 'http://example.com/xxx/shcoef.bin' },
};
const lccObject = LCCRender.load({
// ...other params
dataPath: dataPath,
}, successFunc, progressFunc, failureFunc);
返回值
LCCObject — LCC 模型對象,包含射線檢測、裁切、渲染控制等接口。
注意事項
- Three.js 引擎需要在渲染循環中調用
LCCRender.update()進行更新。 param.useSH參數已廢棄,請使用LCCObject.useShcoef()接口。param.gpuAcceleration參數已廢棄。- dataPath 支持
.lcc格式(SDK v0.4.1+)和.lcc2格式(SDK v0.6.0+)。
相關 API
LCCRender::unload()LCCRender::update()LCCRender::dispose()