@realsee/five-webgpu 1.0.0-alpha.1 → 1.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -9
- package/ai_guides/README.md +2 -2
- package/ai_guides/features/clipper.md +1 -1
- package/ai_guides/features/coordinate-system.md +1 -1
- package/ai_guides/features/event.md +1 -1
- package/ai_guides/features/five.md +3 -3
- package/ai_guides/features/gesture.md +2 -2
- package/ai_guides/features/get-screen-pixels.md +1 -1
- package/ai_guides/features/image-options.md +3 -3
- package/ai_guides/features/load-external-model.md +9 -9
- package/ai_guides/features/mode.md +2 -2
- package/ai_guides/features/pano-filter.md +3 -3
- package/ai_guides/features/pano-tile.md +2 -2
- package/ai_guides/features/raycast.md +1 -1
- package/ai_guides/features/screen-project.md +1 -1
- package/ai_guides/features/state.md +1 -1
- package/ai_guides/features/work.md +2 -2
- package/ai_guides/quick-start.md +3 -3
- package/ai_guides/release_notes/6.6.md +2 -2
- package/ai_guides/release_notes/6.7.md +1 -1
- package/ai_guides/release_notes/6.8.md +1 -1
- package/docs/assets/hierarchy.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/classes/index.AdaptiveLuminancePass.html +1 -1
- package/docs/classes/index.EyeDomeLightingPass.html +1 -1
- package/docs/classes/index.FivePass.html +1 -1
- package/docs/classes/index.FlowingFireworks3DPass.html +1 -1
- package/docs/classes/index.FlowingLight2DPass.html +1 -1
- package/docs/classes/index.FlowingLight3DPass.html +1 -1
- package/docs/classes/index.GaussianBlurPass.html +1 -1
- package/docs/classes/index.Model.html +1 -1
- package/docs/classes/index.ModelScene.html +1 -1
- package/docs/classes/index.PBMGaussianSplattingNodeMaterial.html +7 -6
- package/docs/classes/index.PBMGaussianSplattingObject.html +12 -4
- package/docs/classes/index.PBMGaussianSplattingRenderMesh.html +31 -12
- package/docs/classes/index.PBMMeshBasicMaterial.html +1 -1
- package/docs/classes/index.PBMMeshBasicNodeMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPanoOnlyMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPanoOnlyNodeMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPhongMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPhongNodeMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPhysicalMaterial.html +1 -1
- package/docs/classes/index.PBMMeshPhysicalNodeMaterial.html +1 -1
- package/docs/classes/index.PBMPanoFilter.html +1 -1
- package/docs/classes/index.PBMPointCloud.html +1 -1
- package/docs/classes/index.PBMUpdateable.html +1 -1
- package/docs/classes/index.Parameter.html +1 -1
- package/docs/classes/index.Tile3D.html +1 -1
- package/docs/classes/index.TileNode.html +1 -1
- package/docs/classes/index.TrajectoryNode.html +1 -1
- package/docs/classes/index.WorkResolvedObserver.html +1 -1
- package/docs/documents/README.html +2 -2
- package/docs/documents/features_clipper.html +1 -1
- package/docs/documents/features_coordinate-system.html +1 -1
- package/docs/documents/features_event.html +1 -1
- package/docs/documents/features_five.html +3 -3
- package/docs/documents/features_gesture.html +2 -2
- package/docs/documents/features_get-screen-pixels.html +1 -1
- package/docs/documents/features_image-options.html +3 -3
- package/docs/documents/features_load-external-model.html +8 -8
- package/docs/documents/features_mode.html +2 -2
- package/docs/documents/features_pano-filter.html +3 -3
- package/docs/documents/features_pano-tile.html +2 -2
- package/docs/documents/features_raycast.html +1 -1
- package/docs/documents/features_screen-project.html +1 -1
- package/docs/documents/features_state.html +1 -1
- package/docs/documents/features_work.html +2 -2
- package/docs/documents/quick-start.html +2 -2
- package/docs/documents/release_notes_6.6.html +2 -2
- package/docs/documents/release_notes_6.7.html +1 -1
- package/docs/documents/release_notes_6.8.html +1 -1
- package/docs/hierarchy.html +1 -1
- package/docs/index.html +2 -2
- package/docs/interfaces/index.IPBMMaterial.html +1 -1
- package/docs/interfaces/index.LooseWorkWithExtrinsics.html +1 -1
- package/docs/interfaces/index.PBMHDRConfig.html +1 -1
- package/docs/interfaces/index.ParameterMaterialValue.html +1 -1
- package/docs/interfaces/index.ParameterTilesetValue.html +1 -1
- package/docs/interfaces/index.ParameterValue.html +1 -1
- package/docs/interfaces/index.ResolvedParameterValue.html +1 -1
- package/docs/interfaces/index.SplatData.html +10 -5
- package/docs/interfaces/index.ViewLayer.html +1 -1
- package/docs/interfaces/index.WorkCubeImage.html +1 -1
- package/docs/interfaces/index.WorkImage.html +1 -1
- package/docs/interfaces/index.WorkObserver.html +1 -1
- package/docs/interfaces/index.WorkTile.html +1 -1
- package/docs/types/index.ParseOptions.html +1 -1
- package/five/gaussian-splatting/layerRegistry.d.ts +17 -0
- package/five/gaussian-splatting/shStore.d.ts +22 -0
- package/five/gaussian-splatting/splatAssembler.d.ts +69 -0
- package/five/gaussian-splatting/transformStore.d.ts +37 -0
- package/five/gaussian-splatting/wasm/sort.d.ts +4 -3
- package/five/index.js +86 -103
- package/five/index.mjs +3923 -3856
- package/five/model/loaders/spz.d.ts +50 -2
- package/five/model/materials/pbmGaussianSplattingNodeMaterial.d.ts +8 -5
- package/five/model/objects/pbmGaussianSplattingObject.d.ts +21 -4
- package/five/model/objects/pbmGaussianSplattingRenderMesh.d.ts +142 -43
- package/llms.txt +1 -1
- package/package.json +1 -1
- package/plugins/BasePlugin/index.d.ts +1 -1
- package/plugins/GaussianSplattingEntranceAnimationPlugin/Controller.d.ts +1 -1
- package/plugins/GaussianSplattingEntranceAnimationPlugin/index.d.ts +1 -1
- package/plugins/index.js +3 -3
- package/plugins/index.mjs +3 -3
- package/react/context.d.ts +1 -1
- package/react/createProvider.d.ts +1 -1
- package/react/fiveApp.d.ts +1 -1
- package/react/hooks/unsafe__useFiveInstance.d.ts +1 -1
- package/react/hooks/useFiveAction.d.ts +1 -1
- package/react/hooks/useFiveCurrentObserver.d.ts +1 -1
- package/react/hooks/useFiveCurrentState.d.ts +1 -1
- package/react/hooks/useFiveEventCallback.d.ts +1 -1
- package/react/hooks/useFiveModelEffect.d.ts +1 -1
- package/react/hooks/useFiveModelIntersectRaycaster.d.ts +1 -1
- package/react/hooks/useFivePlugin.d.ts +1 -1
- package/react/hooks/useFiveSceneEffect.d.ts +1 -1
- package/react/hooks/useFiveState.d.ts +1 -1
- package/react/hooks/useFiveWork.d.ts +1 -1
- package/react/index.js +3 -3
- package/react/index.mjs +3 -3
- package/react/withFive.d.ts +1 -1
- package/umd/five-plugins.js +3 -3
- package/umd/five-react.js +3 -3
- package/umd/five.js +117 -134
- package/five/gaussian-splatting/util/renderData.d.ts +0 -66
package/README.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
# Five.js
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@realsee/five)
|
|
3
|
+
[](https://www.npmjs.com/package/@realsee/five-webgpu)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
如视三维渲染框架
|
|
6
6
|
|
|
7
7
|
> **🤖 For AI Assistants (Copilot, Cursor, etc.):**
|
|
8
|
-
> If this package is installed in your project, you can find **AI-friendly documentation** directly in `node_modules/@realsee/five/`. Please **READ** `node_modules/@realsee/five/ai_guides/README.md` as your primary source of truth. It contains comprehensive API references and guides optimized for LLMs.
|
|
9
|
-
> If not installed locally, you can access the same documentation via `https://cdn.jsdelivr.net/npm/@realsee/five@alpha/ai_guides/README.md` or `https://unpkg.com/@realsee/five@alpha/ai_guides/README.md`.
|
|
8
|
+
> If this package is installed in your project, you can find **AI-friendly documentation** directly in `node_modules/@realsee/five-webgpu/`. Please **READ** `node_modules/@realsee/five-webgpu/ai_guides/README.md` as your primary source of truth. It contains comprehensive API references and guides optimized for LLMs.
|
|
9
|
+
> If not installed locally, you can access the same documentation via `https://cdn.jsdelivr.net/npm/@realsee/five-webgpu@alpha/ai_guides/README.md` or `https://unpkg.com/@realsee/five-webgpu@alpha/ai_guides/README.md`.
|
|
10
10
|
## Introduction
|
|
11
11
|
|
|
12
|
-
**Five** 是 [
|
|
12
|
+
**Five** 是 [如视(realsee.com)](https://realsee.com) 提供的在浏览器中运行的三维空间渲染 Javascript SDK。基于 [Three.js](https://threejs.org/) 开发,帮助开发者在浏览器中构建高质量的 VR 看房与空间交互应用。
|
|
13
13
|
|
|
14
14
|
核心能力包括:
|
|
15
15
|
* **全景浏览**: 高分辨率全景图的高效加载与平滑浏览。
|
|
@@ -22,17 +22,17 @@
|
|
|
22
22
|
通过 npm 或 yarn 安装:
|
|
23
23
|
|
|
24
24
|
```bash
|
|
25
|
-
npm install three@^0.
|
|
25
|
+
npm install three@^0.183.2 @realsee/five-webgpu
|
|
26
26
|
# or
|
|
27
|
-
yarn add three@^0.
|
|
27
|
+
yarn add three@^0.183.2 @realsee/five-webgpu
|
|
28
28
|
```
|
|
29
29
|
|
|
30
|
-
> **注意**: Five 依赖 `three`,目前推荐版本为 `0.
|
|
30
|
+
> **注意**: Five 依赖 `three`,目前推荐版本为 `0.183.2`。
|
|
31
31
|
|
|
32
32
|
## Quick Start
|
|
33
33
|
|
|
34
34
|
```typescript
|
|
35
|
-
import { Five, parseWork } from "@realsee/five";
|
|
35
|
+
import { Five, parseWork } from "@realsee/five-webgpu";
|
|
36
36
|
|
|
37
37
|
// 1. 初始化
|
|
38
38
|
const five = new Five();
|
package/ai_guides/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Five SDK Documentation
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@realsee/five)
|
|
3
|
+
[](https://www.npmjs.com/package/@realsee/five-webgpu)
|
|
4
4
|
|
|
5
5
|
- **Summary**: Five SDK 的文档索引与阅读指南,旨在帮助开发者与 AI 助手快速定位所需信息。
|
|
6
6
|
- **Audience**: 开发者、AI 辅助编程工具。
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
* 保存/恢复场景:**必须** 深刻理解 [State](./features/state.md)。它是 Five 的核心快照机制,包含 Pose、Mode 和 PanoIndex。不要尝试手动管理零散的相机参数,应统一使用 State。
|
|
33
33
|
* **Coding Standards (代码规范)**:
|
|
34
34
|
* 优先使用 TypeScript 类型提示。
|
|
35
|
-
* 确保从 `@realsee/five` 导入核心类与类型 (e.g., `import { Five, Mode, Work, State } from "@realsee/five"`).
|
|
35
|
+
* 确保从 `@realsee/five-webgpu` 导入核心类与类型 (e.g., `import { Five, Mode, Work, State } from "@realsee/five-webgpu"`).
|
|
36
36
|
|
|
37
37
|
### 3. General Retrieval (通用检索)
|
|
38
38
|
* **API Signatures**: [API Reference](./api.md) 是最权威的接口定义来源,包含方法的参数与返回值。
|
|
@@ -62,7 +62,7 @@ Clipper 的几何定义依赖于 `clippingBoxMatrix`。
|
|
|
62
62
|
|
|
63
63
|
```typescript
|
|
64
64
|
import * as THREE from 'three';
|
|
65
|
-
import { Five } from '@realsee/five';
|
|
65
|
+
import { Five } from '@realsee/five-webgpu';
|
|
66
66
|
|
|
67
67
|
// 1. 创建一个辅助 Mesh 来定义裁切区域
|
|
68
68
|
// 注意:必须使用 1x1x1 的 BoxGeometry,因为 Shader 是基于单位立方体判断的
|
|
@@ -98,7 +98,7 @@ Five 的渲染场景 (`five.scene`) 和 Observers (观察点) 使用 **Y-up** (Y
|
|
|
98
98
|
|
|
99
99
|
```typescript
|
|
100
100
|
import * as THREE from 'three';
|
|
101
|
-
import { ViewLayer } from '@realsee/five';
|
|
101
|
+
import { ViewLayer } from '@realsee/five-webgpu';
|
|
102
102
|
|
|
103
103
|
// 假设已加载 ViewLayer
|
|
104
104
|
const viewLayer: ViewLayer = ...;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Five (Five 核心类)
|
|
2
2
|
|
|
3
|
-
- **Summary**: Five 是 @realsee/five 的核心类,负责 3D 场景的渲染、资源加载、用户交互和状态管理。
|
|
3
|
+
- **Summary**: Five 是 @realsee/five-webgpu 的核心类,负责 3D 场景的渲染、资源加载、用户交互和状态管理。
|
|
4
4
|
- **Schema**: FiveInitArgs 初始化参数接口。
|
|
5
5
|
- **Concepts**: Instance Management, Rendering Loop, Resource Loading, State Sync.
|
|
6
6
|
- **Configuration**: Five 初始化参数详解。
|
|
@@ -80,7 +80,7 @@ Five 内部维护了一个 `requestAnimationFrame` 循环。
|
|
|
80
80
|
创建一个全屏的 Five 实例并加载数据。
|
|
81
81
|
|
|
82
82
|
```typescript
|
|
83
|
-
import { Five, parseWork } from "@realsee/five";
|
|
83
|
+
import { Five, parseWork } from "@realsee/five-webgpu";
|
|
84
84
|
|
|
85
85
|
// 1. 初始化实例
|
|
86
86
|
const five = new Five({
|
|
@@ -101,7 +101,7 @@ five.load(workData);
|
|
|
101
101
|
|
|
102
102
|
```typescript
|
|
103
103
|
import * as THREE from "three/webgpu";
|
|
104
|
-
import { Five } from "@realsee/five";
|
|
104
|
+
import { Five } from "@realsee/five-webgpu";
|
|
105
105
|
|
|
106
106
|
const renderer = new THREE.WebGLRenderer();
|
|
107
107
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
所有手势事件的回调参数均为 `GestureEvent` 类型:
|
|
13
13
|
|
|
14
14
|
```typescript
|
|
15
|
-
import { State } from "@realsee/five";
|
|
15
|
+
import { State } from "@realsee/five-webgpu";
|
|
16
16
|
import * as THREE from "three/webgpu";
|
|
17
17
|
|
|
18
18
|
interface GestureEvent {
|
|
@@ -92,7 +92,7 @@ five.on("gesture.tap", (event) => {
|
|
|
92
92
|
|
|
93
93
|
```typescript
|
|
94
94
|
import * as THREE from "three/webgpu";
|
|
95
|
-
import { Five } from "@realsee/five";
|
|
95
|
+
import { Five } from "@realsee/five-webgpu";
|
|
96
96
|
|
|
97
97
|
const five = new Five();
|
|
98
98
|
|
|
@@ -76,7 +76,7 @@ five.getPixels(
|
|
|
76
76
|
|
|
77
77
|
```typescript
|
|
78
78
|
import * as THREE from 'three';
|
|
79
|
-
import { Five } from '@realsee/five';
|
|
79
|
+
import { Five } from '@realsee/five-webgpu';
|
|
80
80
|
|
|
81
81
|
// 假设有一个用于显示的 canvas
|
|
82
82
|
const magnifierCanvas = document.getElementById('magnifier-canvas') as HTMLCanvasElement;
|
|
@@ -103,7 +103,7 @@ SDK 内置了图片格式兼容性检测(`imageSupport`)。
|
|
|
103
103
|
启用 AVIF 格式并设置初始尺寸为 `512`,适用于大多数场景。
|
|
104
104
|
|
|
105
105
|
```typescript
|
|
106
|
-
import { Five } from "@realsee/five";
|
|
106
|
+
import { Five } from "@realsee/five-webgpu";
|
|
107
107
|
|
|
108
108
|
const five = new Five({
|
|
109
109
|
imageOptions: {
|
|
@@ -117,7 +117,7 @@ const five = new Five({
|
|
|
117
117
|
将数据中的 `custom-oss-public.ljcdn.com` 域名映射到对应的资源专用 OSS 域名。
|
|
118
118
|
|
|
119
119
|
```typescript
|
|
120
|
-
import { Five } from "@realsee/five";
|
|
120
|
+
import { Five } from "@realsee/five-webgpu";
|
|
121
121
|
|
|
122
122
|
const five = new Five({
|
|
123
123
|
imageOptions: {
|
|
@@ -139,7 +139,7 @@ const five = new Five({
|
|
|
139
139
|
使用 SDK 提供的 `defaultImageURLTransform` 工具函数(通常导出为 `defaultImageURLTransform`,可重命名为 `imageURL`),结合 `cut` 参数获取全景图特定区域(例如获取前方图片的中心 512x512 区域)。
|
|
140
140
|
|
|
141
141
|
```typescript
|
|
142
|
-
import { defaultImageURLTransform as imageURL } from "@realsee/five";
|
|
142
|
+
import { defaultImageURLTransform as imageURL } from "@realsee/five-webgpu";
|
|
143
143
|
|
|
144
144
|
const originalUrl = "https://vr-public.realsee-cdn.com/.../pano_f.jpg";
|
|
145
145
|
|
|
@@ -41,7 +41,7 @@ interface BaseLoaderOptions {
|
|
|
41
41
|
## Concepts
|
|
42
42
|
|
|
43
43
|
### 独立加载函数 (Standalone Functions)
|
|
44
|
-
这些加载函数(如 `loadGltf`, `loadPly`)是 `@realsee/five` 包导出的**独立函数**,而非 `Five` 实例的方法。你需要单独引入它们使用。
|
|
44
|
+
这些加载函数(如 `loadGltf`, `loadPly`)是 `@realsee/five-webgpu` 包导出的**独立函数**,而非 `Five` 实例的方法。你需要单独引入它们使用。
|
|
45
45
|
|
|
46
46
|
### 坐标系转换 (Up-Axis Conversion)
|
|
47
47
|
Five 使用 **Z-up** (Z 轴向上) 的右手坐标系。
|
|
@@ -206,8 +206,8 @@ Five 使用 **Z-up** (Z 轴向上) 的右手坐标系。
|
|
|
206
206
|
### 基础用法:加载 GLTF 模型 (Basic Usage)
|
|
207
207
|
|
|
208
208
|
```typescript
|
|
209
|
-
import { Five, FivePlugin } from '@realsee/five';
|
|
210
|
-
import { loadGltf } from '@realsee/five';
|
|
209
|
+
import { Five, FivePlugin } from '@realsee/five-webgpu';
|
|
210
|
+
import { loadGltf } from '@realsee/five-webgpu';
|
|
211
211
|
import * as THREE from 'three';
|
|
212
212
|
|
|
213
213
|
const five = new Five({/*...*/});
|
|
@@ -237,7 +237,7 @@ loadGltf('https://example.com/model.glb').then((result) => {
|
|
|
237
237
|
### 进阶用法:加载高斯泼溅 (Gaussian Splat)
|
|
238
238
|
|
|
239
239
|
```typescript
|
|
240
|
-
import { loadSplat } from '@realsee/five';
|
|
240
|
+
import { loadSplat } from '@realsee/five-webgpu';
|
|
241
241
|
|
|
242
242
|
loadSplat('https://example.com/scene.splat', {
|
|
243
243
|
modelUpAxis: 'Y', // 假设原始数据是 Y-up
|
|
@@ -252,7 +252,7 @@ loadSplat('https://example.com/scene.splat', {
|
|
|
252
252
|
### 进阶用法:自定义 PLY 属性映射 (Custom PLY Properties)
|
|
253
253
|
|
|
254
254
|
```typescript
|
|
255
|
-
import { loadPly } from '@realsee/five';
|
|
255
|
+
import { loadPly } from '@realsee/five-webgpu';
|
|
256
256
|
|
|
257
257
|
loadPly('https://example.com/data.ply', {
|
|
258
258
|
type: 'pbmPointCloud',
|
|
@@ -272,7 +272,7 @@ loadPly('https://example.com/data.ply', {
|
|
|
272
272
|
### 基础用法:加载 OBJ 模型 (Basic Usage - OBJ)
|
|
273
273
|
|
|
274
274
|
```typescript
|
|
275
|
-
import { loadObj } from '@realsee/five';
|
|
275
|
+
import { loadObj } from '@realsee/five-webgpu';
|
|
276
276
|
|
|
277
277
|
loadObj('https://example.com/model.obj', {
|
|
278
278
|
modelUpAxis: 'Z', // OBJ 默认通常是 Z-up (或根据实际情况调整)
|
|
@@ -285,7 +285,7 @@ loadObj('https://example.com/model.obj', {
|
|
|
285
285
|
### 基础用法:加载 FBX 模型
|
|
286
286
|
|
|
287
287
|
```typescript
|
|
288
|
-
import { loadFbx } from '@realsee/five';
|
|
288
|
+
import { loadFbx } from '@realsee/five-webgpu';
|
|
289
289
|
|
|
290
290
|
loadFbx('https://example.com/model.fbx').then((result) => {
|
|
291
291
|
five.scene.add(result.scene);
|
|
@@ -296,7 +296,7 @@ loadFbx('https://example.com/model.fbx').then((result) => {
|
|
|
296
296
|
### 进阶用法:加载 Dome 全景 (Panorama)
|
|
297
297
|
|
|
298
298
|
```typescript
|
|
299
|
-
import { loadDome } from '@realsee/five';
|
|
299
|
+
import { loadDome } from '@realsee/five-webgpu';
|
|
300
300
|
|
|
301
301
|
// 加载 .dome 或 .domez 格式
|
|
302
302
|
loadDome('https://example.com/panorama.domez', {
|
|
@@ -313,7 +313,7 @@ loadDome('https://example.com/panorama.domez', {
|
|
|
313
313
|
### 进阶用法:加载压缩模型 (AT3D)
|
|
314
314
|
|
|
315
315
|
```typescript
|
|
316
|
-
import { loadAt3d } from '@realsee/five';
|
|
316
|
+
import { loadAt3d } from '@realsee/five-webgpu';
|
|
317
317
|
|
|
318
318
|
loadAt3d('https://example.com/model.at3d', {
|
|
319
319
|
light: false,
|
|
@@ -167,7 +167,7 @@ five.setState({ mode: 'Mapview' });
|
|
|
167
167
|
在 `new Five()` 时配置各个模式的默认参数:
|
|
168
168
|
|
|
169
169
|
```typescript
|
|
170
|
-
import { Five, PanoCircleMeshSolid } from '@realsee/five';
|
|
170
|
+
import { Five, PanoCircleMeshSolid } from '@realsee/five-webgpu';
|
|
171
171
|
|
|
172
172
|
const five = new Five({
|
|
173
173
|
// 全景模式配置
|
|
@@ -225,7 +225,7 @@ five.updateConfiguration({
|
|
|
225
225
|
使用 `changeMode` 精准控制切换过程,并监听完成时机:
|
|
226
226
|
|
|
227
227
|
```ts
|
|
228
|
-
import { Five, Mode } from '@realsee/five';
|
|
228
|
+
import { Five, Mode } from '@realsee/five-webgpu';
|
|
229
229
|
|
|
230
230
|
const five = new Five();
|
|
231
231
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
`PBMPanoFilter` 类定义了全景图的滤镜参数。所有属性均为对象引用,直接修改其内部属性即可生效。
|
|
14
14
|
|
|
15
15
|
```typescript
|
|
16
|
-
import { PBMUpdateable } from "@realsee/five";
|
|
16
|
+
import { PBMUpdateable } from "@realsee/five-webgpu";
|
|
17
17
|
|
|
18
18
|
export class PBMPanoFilter extends PBMUpdateable {
|
|
19
19
|
/** 对比度控制 */
|
|
@@ -81,7 +81,7 @@ export class PBMPanoFilter extends PBMUpdateable {
|
|
|
81
81
|
创建一个滤镜实例并应用到 Five 场景中。
|
|
82
82
|
|
|
83
83
|
```typescript
|
|
84
|
-
import { Five, PBMPanoFilter } from "@realsee/five";
|
|
84
|
+
import { Five, PBMPanoFilter } from "@realsee/five-webgpu";
|
|
85
85
|
|
|
86
86
|
const five = new Five();
|
|
87
87
|
// ... 初始化 five ...
|
|
@@ -105,7 +105,7 @@ five.modelScene.parameter.set('panoFilter', panoFilter);
|
|
|
105
105
|
滤镜参数支持实时修改,适合制作调节面板。
|
|
106
106
|
|
|
107
107
|
```typescript
|
|
108
|
-
import { Five, PBMPanoFilter } from "@realsee/five";
|
|
108
|
+
import { Five, PBMPanoFilter } from "@realsee/five-webgpu";
|
|
109
109
|
|
|
110
110
|
// 假设已经有 five 实例
|
|
111
111
|
const panoFilter = new PBMPanoFilter();
|
|
@@ -76,7 +76,7 @@ interface ImageOptions {
|
|
|
76
76
|
### 查看瓦片数据结构
|
|
77
77
|
|
|
78
78
|
```typescript
|
|
79
|
-
import { Five } from "@realsee/five";
|
|
79
|
+
import { Five } from "@realsee/five-webgpu";
|
|
80
80
|
|
|
81
81
|
const five = new Five();
|
|
82
82
|
|
|
@@ -94,7 +94,7 @@ five.on("loaded", () => {
|
|
|
94
94
|
### 配置瓦片加载策略与图片参数
|
|
95
95
|
|
|
96
96
|
```typescript
|
|
97
|
-
import { Five } from "@realsee/five";
|
|
97
|
+
import { Five } from "@realsee/five-webgpu";
|
|
98
98
|
|
|
99
99
|
const five = new Five({
|
|
100
100
|
// 自定义瓦片层级选择策略
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
```ts
|
|
15
15
|
import * as THREE from "three/webgpu";
|
|
16
|
-
import type { Mode } from "@realsee/five";
|
|
16
|
+
import type { Mode } from "@realsee/five-webgpu";
|
|
17
17
|
|
|
18
18
|
type CubeFace = 'up' | 'down' | 'left' | 'right' | 'front' | 'back';
|
|
19
19
|
|
|
@@ -221,7 +221,7 @@ Observer 是 VR 空间中预设的观察位置。在 **Panorama (全景)** 模
|
|
|
221
221
|
最基础的用法是从 API 获取数据并加载。
|
|
222
222
|
|
|
223
223
|
```ts
|
|
224
|
-
import { Five, parseWork } from "@realsee/five";
|
|
224
|
+
import { Five, parseWork } from "@realsee/five-webgpu";
|
|
225
225
|
|
|
226
226
|
const five = new Five();
|
|
227
227
|
five.appendTo(document.getElementById("app"));
|
package/ai_guides/quick-start.md
CHANGED
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
通过 npm 或 yarn 安装:
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm install three@^0.117.1 @realsee/five
|
|
10
|
+
npm install three@^0.117.1 @realsee/five-webgpu
|
|
11
11
|
# or
|
|
12
|
-
yarn add three@^0.117.1 @realsee/five
|
|
12
|
+
yarn add three@^0.117.1 @realsee/five-webgpu
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
> **注意**: Five 依赖 `three`,请确保安装了兼容的版本。
|
|
@@ -19,7 +19,7 @@ yarn add three@^0.117.1 @realsee/five
|
|
|
19
19
|
初始化 Five 实例并加载 Work 数据:
|
|
20
20
|
|
|
21
21
|
```typescript
|
|
22
|
-
import { Five, parseWork } from "@realsee/five";
|
|
22
|
+
import { Five, parseWork } from "@realsee/five-webgpu";
|
|
23
23
|
|
|
24
24
|
// 1. 创建 Five 实例
|
|
25
25
|
const five = new Five();
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
> 6.6.x 版本发布日志
|
|
3
3
|
|
|
4
4
|
```shell
|
|
5
|
-
npm install @realsee/five
|
|
5
|
+
npm install @realsee/five-webgpu
|
|
6
6
|
```
|
|
7
7
|
|
|
8
8
|
## 依赖升级
|
|
@@ -46,7 +46,7 @@ const intersects = five.model.intersectRaycaster(raycaster);
|
|
|
46
46
|
支持使用浏览器原生的 `ImageBitmap` API 替代传统的 `HTMLImageElement` 进行纹理加载。`ImageBitmap` 的解码过程可以在后台线程进行,避免了解码大图时阻塞主线程导致的掉帧现象。
|
|
47
47
|
|
|
48
48
|
```typescript
|
|
49
|
-
import { Five } from "@realsee/five";
|
|
49
|
+
import { Five } from "@realsee/five-webgpu";
|
|
50
50
|
|
|
51
51
|
// 开启 Native ImageBitmap 支持 (全局配置)
|
|
52
52
|
Five.useNativeImageBitmap = true;
|
package/docs/assets/hierarchy.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
window.hierarchyData = "
|
|
1
|
+
window.hierarchyData = "eJytWdtu2zgQ/Rc9s13xTvmtSZtFgKQJmm53gSIPjM3abGQpEOVcUOTfF5SamJTleKjdFxm25/CcGQ6HQ+pX1tR167LZd5wTjBSmCDOeI8wFQ5QrghgXCHNKEc0JQ1xx/ygIEoxhRHNBEOa5QkwqxJQoEC+EQiKn9BpljflRmnlr68pls18ZkdR/VHptsln22bQPdXN7tblx88bemAxlt7ZaZDNMFMo2TZnNsnmpnTPuD1stzOP7IeL9ql2XGeqtslnWusU7P8S7/odnlDFcBIwffurHi7tezgsZ4eKFzFataX7o+StfYL+X6hXU0XGx62AKYwwBkKJsvrLlojFVNvvOcHHtVUgVqEiILzSwESmRFGEuKaJUEU+vcDjLR/WmWthq+a0uN2sDCkIMSQ2CUhgVRKJCik6NwpGax0mCHpM1PaOsIDKg/mKWtq4msI8BgQJkmI5XdyvTmAkCxoAwAb6mhNHXzny6N1ULi/qLdWoG4FxihPMi948CYZwrhDHmCGPiH4whjLl/COwf3kR6k4IjTHJ63SsPJ+9P49pNkyA+BEBjJcNYnfr/nJm3cM4YAmVVecB6Xi/M8UpXywRXBxgobzHkLb/aMpF2CwGzFkPWRMYUNpyrIdvV3FSpTm4xUF7Md7ehL8bVm2aeQD4GhCogoYKLm59JiRzYQ/koCfgudVXD2V6toVyMDbi+mse06jAEQZk5izaUamEaOGlgD+UTYUW6anWb4OPWPL1+E4l8YUJ+Xq97JeG6/btubh1cydYc6nfUQP3zJbn6xxAoa8Ej1ivjnK2rFNYQAmQlOY1Yj+uqbeqyTMmsHRSUm411iufGrQ73qqH14XMAJlFn7tffsW3mpYGRxfYAOhqdO2L4VV3aRSpnB4IQR9t5PMbxxrX1OpW5RwGoGR3tX6IIg9qXN2McZxDjobuna700KcetEJBcpZjoO0Umwiz+XdZTVMQQoOc86i0uawfr5b1hsqccs85TjtlwP4BvBVC/KN2bwKeBPtgmO4JN9t5z+HWF/Kru4yDYvkxPkzgOTc9Eintd0f3Kib0HnPm91eHFTYqoFeja0m3N70vEaWXbD80SlvNvjgBLFVLIYZFt9Fr/J1mHBoEp8zdlI8rO7K35X9S9NVBq8viZRT6U151wEfXRR+fA/bE3TLk28pt/R0nVgPKvu4Vujb4pAdkbmafQUybzjp7JPKb3QT6xZWsaEP3W/PAq8vepYeHwYdOtaawuYeUiAKTOMxVFjmiRY0SlwIgqilH/2/Zr928hOWI5x4hhIhAjeVdbvOluZhxpZ+c7LhxKkwgFiJqMas/vQS5XdbVMpo5QAGpFR6mfnJ3rcgJ7DAQIKPIxAbqqL6ryKV3AAAgRIPmeef9cL8y0uQ+RgDv8nO+b/0kSdpCQ1whE7M+DiSp2wQAh5K18mCZkBAwQoqITub+Hox8Pc/Z2KYWa5/3W5D8Dwm/WPJzpp6BIv1U4X61h+zeXLGqudaPXpjXNN11uoL1nCEmt1Vz1Rdd/Rhc+ri7vzWKCnnEoMBqKs7FovCTLhKhE0OToSKb66BRkTJfPMWfaCbJC5GRVhQhzx989HW9uTHfSBN9WvSKSVRSKIpFL2UtRdCAlTQZUwjPK/AvfAdfFjTPNPXCFhoBUpwUlXS/n/R5o8DMK5vfGQG8pyQdMLytsx+u9tXAMdbjwCobl4JB32RdNwEHPW6YUX8G4RIIVFAlBciQk9g/WZZd//x8tPwc9xLyhYd8MM/ybk4fOf1jou9bem7PN2la6mgMjMQqDRL4IU/zTk/lYr82ZXa5aWy1h1CMgADGnYfdxUtYPtlp2Y5CPwMnfwQBoRZTk4RB0Ai2F0Mazzmn3Ct+nXfguVm+cs7o6KjcNTMYQAfBdMrnr+4ltjH8j5hL9H+AO0T8//wtSUMCe"
|