@realsee/five-webgpu 1.0.0-alpha.1 → 1.0.0-alpha.10

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.
Files changed (628) hide show
  1. package/README.md +9 -9
  2. package/_virtual/_rolldown/runtime.js +255 -0
  3. package/ai_guides/README.md +2 -2
  4. package/ai_guides/api.md +9 -8
  5. package/ai_guides/features/camera-animation.md +1 -1
  6. package/ai_guides/features/clipper.md +1 -1
  7. package/ai_guides/features/coordinate-system.md +1 -1
  8. package/ai_guides/features/event.md +1 -2
  9. package/ai_guides/features/five.md +81 -12
  10. package/ai_guides/features/gesture.md +3 -3
  11. package/ai_guides/features/get-screen-pixels.md +1 -1
  12. package/ai_guides/features/image-options.md +3 -3
  13. package/ai_guides/features/load-external-model.md +15 -15
  14. package/ai_guides/features/load-progress.md +2 -2
  15. package/ai_guides/features/material.md +35 -8
  16. package/ai_guides/features/mode.md +28 -31
  17. package/ai_guides/features/model.md +1 -1
  18. package/ai_guides/features/pano-filter.md +3 -3
  19. package/ai_guides/features/pano-tile.md +2 -2
  20. package/ai_guides/features/raycast.md +1 -1
  21. package/ai_guides/features/screen-project.md +1 -1
  22. package/ai_guides/features/state.md +3 -3
  23. package/ai_guides/features/ultra-hdr.md +41 -32
  24. package/ai_guides/features/work.md +2 -2
  25. package/ai_guides/quick-start.md +3 -3
  26. package/ai_guides/release_notes/6.6.md +2 -2
  27. package/ai_guides/release_notes/6.7.md +1 -1
  28. package/ai_guides/release_notes/6.8.md +3 -3
  29. package/ai_guides/support.md +0 -4
  30. package/docs/assets/hierarchy.js +1 -1
  31. package/docs/assets/navigation.js +1 -1
  32. package/docs/assets/search.js +1 -1
  33. package/docs/classes/index.AdaptiveLuminancePass.html +1 -1
  34. package/docs/classes/index.BoundingMesh.html +1 -1
  35. package/docs/classes/index.Camera.html +1 -1
  36. package/docs/classes/index.EffectComposer.html +1 -1
  37. package/docs/classes/index.EyeDomeLightingPass.html +1 -1
  38. package/docs/classes/index.Five.html +77 -68
  39. package/docs/classes/index.FivePass.html +1 -1
  40. package/docs/classes/index.FiveRenderer.html +2 -2
  41. package/docs/classes/index.FlowingFireworks3DPass.html +7 -3
  42. package/docs/classes/index.FlowingLight2DPass.html +6 -3
  43. package/docs/classes/index.FlowingLight3DPass.html +6 -3
  44. package/docs/classes/index.GaussianBlurPass.html +1 -1
  45. package/docs/classes/index.InternalWebGPURenderer.html +17 -3
  46. package/docs/classes/index.Model.html +1 -1
  47. package/docs/classes/index.ModelScene.html +1 -1
  48. package/docs/classes/index.NetworkSubscribe.html +1 -1
  49. package/docs/classes/index.PBMCustomNode.html +57 -0
  50. package/docs/classes/index.PBMGaussianSplattingNodeMaterial.html +9 -6
  51. package/docs/classes/index.PBMGaussianSplattingObject.html +18 -4
  52. package/docs/classes/index.PBMGaussianSplattingRenderMesh.html +41 -11
  53. package/docs/classes/index.PBMGroup.html +1 -1
  54. package/docs/classes/index.PBMMesh.html +1 -1
  55. package/docs/classes/index.PBMMeshBasicMaterial.html +19 -6
  56. package/docs/classes/index.PBMMeshBasicNodeMaterial.html +31 -8
  57. package/docs/classes/index.PBMMeshPanoOnlyMaterial.html +19 -6
  58. package/docs/classes/index.PBMMeshPanoOnlyNodeMaterial.html +31 -8
  59. package/docs/classes/index.PBMMeshPhongMaterial.html +19 -6
  60. package/docs/classes/index.PBMMeshPhongNodeMaterial.html +31 -8
  61. package/docs/classes/index.PBMMeshPhysicalMaterial.html +19 -6
  62. package/docs/classes/index.PBMMeshPhysicalNodeMaterial.html +31 -8
  63. package/docs/classes/index.PBMPanoFilter.html +8 -8
  64. package/docs/classes/index.PBMPointCloud.html +6 -7
  65. package/docs/classes/index.PBMPointCloudMaterial.html +83 -0
  66. package/docs/classes/index.PBMSkinnedMesh.html +1 -1
  67. package/docs/classes/index.PBMUpdateable.html +1 -1
  68. package/docs/classes/index.PanoCircleMesh.html +1 -1
  69. package/docs/classes/index.PanoCircleMeshCustom.html +5 -5
  70. package/docs/classes/index.PanoCircleMeshSolid.html +1 -1
  71. package/docs/classes/index.Parameter.html +61 -53
  72. package/docs/classes/index.Scene.html +1 -1
  73. package/docs/classes/index.Subscribe.html +1 -1
  74. package/docs/classes/index.TextureLoader.html +4 -1
  75. package/docs/classes/index.Tile3D.html +23 -21
  76. package/docs/classes/index.TileNode.html +1 -1
  77. package/docs/classes/index.Tileset.html +4 -4
  78. package/docs/classes/index.TrajectoryNode.html +3 -3
  79. package/docs/classes/index.Work.html +20 -18
  80. package/docs/classes/index.WorkResolvedObserver.html +22 -22
  81. package/docs/classes/index.XRButton.html +3 -0
  82. package/docs/documents/README.html +2 -2
  83. package/docs/documents/api.html +11 -10
  84. package/docs/documents/features_camera-animation.html +1 -1
  85. package/docs/documents/features_clipper.html +1 -1
  86. package/docs/documents/features_coordinate-system.html +1 -1
  87. package/docs/documents/features_event.html +1 -2
  88. package/docs/documents/features_five.html +53 -11
  89. package/docs/documents/features_gesture.html +3 -3
  90. package/docs/documents/features_get-screen-pixels.html +1 -1
  91. package/docs/documents/features_image-options.html +3 -3
  92. package/docs/documents/features_load-external-model.html +13 -13
  93. package/docs/documents/features_load-progress.html +1 -1
  94. package/docs/documents/features_material.html +20 -9
  95. package/docs/documents/features_mode.html +30 -15
  96. package/docs/documents/features_model.html +1 -1
  97. package/docs/documents/features_pano-filter.html +3 -3
  98. package/docs/documents/features_pano-tile.html +2 -2
  99. package/docs/documents/features_raycast.html +1 -1
  100. package/docs/documents/features_screen-project.html +1 -1
  101. package/docs/documents/features_state.html +2 -2
  102. package/docs/documents/features_ultra-hdr.html +50 -44
  103. package/docs/documents/features_work.html +2 -2
  104. package/docs/documents/quick-start.html +2 -2
  105. package/docs/documents/release_notes_6.6.html +2 -2
  106. package/docs/documents/release_notes_6.7.html +1 -1
  107. package/docs/documents/release_notes_6.8.html +3 -3
  108. package/docs/documents/support.html +1 -3
  109. package/docs/functions/index.customNodesCacheKey.html +3 -0
  110. package/docs/functions/index.parseWork.html +1 -1
  111. package/docs/functions/index.workToJson.html +1 -1
  112. package/docs/hierarchy.html +1 -1
  113. package/docs/index.html +2 -2
  114. package/docs/interfaces/index.AddableObject.html +1 -1
  115. package/docs/interfaces/index.AjaxOptions.html +1 -1
  116. package/docs/interfaces/index.BaseEvent.html +2 -2
  117. package/docs/interfaces/index.Clock.html +24 -0
  118. package/docs/interfaces/index.DeviceProfile.html +8 -0
  119. package/docs/interfaces/index.EventCallback.html +49 -47
  120. package/docs/interfaces/index.FiveInitArgs.html +65 -41
  121. package/docs/interfaces/index.GainmapCfgData.html +15 -0
  122. package/docs/interfaces/index.GestureEvent.html +2 -2
  123. package/docs/interfaces/index.IPBMMaterial.html +18 -5
  124. package/docs/interfaces/index.ImageOptions.html +1 -1
  125. package/docs/interfaces/index.IntersectEvent.html +2 -2
  126. package/docs/interfaces/index.IntersectMesh.html +1 -1
  127. package/docs/interfaces/index.IntersectMeshInterface.html +1 -1
  128. package/docs/interfaces/index.Intersection.html +1 -1
  129. package/docs/interfaces/index.LoosePanoWork.html +2 -2
  130. package/docs/interfaces/index.LooseWork.html +2 -2
  131. package/docs/interfaces/index.LooseWorkInitial.html +2 -2
  132. package/docs/interfaces/index.LooseWorkModel.html +2 -2
  133. package/docs/interfaces/index.LooseWorkObserver.html +2 -2
  134. package/docs/interfaces/index.LooseWorkPanorama.html +4 -3
  135. package/docs/interfaces/index.LooseWorkWithExtrinsics.html +15 -9
  136. package/docs/interfaces/index.ModeChangeEvent.html +2 -2
  137. package/docs/interfaces/index.ModelControllerCustomInitArgs.html +1 -1
  138. package/docs/interfaces/index.ModelEvent.html +2 -2
  139. package/docs/interfaces/index.ModelSceneEvent.html +2 -2
  140. package/docs/interfaces/index.ModelTileEvent.html +2 -2
  141. package/docs/interfaces/index.MovePanoOptions.html +1 -1
  142. package/docs/interfaces/index.NetworkAbortError.html +1 -1
  143. package/docs/interfaces/index.NetworkFirbiddenError.html +1 -1
  144. package/docs/interfaces/index.NetworkOptions.html +1 -1
  145. package/docs/interfaces/index.NetworkProxyError.html +1 -1
  146. package/docs/interfaces/index.NetworkResourceEvent.html +2 -2
  147. package/docs/interfaces/index.NetworkResponseError.html +1 -1
  148. package/docs/interfaces/index.NetworkTimeoutError.html +1 -1
  149. package/docs/interfaces/index.ObjectEvent.html +2 -2
  150. package/docs/interfaces/index.PBMClipperParameter.html +2 -2
  151. package/docs/interfaces/index.PBMCustomNodeContext.html +87 -0
  152. package/docs/interfaces/index.PBMCustomNodeOptions.html +10 -0
  153. package/docs/interfaces/index.PBMCustomNodePanoContext.html +20 -0
  154. package/docs/interfaces/index.PBMCustomNodeSlots.html +31 -0
  155. package/docs/interfaces/index.PBMGaussianSplattingNodeMaterialOptions.html +4 -0
  156. package/docs/interfaces/index.PBMPanoDepth.html +5 -5
  157. package/docs/interfaces/index.PBMPanoFilterValue.html +2 -2
  158. package/docs/interfaces/index.PBMPanoGainmap.html +6 -0
  159. package/docs/interfaces/index.PBMPanoPicture.html +9 -8
  160. package/docs/interfaces/index.PBMRefinedScreen.html +2 -2
  161. package/docs/interfaces/index.PanoCircleMeshCustomOptions.html +2 -2
  162. package/docs/interfaces/index.PanoCircleMeshInterface.html +1 -1
  163. package/docs/interfaces/index.PanoEvent.html +2 -2
  164. package/docs/interfaces/index.PanoPrepareEvent.html +15 -0
  165. package/docs/interfaces/index.PanoTextureEvent.html +2 -2
  166. package/docs/interfaces/index.PanoramaControllerCustomInitArgs.html +9 -9
  167. package/docs/interfaces/index.PanoramaLikeControllerCustomInitArgs.html +1 -1
  168. package/docs/interfaces/index.ParameterMaterialValue.html +46 -38
  169. package/docs/interfaces/index.ParameterTilesetValue.html +15 -15
  170. package/docs/interfaces/index.ParameterValue.html +60 -52
  171. package/docs/interfaces/index.Pose.html +1 -1
  172. package/docs/interfaces/index.RenderEvent.html +2 -2
  173. package/docs/interfaces/index.ResolvedParameterValue.html +60 -52
  174. package/docs/interfaces/index.SplatData.html +10 -5
  175. package/docs/interfaces/index.State.html +1 -1
  176. package/docs/interfaces/index.StateEvent.html +2 -2
  177. package/docs/interfaces/index.TextureOptions.html +1 -1
  178. package/docs/interfaces/index.TilesetOptions.html +7 -2
  179. package/docs/interfaces/index.TopviewControllerCustomInitArgs.html +1 -1
  180. package/docs/interfaces/index.VRPanoramaControllerCustomInitArgs.html +37 -0
  181. package/docs/interfaces/index.ViewLayer.html +23 -21
  182. package/docs/interfaces/index.WorkCubeHdrGainmapImage.html +10 -0
  183. package/docs/interfaces/index.WorkCubeImage.html +5 -9
  184. package/docs/interfaces/index.WorkImage.html +8 -12
  185. package/docs/interfaces/index.WorkInitial.html +8 -8
  186. package/docs/interfaces/index.WorkModel.html +8 -8
  187. package/docs/interfaces/index.WorkModelLayer.html +6 -6
  188. package/docs/interfaces/index.WorkObserver.html +23 -23
  189. package/docs/interfaces/index.WorkPanoramaJson.html +3 -2
  190. package/docs/interfaces/index.WorkTile.html +8 -12
  191. package/docs/interfaces/index.WorksEvent.html +2 -2
  192. package/docs/interfaces/index.XRControllerEvent.html +2 -2
  193. package/docs/interfaces/index.XRGestureEvent.html +2 -2
  194. package/docs/interfaces/index.XRPanoramaControllerCustomInitArgs.html +52 -0
  195. package/docs/interfaces/index.XRSessionEvent.html +2 -2
  196. package/docs/modules/index.html +1 -1
  197. package/docs/types/index.ControllerCustomInitTypes.html +4 -2
  198. package/docs/types/index.ControllerEventTypes.html +25 -23
  199. package/docs/types/index.DeviceProfileOverride.html +5 -0
  200. package/docs/types/index.EventTypes.html +26 -26
  201. package/docs/types/index.FlowingFireworks3DPassLine.html +5 -2
  202. package/docs/types/index.FlowingLight2DPassLine.html +4 -2
  203. package/docs/types/index.FlowingLight3DPassLine.html +7 -2
  204. package/docs/types/index.FlowingLightLineInput.html +12 -0
  205. package/docs/types/index.Mode.html +6 -3
  206. package/docs/types/index.OutputTextureDataType.html +1 -1
  207. package/docs/types/index.PBMColorStyle.html +1 -1
  208. package/docs/types/index.PBMCustomNodeTargetType.html +2 -0
  209. package/docs/types/index.PBMPointBack.html +1 -1
  210. package/docs/types/index.PBMPointShape.html +1 -1
  211. package/docs/types/index.PBMPointSize.html +1 -1
  212. package/docs/types/index.PBMRoofStyle.html +6 -0
  213. package/docs/types/index.ParseOptions.html +14 -8
  214. package/docs/types/index.XRMachineType.html +7 -0
  215. package/docs/variables/index.GSPLAT_PIPELINE_AUTO.html +2 -0
  216. package/docs/variables/index.GSPLAT_PIPELINE_RASTER_CPU_SORT.html +2 -0
  217. package/docs/variables/index.GSPLAT_PIPELINE_RASTER_GPU_SORT.html +2 -0
  218. package/docs/variables/index.PBMVertexMarkFlag.html +4 -0
  219. package/docs/variables/index.PROXY_CONTROLLER_EVENT_NAMES.html +1 -1
  220. package/docs/variables/index.controllersDefaultInitArgs.html +1 -1
  221. package/five/application/controllers.d.ts +8 -0
  222. package/five/application/events.d.ts +1 -1
  223. package/five/application/five.d.ts +15 -1
  224. package/five/application/fiveInitArgs.d.ts +32 -1
  225. package/five/application/mode.d.ts +8 -1
  226. package/five/cardboard/helper.d.ts +2 -0
  227. package/five/cardboard/index.d.ts +13 -0
  228. package/five/cardboard/sensor.d.ts +158 -0
  229. package/five/controllers/base.d.ts +3 -0
  230. package/five/controllers/events.d.ts +5 -3
  231. package/five/controllers/panorama.d.ts +2 -2
  232. package/five/controllers/vrPanorama.d.ts +56 -0
  233. package/five/controllers/xrPanorama.d.ts +506 -0
  234. package/five/core/internalWebGPURenderer.d.ts +23 -1
  235. package/five/core/panoVideo.d.ts +4 -1
  236. package/five/core/tiling.d.ts +40 -9
  237. package/five/core/webglAsyncReadFix.d.ts +25 -0
  238. package/five/gaussian-splatting/gpu-sort/prefixSumKernel.d.ts +65 -0
  239. package/five/gaussian-splatting/gpu-sort/radixSortModule.d.ts +128 -0
  240. package/five/gaussian-splatting/gpu-sort/shaders/radixHistogram.d.ts +2 -0
  241. package/five/gaussian-splatting/gpu-sort/shaders/radixReorder.d.ts +2 -0
  242. package/five/gaussian-splatting/gpu-sort/shaders/sortKeygen.d.ts +2 -0
  243. package/five/gaussian-splatting/gpu-sort/sortAdapter.d.ts +234 -0
  244. package/five/gaussian-splatting/layerRegistry.d.ts +17 -0
  245. package/five/gaussian-splatting/pipelines/cpuSortPipeline.d.ts +159 -0
  246. package/five/gaussian-splatting/pipelines/gpuSortPipeline.d.ts +98 -0
  247. package/five/gaussian-splatting/pipelines/gsplatPipeline.d.ts +104 -0
  248. package/five/gaussian-splatting/pipelines/pipelineMode.d.ts +42 -0
  249. package/five/gaussian-splatting/pipelines/sortThrottle.d.ts +45 -0
  250. package/five/gaussian-splatting/shStore.d.ts +22 -0
  251. package/five/gaussian-splatting/splatAssembler.d.ts +69 -0
  252. package/five/gaussian-splatting/transformStore.d.ts +37 -0
  253. package/five/gaussian-splatting/wasm/sort.d.ts +4 -3
  254. package/five/index.d.ts +8 -2
  255. package/five/index.js +403 -343
  256. package/five/index.mjs +9531 -4900
  257. package/five/meshes/panoCircleMeshCustom.d.ts +1 -0
  258. package/five/model/index.d.ts +3 -2
  259. package/five/model/loaders/spz.d.ts +50 -2
  260. package/five/model/materials/nodes/pbmMeshBasicNodeMaterial.d.ts +2 -0
  261. package/five/model/materials/nodes/pbmMeshPanoOnlyNodeMaterial.d.ts +2 -0
  262. package/five/model/materials/nodes/pbmMeshPhongNodeMaterial.d.ts +2 -0
  263. package/five/model/materials/nodes/pbmMeshPhysicalNodeMaterial.d.ts +2 -0
  264. package/five/model/materials/pbmGaussianSplattingNodeMaterial.d.ts +12 -5
  265. package/five/model/materials/pbmMaterial.d.ts +288 -6
  266. package/five/model/materials/pbmMeshMaterial.d.ts +0 -9
  267. package/five/model/materials/pbmPointCloudNodeMaterial.d.ts +1 -1
  268. package/five/model/materials/tsl/defines.d.ts +8 -2
  269. package/five/model/materials/tsl/outputBuilder.d.ts +8 -15
  270. package/five/model/materials/tsl/panoColor.d.ts +8 -2
  271. package/five/model/materials/tsl/utils.d.ts +13 -0
  272. package/five/model/objects/pbmGaussianSplattingObject.d.ts +30 -4
  273. package/five/model/objects/pbmGaussianSplattingRenderMesh.d.ts +113 -48
  274. package/five/model/objects/pbmPointCloud.d.ts +0 -1
  275. package/five/model/objects/pbmPointCloudObject.d.ts +1 -1
  276. package/five/model/parameter.d.ts +20 -5
  277. package/five/model/tile3d/index.d.ts +2 -0
  278. package/five/model/tile3d/tileset.d.ts +5 -0
  279. package/five/model/tile3d/trajectory-content.d.ts +53 -0
  280. package/five/renderer/compute-renderers/binned/binned-core.d.ts +46 -0
  281. package/five/renderer/compute-renderers/binned/binned-pipelines.d.ts +10 -0
  282. package/five/renderer/compute-renderers/binned/shaders/args-builder.d.ts +2 -0
  283. package/five/renderer/compute-renderers/binned/shaders/classify.d.ts +2 -0
  284. package/five/renderer/compute-renderers/binned/shaders/coop.d.ts +2 -0
  285. package/five/renderer/compute-renderers/pointcloud-compute-renderer.d.ts +14 -38
  286. package/five/renderer/compute-renderers/shaders/lib/color.d.ts +2 -0
  287. package/five/renderer/compute-renderers/shaders/lib/cull.d.ts +2 -0
  288. package/five/renderer/compute-renderers/shaders/lib/encode.d.ts +2 -0
  289. package/five/renderer/compute-renderers/shaders/lib/point-setup.d.ts +2 -0
  290. package/five/renderer/compute-renderers/shaders/lib/point-size.d.ts +2 -0
  291. package/five/renderer/compute-renderers/shaders/lib/raster.d.ts +2 -0
  292. package/five/renderer/compute-renderers/shaders/lib/size-class.d.ts +2 -0
  293. package/five/renderer/compute-renderers/shaders/lib/tile-bindings.d.ts +2 -0
  294. package/five/renderer/compute-renderers/uniform-layout.d.ts +23 -0
  295. package/five/renderer/five-renderer.d.ts +2 -0
  296. package/five/renderer/index.d.ts +1 -1
  297. package/five/renderer/postprocessing/index.d.ts +1 -1
  298. package/five/renderer/postprocessing/passes/flowing-fireworks-3d-pass.d.ts +23 -0
  299. package/five/renderer/postprocessing/passes/flowing-light-2d-pass.d.ts +2 -0
  300. package/five/renderer/postprocessing/passes/flowing-light-3d-pass.d.ts +23 -0
  301. package/five/renderer/postprocessing/passes/pass.js +255 -0
  302. package/five/renderer/postprocessing/passes/pass.mjs +255 -0
  303. package/five/renderer/tools/full-screen-quad.js +255 -0
  304. package/five/renderer/tools/full-screen-quad.mjs +255 -0
  305. package/five/texture/loader.d.ts +6 -0
  306. package/five/types/cube.d.ts +0 -1
  307. package/five/utils/calculateThreeMouse.js +255 -0
  308. package/five/utils/calculateThreeMouse.mjs +255 -0
  309. package/five/utils/detector.d.ts +11 -1
  310. package/five/utils/distance.js +255 -0
  311. package/five/utils/distance.mjs +255 -0
  312. package/five/utils/error.d.ts +1 -0
  313. package/five/utils/event.d.ts +26 -3
  314. package/five/utils/gainmap-data.d.ts +23 -0
  315. package/five/utils/isNil.js +255 -0
  316. package/five/utils/isNil.mjs +255 -0
  317. package/five/utils/ktx2.d.ts +3 -3
  318. package/five/utils/uuid.js +255 -0
  319. package/five/utils/uuid.mjs +255 -0
  320. package/five/webxr/XRControllerModelFactory.d.ts +55 -0
  321. package/five/webxr/buttonStateMachine.d.ts +31 -0
  322. package/five/webxr/deviceProfile.d.ts +70 -0
  323. package/five/webxr/inputSourceTracker.d.ts +59 -0
  324. package/five/webxr/referenceSpace.d.ts +60 -0
  325. package/five/webxr/renderTargetBridge.d.ts +45 -0
  326. package/five/webxr/xrButton.d.ts +4 -0
  327. package/five/webxr/xrManager.d.ts +174 -0
  328. package/five/work/index.d.ts +1 -1
  329. package/five/work/looseWorkType.d.ts +2 -1
  330. package/five/work/work.d.ts +30 -7
  331. package/five/work/workJsonType.d.ts +2 -1
  332. package/gltf-loader/gltf-object.d.ts +17 -0
  333. package/gltf-loader/index.d.ts +45 -0
  334. package/gltf-loader/index.js +255 -0
  335. package/gltf-loader/index.mjs +302 -0
  336. package/line/circle_png.d.ts +1 -0
  337. package/line/index.d.ts +49 -0
  338. package/line/index.js +255 -0
  339. package/line/index.mjs +340 -0
  340. package/llms.txt +1 -1
  341. package/package.json +34 -5
  342. package/plugins/BackgroundPlugin/Controller.d.ts +20 -0
  343. package/plugins/BackgroundPlugin/Controller.js +276 -0
  344. package/plugins/BackgroundPlugin/Controller.mjs +276 -0
  345. package/plugins/BackgroundPlugin/index.d.ts +5 -0
  346. package/plugins/BackgroundPlugin/index.js +255 -0
  347. package/plugins/BackgroundPlugin/index.mjs +255 -0
  348. package/plugins/BackgroundPlugin/typings.d.ts +44 -0
  349. package/plugins/BasePlugin/index.d.ts +1 -1
  350. package/plugins/BasePlugin/index.js +255 -0
  351. package/plugins/BasePlugin/index.mjs +255 -0
  352. package/plugins/CSS2DPlugin/Controller.d.ts +59 -0
  353. package/plugins/CSS2DPlugin/Controller.js +255 -0
  354. package/plugins/CSS2DPlugin/Controller.mjs +255 -0
  355. package/plugins/CSS2DPlugin/index.d.ts +5 -0
  356. package/plugins/CSS2DPlugin/index.js +255 -0
  357. package/plugins/CSS2DPlugin/index.mjs +255 -0
  358. package/plugins/CSS2DPlugin/style.css_raw.js +275 -0
  359. package/plugins/CSS2DPlugin/style.css_raw.mjs +275 -0
  360. package/plugins/CSS2DPlugin/typing.d.ts +31 -0
  361. package/plugins/CSS3DPlugin/Controller.d.ts +64 -0
  362. package/plugins/CSS3DPlugin/Controller.js +255 -0
  363. package/plugins/CSS3DPlugin/Controller.mjs +255 -0
  364. package/plugins/CSS3DPlugin/index.d.ts +5 -0
  365. package/plugins/CSS3DPlugin/index.js +255 -0
  366. package/plugins/CSS3DPlugin/index.mjs +255 -0
  367. package/plugins/CSS3DPlugin/style.css_raw.js +274 -0
  368. package/plugins/CSS3DPlugin/style.css_raw.mjs +274 -0
  369. package/plugins/CSS3DPlugin/typing.d.ts +33 -0
  370. package/plugins/FloorplanPlugin/Controller.d.ts +100 -0
  371. package/plugins/FloorplanPlugin/Controller.js +255 -0
  372. package/plugins/FloorplanPlugin/Controller.mjs +255 -0
  373. package/plugins/FloorplanPlugin/index.d.ts +6 -0
  374. package/plugins/FloorplanPlugin/index.js +255 -0
  375. package/plugins/FloorplanPlugin/index.mjs +255 -0
  376. package/plugins/FloorplanPlugin/render/assets.d.ts +9 -0
  377. package/plugins/FloorplanPlugin/render/assets.js +255 -0
  378. package/plugins/FloorplanPlugin/render/assets.mjs +255 -0
  379. package/plugins/FloorplanPlugin/render/index.d.ts +35 -0
  380. package/plugins/FloorplanPlugin/render/index.js +255 -0
  381. package/plugins/FloorplanPlugin/render/index.mjs +255 -0
  382. package/plugins/FloorplanPlugin/render/isPointInPolygon.d.ts +5 -0
  383. package/plugins/FloorplanPlugin/render/isPointInPolygon.js +255 -0
  384. package/plugins/FloorplanPlugin/render/isPointInPolygon.mjs +255 -0
  385. package/plugins/FloorplanPlugin/render/renderFloor.d.ts +22 -0
  386. package/plugins/FloorplanPlugin/render/renderFloor.js +255 -0
  387. package/plugins/FloorplanPlugin/render/renderFloor.mjs +255 -0
  388. package/plugins/FloorplanPlugin/render/roomLabelVisibility.d.ts +10 -0
  389. package/plugins/FloorplanPlugin/render/roomLabelVisibility.js +255 -0
  390. package/plugins/FloorplanPlugin/render/roomLabelVisibility.mjs +255 -0
  391. package/plugins/FloorplanPlugin/render/style.css_raw.js +585 -0
  392. package/plugins/FloorplanPlugin/render/style.css_raw.mjs +585 -0
  393. package/plugins/FloorplanPlugin/typing.d.ts +156 -0
  394. package/plugins/FloorplanPlugin/typings/floorplanData.d.ts +112 -0
  395. package/plugins/FloorplanPlugin/typings/floorplanJson.d.ts +167 -0
  396. package/plugins/FloorplanPlugin/typings/floorplanServerData.d.ts +78 -0
  397. package/plugins/FloorplanPlugin/typings/index.d.ts +3 -0
  398. package/plugins/FloorplanPlugin/utils/changeMode.d.ts +5 -0
  399. package/plugins/FloorplanPlugin/utils/changeMode.js +255 -0
  400. package/plugins/FloorplanPlugin/utils/changeMode.mjs +255 -0
  401. package/plugins/FloorplanPlugin/utils/changeModelCanvasOpacity.d.ts +6 -0
  402. package/plugins/FloorplanPlugin/utils/changeModelCanvasOpacity.js +255 -0
  403. package/plugins/FloorplanPlugin/utils/changeModelCanvasOpacity.mjs +255 -0
  404. package/plugins/FloorplanPlugin/utils/correctFiveState.d.ts +11 -0
  405. package/plugins/FloorplanPlugin/utils/correctFiveState.js +255 -0
  406. package/plugins/FloorplanPlugin/utils/correctFiveState.mjs +255 -0
  407. package/plugins/FloorplanPlugin/utils/equal.d.ts +9 -0
  408. package/plugins/FloorplanPlugin/utils/equal.js +255 -0
  409. package/plugins/FloorplanPlugin/utils/equal.mjs +255 -0
  410. package/plugins/FloorplanPlugin/utils/filter.d.ts +8 -0
  411. package/plugins/FloorplanPlugin/utils/filter.js +255 -0
  412. package/plugins/FloorplanPlugin/utils/filter.mjs +255 -0
  413. package/plugins/FloorplanPlugin/utils/fiveModelLoad.d.ts +6 -0
  414. package/plugins/FloorplanPlugin/utils/fiveModelLoad.js +255 -0
  415. package/plugins/FloorplanPlugin/utils/fiveModelLoad.mjs +255 -0
  416. package/plugins/FloorplanPlugin/utils/formatData.d.ts +6 -0
  417. package/plugins/FloorplanPlugin/utils/formatData.js +255 -0
  418. package/plugins/FloorplanPlugin/utils/formatData.mjs +255 -0
  419. package/plugins/FloorplanPlugin/utils/formatFloorplanJson.d.ts +20 -0
  420. package/plugins/FloorplanPlugin/utils/formatFloorplanJson.js +255 -0
  421. package/plugins/FloorplanPlugin/utils/formatFloorplanJson.mjs +255 -0
  422. package/plugins/FloorplanPlugin/utils/formatPosition.d.ts +33 -0
  423. package/plugins/FloorplanPlugin/utils/formatPosition.js +255 -0
  424. package/plugins/FloorplanPlugin/utils/formatPosition.mjs +255 -0
  425. package/plugins/FloorplanPlugin/utils/getDistanceFromModel.d.ts +6 -0
  426. package/plugins/FloorplanPlugin/utils/getDistanceFromModel.js +255 -0
  427. package/plugins/FloorplanPlugin/utils/getDistanceFromModel.mjs +255 -0
  428. package/plugins/FloorplanPlugin/utils/getPxmm.d.ts +19 -0
  429. package/plugins/FloorplanPlugin/utils/getPxmm.js +255 -0
  430. package/plugins/FloorplanPlugin/utils/getPxmm.mjs +255 -0
  431. package/plugins/FloorplanPlugin/utils/isTruelyObject.d.ts +4 -0
  432. package/plugins/FloorplanPlugin/utils/isTruelyObject.js +255 -0
  433. package/plugins/FloorplanPlugin/utils/isTruelyObject.mjs +255 -0
  434. package/plugins/FloorplanPlugin/utils/nearlyEqual.d.ts +8 -0
  435. package/plugins/FloorplanPlugin/utils/nearlyEqual.js +255 -0
  436. package/plugins/FloorplanPlugin/utils/nearlyEqual.mjs +255 -0
  437. package/plugins/FloorplanPlugin/utils/polylabel.d.ts +8 -0
  438. package/plugins/FloorplanPlugin/utils/polylabel.js +255 -0
  439. package/plugins/FloorplanPlugin/utils/polylabel.mjs +255 -0
  440. package/plugins/FloorplanPlugin/utils/to.d.ts +5 -0
  441. package/plugins/FloorplanPlugin/utils/to.js +255 -0
  442. package/plugins/FloorplanPlugin/utils/to.mjs +255 -0
  443. package/plugins/GaussianSplattingEntranceAnimationPlugin/Controller.d.ts +1 -1
  444. package/plugins/GaussianSplattingEntranceAnimationPlugin/Controller.js +255 -0
  445. package/plugins/GaussianSplattingEntranceAnimationPlugin/Controller.mjs +255 -0
  446. package/plugins/GaussianSplattingEntranceAnimationPlugin/index.d.ts +1 -1
  447. package/plugins/GaussianSplattingEntranceAnimationPlugin/index.js +255 -0
  448. package/plugins/GaussianSplattingEntranceAnimationPlugin/index.mjs +255 -0
  449. package/plugins/Object3DHelperPlugin/Controller.d.ts +99 -0
  450. package/plugins/Object3DHelperPlugin/Controller.js +255 -0
  451. package/plugins/Object3DHelperPlugin/Controller.mjs +255 -0
  452. package/plugins/Object3DHelperPlugin/Controllers/BaseController.d.ts +139 -0
  453. package/plugins/Object3DHelperPlugin/Controllers/BaseController.js +255 -0
  454. package/plugins/Object3DHelperPlugin/Controllers/BaseController.mjs +255 -0
  455. package/plugins/Object3DHelperPlugin/Controllers/BoundingBoxController.d.ts +16 -0
  456. package/plugins/Object3DHelperPlugin/Controllers/BoundingBoxController.js +255 -0
  457. package/plugins/Object3DHelperPlugin/Controllers/BoundingBoxController.mjs +255 -0
  458. package/plugins/Object3DHelperPlugin/Controllers/MoveController.d.ts +66 -0
  459. package/plugins/Object3DHelperPlugin/Controllers/MoveController.js +255 -0
  460. package/plugins/Object3DHelperPlugin/Controllers/MoveController.mjs +255 -0
  461. package/plugins/Object3DHelperPlugin/Controllers/RotateController.d.ts +61 -0
  462. package/plugins/Object3DHelperPlugin/Controllers/RotateController.js +255 -0
  463. package/plugins/Object3DHelperPlugin/Controllers/RotateController.mjs +255 -0
  464. package/plugins/Object3DHelperPlugin/FiveControllerWrapper.d.ts +17 -0
  465. package/plugins/Object3DHelperPlugin/FiveControllerWrapper.js +255 -0
  466. package/plugins/Object3DHelperPlugin/FiveControllerWrapper.mjs +255 -0
  467. package/plugins/Object3DHelperPlugin/Helper/BaseHelper.d.ts +97 -0
  468. package/plugins/Object3DHelperPlugin/Helper/BaseHelper.js +255 -0
  469. package/plugins/Object3DHelperPlugin/Helper/BaseHelper.mjs +255 -0
  470. package/plugins/Object3DHelperPlugin/Helper/BoundingBoxHelper.d.ts +16 -0
  471. package/plugins/Object3DHelperPlugin/Helper/BoundingBoxHelper.js +255 -0
  472. package/plugins/Object3DHelperPlugin/Helper/BoundingBoxHelper.mjs +255 -0
  473. package/plugins/Object3DHelperPlugin/Helper/MoveHelper.d.ts +37 -0
  474. package/plugins/Object3DHelperPlugin/Helper/MoveHelper.js +255 -0
  475. package/plugins/Object3DHelperPlugin/Helper/MoveHelper.mjs +255 -0
  476. package/plugins/Object3DHelperPlugin/Helper/RotateHelper.d.ts +93 -0
  477. package/plugins/Object3DHelperPlugin/Helper/RotateHelper.js +255 -0
  478. package/plugins/Object3DHelperPlugin/Helper/RotateHelper.mjs +255 -0
  479. package/plugins/Object3DHelperPlugin/constant.d.ts +27 -0
  480. package/plugins/Object3DHelperPlugin/constant.js +255 -0
  481. package/plugins/Object3DHelperPlugin/constant.mjs +255 -0
  482. package/plugins/Object3DHelperPlugin/index.d.ts +6 -0
  483. package/plugins/Object3DHelperPlugin/index.js +255 -0
  484. package/plugins/Object3DHelperPlugin/index.mjs +255 -0
  485. package/plugins/Object3DHelperPlugin/typing.d.ts +143 -0
  486. package/plugins/Object3DHelperPlugin/utils/ArrowGroup.d.ts +22 -0
  487. package/plugins/Object3DHelperPlugin/utils/ArrowGroup.js +255 -0
  488. package/plugins/Object3DHelperPlugin/utils/ArrowGroup.mjs +255 -0
  489. package/plugins/Object3DHelperPlugin/utils/CenterHandle.d.ts +23 -0
  490. package/plugins/Object3DHelperPlugin/utils/CenterHandle.js +255 -0
  491. package/plugins/Object3DHelperPlugin/utils/CenterHandle.mjs +255 -0
  492. package/plugins/Object3DHelperPlugin/utils/PlaneHandle.d.ts +19 -0
  493. package/plugins/Object3DHelperPlugin/utils/PlaneHandle.js +255 -0
  494. package/plugins/Object3DHelperPlugin/utils/PlaneHandle.mjs +255 -0
  495. package/plugins/Object3DHelperPlugin/utils/calculateScaleByCamera.d.ts +5 -0
  496. package/plugins/Object3DHelperPlugin/utils/calculateScaleByCamera.js +255 -0
  497. package/plugins/Object3DHelperPlugin/utils/calculateScaleByCamera.mjs +255 -0
  498. package/plugins/Object3DHelperPlugin/utils/cameraHooks.d.ts +3 -0
  499. package/plugins/Object3DHelperPlugin/utils/cameraHooks.js +255 -0
  500. package/plugins/Object3DHelperPlugin/utils/cameraHooks.mjs +255 -0
  501. package/plugins/Object3DHelperPlugin/utils/direction.d.ts +14 -0
  502. package/plugins/Object3DHelperPlugin/utils/direction.js +255 -0
  503. package/plugins/Object3DHelperPlugin/utils/direction.mjs +255 -0
  504. package/plugins/Object3DHelperPlugin/utils/getMouseRaycaster.d.ts +5 -0
  505. package/plugins/Object3DHelperPlugin/utils/getMouseRaycaster.js +255 -0
  506. package/plugins/Object3DHelperPlugin/utils/getMouseRaycaster.mjs +255 -0
  507. package/plugins/Object3DHelperPlugin/utils/getOrthographicCameraDirection.d.ts +8 -0
  508. package/plugins/Object3DHelperPlugin/utils/getOrthographicCameraDirection.js +255 -0
  509. package/plugins/Object3DHelperPlugin/utils/getOrthographicCameraDirection.mjs +255 -0
  510. package/plugins/Object3DHelperPlugin/utils/setObjectQuaternion.d.ts +8 -0
  511. package/plugins/Object3DHelperPlugin/utils/setObjectQuaternion.js +255 -0
  512. package/plugins/Object3DHelperPlugin/utils/setObjectQuaternion.mjs +255 -0
  513. package/plugins/Object3DHelperPlugin/utils/solidGuide.d.ts +27 -0
  514. package/plugins/Object3DHelperPlugin/utils/solidGuide.js +255 -0
  515. package/plugins/Object3DHelperPlugin/utils/solidGuide.mjs +255 -0
  516. package/plugins/Object3DHelperPlugin/utils/tipsDom.d.ts +8 -0
  517. package/plugins/Object3DHelperPlugin/utils/tipsDom.js +255 -0
  518. package/plugins/Object3DHelperPlugin/utils/tipsDom.mjs +255 -0
  519. package/plugins/PanoAnimePlugin/Controller.d.ts +49 -0
  520. package/plugins/PanoAnimePlugin/Controller.js +255 -0
  521. package/plugins/PanoAnimePlugin/Controller.mjs +255 -0
  522. package/plugins/PanoAnimePlugin/index.d.ts +5 -0
  523. package/plugins/PanoAnimePlugin/index.js +255 -0
  524. package/plugins/PanoAnimePlugin/index.mjs +255 -0
  525. package/plugins/PanoAnimePlugin/typing.d.ts +37 -0
  526. package/plugins/WordPassPlugin/Controller.d.ts +62 -0
  527. package/plugins/WordPassPlugin/Controller.js +255 -0
  528. package/plugins/WordPassPlugin/Controller.mjs +255 -0
  529. package/plugins/WordPassPlugin/hersheyFont.d.ts +11 -0
  530. package/plugins/WordPassPlugin/hersheyFont.js +255 -0
  531. package/plugins/WordPassPlugin/hersheyFont.mjs +255 -0
  532. package/plugins/WordPassPlugin/index.d.ts +7 -0
  533. package/plugins/WordPassPlugin/index.js +255 -0
  534. package/plugins/WordPassPlugin/index.mjs +255 -0
  535. package/plugins/WordPassPlugin/textToStrokeOrderStrokes.d.ts +82 -0
  536. package/plugins/WordPassPlugin/textToStrokeOrderStrokes.js +256 -0
  537. package/plugins/WordPassPlugin/textToStrokeOrderStrokes.mjs +256 -0
  538. package/plugins/WordPassPlugin/typing.d.ts +109 -0
  539. package/plugins/WordPassPlugin/word-pass.d.ts +172 -0
  540. package/plugins/WordPassPlugin/word-pass.js +255 -0
  541. package/plugins/WordPassPlugin/word-pass.mjs +255 -0
  542. package/plugins/index.d.ts +8 -0
  543. package/plugins/index.js +3 -3
  544. package/plugins/index.mjs +3 -287
  545. package/plugins/thirdParty/CSS2DRenderer.d.ts +37 -0
  546. package/plugins/thirdParty/CSS2DRenderer.js +255 -0
  547. package/plugins/thirdParty/CSS2DRenderer.mjs +255 -0
  548. package/plugins/thirdParty/CSS3DRenderer.d.ts +45 -0
  549. package/plugins/thirdParty/CSS3DRenderer.js +255 -0
  550. package/plugins/thirdParty/CSS3DRenderer.mjs +255 -0
  551. package/plugins/thirdParty/OrbitControls.d.ts +78 -0
  552. package/plugins/thirdParty/doctorstrange-model.d.ts +92 -0
  553. package/plugins/thirdParty/doctorstrange-model.js +610 -0
  554. package/plugins/thirdParty/doctorstrange-model.mjs +610 -0
  555. package/plugins/thirdParty/domevents.d.ts +36 -0
  556. package/plugins/thirdParty/domevents.js +255 -0
  557. package/plugins/thirdParty/domevents.mjs +255 -0
  558. package/plugins/utils/absoluteUrl.js +255 -0
  559. package/plugins/utils/absoluteUrl.mjs +255 -0
  560. package/plugins/utils/calculatePath.d.ts +3 -0
  561. package/plugins/utils/calculatePath.js +255 -0
  562. package/plugins/utils/calculatePath.mjs +255 -0
  563. package/plugins/utils/clamp.d.ts +2 -0
  564. package/plugins/utils/clamp.js +255 -0
  565. package/plugins/utils/clamp.mjs +255 -0
  566. package/plugins/utils/uuid.d.ts +2 -0
  567. package/plugins/utils/uuid.js +255 -0
  568. package/plugins/utils/uuid.mjs +255 -0
  569. package/react/context.d.ts +1 -1
  570. package/react/createProvider.d.ts +1 -1
  571. package/react/fiveApp.d.ts +1 -1
  572. package/react/hooks/unsafe__useFiveInstance.d.ts +1 -1
  573. package/react/hooks/useFiveAction.d.ts +1 -1
  574. package/react/hooks/useFiveCurrentObserver.d.ts +1 -1
  575. package/react/hooks/useFiveCurrentState.d.ts +1 -1
  576. package/react/hooks/useFiveEventCallback.d.ts +1 -1
  577. package/react/hooks/useFiveModelEffect.d.ts +1 -1
  578. package/react/hooks/useFiveModelIntersectRaycaster.d.ts +1 -1
  579. package/react/hooks/useFivePlugin.d.ts +1 -1
  580. package/react/hooks/useFiveSceneEffect.d.ts +1 -1
  581. package/react/hooks/useFiveState.d.ts +1 -1
  582. package/react/hooks/useFiveWork.d.ts +1 -1
  583. package/react/index.js +3 -3
  584. package/react/index.mjs +3 -3
  585. package/react/withFive.d.ts +1 -1
  586. package/sticker/geometry.d.ts +3 -0
  587. package/sticker/index.d.ts +68 -0
  588. package/sticker/index.js +255 -0
  589. package/sticker/index.mjs +358 -0
  590. package/umd/five-gltf-loader.js +255 -0
  591. package/umd/five-line.js +322 -0
  592. package/umd/five-plugins.js +817 -3
  593. package/umd/five-react.js +3 -3
  594. package/umd/five-sticker.js +255 -0
  595. package/umd/five-vfx.js +323 -0
  596. package/umd/five.js +472 -412
  597. package/vfx/airflow/airflow.d.ts +18 -0
  598. package/vfx/common/simplex-noise.d.ts +2 -0
  599. package/vfx/frame/frame.d.ts +27 -0
  600. package/vfx/index.d.ts +7 -0
  601. package/vfx/index.js +255 -0
  602. package/vfx/index.mjs +738 -0
  603. package/vfx/particle/instance.d.ts +36 -0
  604. package/vfx/particle/particle.d.ts +119 -0
  605. package/vfx/particle/utils.d.ts +11 -0
  606. package/vfx/particle-gpu/particle.d.ts +75 -0
  607. package/vfx/particle-gpu/utils.d.ts +11 -0
  608. package/vfx/spotLight/spotLight.d.ts +15 -0
  609. package/work-downloader/components/model-3d-tile.d.ts +2 -0
  610. package/work-downloader/components/model.d.ts +3 -0
  611. package/work-downloader/components/observer.d.ts +9 -0
  612. package/work-downloader/download.d.ts +16 -0
  613. package/work-downloader/index.d.ts +2 -0
  614. package/work-downloader/index.js +255 -0
  615. package/work-downloader/index.mjs +595 -0
  616. package/work-downloader/type.d.ts +28 -0
  617. package/work-downloader/utils/download-to-file.d.ts +1 -0
  618. package/work-downloader/utils/image-processing.d.ts +7 -0
  619. package/work-downloader/utils/join-url.d.ts +2 -0
  620. package/work-downloader/utils/log.d.ts +1 -0
  621. package/work-downloader/utils/relative-url.d.ts +1 -0
  622. package/docs/interfaces/index.PBMHDRConfig.html +0 -12
  623. package/five/gaussian-splatting/util/renderData.d.ts +0 -66
  624. package/five/gaussian-splatting/worker/dataWorker.d.ts +0 -1
  625. package/five/three-version-check.d.ts +0 -1
  626. package/five/utils/hdr-data.d.ts +0 -13
  627. package/five/utils/shaderContentFix.d.ts +0 -7
  628. /package/five/{renderer/compute-renderers/shaders/rasterize.d.ts → gaussian-splatting/gpu-sort/shaders/prefixSum.d.ts} +0 -0
package/docs/documents/features_mode.html CHANGED
@@ -1,8 +1,8 @@
1
1
  <!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>features/mode | 如视 Five SDK</title><meta name="description" content="Documentation for 如视 Five SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">如视 Five SDK</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">features/mode</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="mode-模式" class="tsd-anchor-link">Mode (模式)<a href="#mode-模式" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1>
2
2
  <ul>
3
- <li><strong>Summary</strong>: Five 支持多种交互模式，包括全景漫游、模型浏览、VR/XR 等，适用于不同的看房场景。</li>
4
- <li><strong>Schema</strong>: 字符串枚举类型，定义了 6 种交互模式。</li>
5
- <li><strong>Concepts</strong>: Panorama, Mapview, Floorplan, Topview, Model, VR/XR。</li>
3
+ <li><strong>Summary</strong>: Five 支持全景漫游、模型浏览等五种交互模式，适用于不同的看房场景。</li>
4
+ <li><strong>Schema</strong>: 字符串枚举类型，定义了 5 种交互模式。</li>
5
+ <li><strong>Concepts</strong>: Panorama, Mapview, Floorplan, Topview, Model。</li>
6
6
  <li><strong>Examples</strong>: 模式切换与事件监听。</li>
7
7
  </ul>
8
8
  <h2 id="schema" class="tsd-anchor-link">Schema<a href="#schema" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
@@ -10,7 +10,7 @@
10
10
  <p><strong>Definition</strong>: <a href="../../five/application/mode.d.ts">Mode</a>, <a href="../../five/application/fiveInitArgs.d.ts">FiveInitArgs</a></p>
11
11
  </blockquote>
12
12
  <p><strong>Mode</strong> 类型定义如下：</p>
13
- <pre><code class="ts"><span class="hl-3">type</span><span class="hl-1"> </span><span class="hl-7">Mode</span><span class="hl-1"> =</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Panorama&quot;</span><span class="hl-1"> </span><span class="hl-8">// 全景图游走模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Mapview&quot;</span><span class="hl-1"> </span><span class="hl-8">// 模型地图模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Floorplan&quot;</span><span class="hl-1"> </span><span class="hl-8">// 模型户型图模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Topview&quot;</span><span class="hl-1"> </span><span class="hl-8">// 模型平面图模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Model&quot;</span><span class="hl-1"> </span><span class="hl-8">// 模型游走模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;VRPanorama&quot;</span><span class="hl-1"> </span><span class="hl-8">// Cardboard VR 眼镜模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;XRPanorama&quot;</span><span class="hl-1"> </span><span class="hl-8">// WebXR 虚拟现实 VR 眼镜模式</span>
13
+ <pre><code class="ts"><span class="hl-3">type</span><span class="hl-1"> </span><span class="hl-7">Mode</span><span class="hl-1"> =</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Panorama&quot;</span><span class="hl-1"> </span><span class="hl-8">// 全景图游走模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Mapview&quot;</span><span class="hl-1"> </span><span class="hl-8">// 模型地图模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Floorplan&quot;</span><span class="hl-1"> </span><span class="hl-8">// 模型户型图模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Topview&quot;</span><span class="hl-1"> </span><span class="hl-8">// 模型平面图模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;Model&quot;</span><span class="hl-1"> </span><span class="hl-8">// 模型游走模式</span><br/><span class="hl-1"> | </span><span class="hl-9">&quot;VRPanorama&quot;</span><span class="hl-1"> </span><span class="hl-8">// 手机 Cardboard 分屏全景模式（陀螺仪驱动）</span>
14
14
  </code><button type="button">Copy</button></pre>
15
15
 
16
16
  <h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
@@ -40,11 +40,15 @@
40
40
  <li>交互：鼠标拖拽 / Pan手势旋转视角；滚轮 / Pinch手势缩放视场角；点击 / Tap移动到指定位置。</li>
41
41
  </ul>
42
42
  </li>
43
- <li><strong>VRPanorama / XRPanorama</strong>: 适配 VR 设备（如 Google Cardboard, Apple Vision Pro 等）的沉浸式模式。
43
+ <li><strong>XRPanorama (WebXR 头显全景)</strong>: 适用于通过 WebXR 在 VR 头显（Pico / Quest / Apple Vision Pro 等）中沉浸式浏览全景。头显朝向决定看景方向，用手柄 / 注视射线指向并走动到全景点位。
44
44
  <ul>
45
- <li>交互：配合设备手柄或头部追踪，基本交互逻辑同 Panorama。</li>
45
+ <li>交互：头显朝向看景；手柄指向射线（或 Vision Pro 的注视射线）拾取；手柄按键 tap / press 走点与触发事件。</li>
46
+ <li>前置条件：<strong>必须在 <code>new Five({ forceWebGL: true })</code> 时开启 WebGL2 回落后端</strong>（<code>three</code> 的 WebGPU 后端目前不支持 WebXR）；浏览器需支持 WebXR（存在 <code>navigator.xr</code>）。</li>
47
+ <li>进入：<code>five.changeMode('XRPanorama')</code> 或 <code>five.setState({ mode: 'XRPanorama' })</code>，会触发一次 XR 会话权限请求（需在用户手势中调用）。</li>
48
+ <li>退出：监听 <code>xr.session.end</code> 事件后切回其他模式（如 <code>Panorama</code>）。</li>
46
49
  </ul>
47
50
  </li>
51
+ <li><strong>VRPanorama (Cardboard 分屏全景)</strong>: 适用于手机配合 Cardboard 眼镜的分屏体验。使用陀螺仪驱动视角，左右眼分屏渲染。<strong>不需要头显设备，也不需要 <code>forceWebGL</code></strong>。</li>
48
52
  </ul>
49
53
  <h2 id="configuration" class="tsd-anchor-link">Configuration<a href="#configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
50
54
  <p>初始化 <code>new Five()</code> 时，可以通过配置参数对各个模式进行个性化定制。</p>
@@ -69,11 +73,6 @@
69
73
  <pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">ModelConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">moveSpeed</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">defaultFov</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// ... 同 Panorama 基础配置</span><br/><span class="hl-1">}</span>
70
74
  </code><button type="button">Copy</button></pre>
71
75
 
72
- <h3 id="vrpanorama-xrpanorama-vr-模式" class="tsd-anchor-link">VRPanorama / XRPanorama (VR 模式)<a href="#vrpanorama-xrpanorama-vr-模式" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
73
- <p>继承自 Panorama 配置，但移除了俯仰角限制（<code>maxLatitude</code>, <code>minLatitude</code>），因为 VR 模式下视角由设备姿态控制。</p>
74
- <pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">VRPanoramaConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// ... 同 Panorama 基础配置</span><br/><span class="hl-1"> </span><span class="hl-8">// 移除: maxLatitude, minLatitude</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">XRPanoramaConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// ... 同 Panorama 基础配置</span><br/><span class="hl-1"> </span><span class="hl-8">// 移除: maxLatitude, minLatitude</span><br/><span class="hl-1">}</span>
75
- </code><button type="button">Copy</button></pre>
76
-
77
76
  <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
78
77
  <h3 id="快速上手-quick-example" class="tsd-anchor-link">快速上手 (Quick Example)<a href="#快速上手-quick-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
79
78
  <p>使用 <code>setState</code> 切换模式：</p>
@@ -82,7 +81,7 @@
82
81
 
83
82
  <h3 id="初始化配置示例-initialization-configuration-example" class="tsd-anchor-link">初始化配置示例 (Initialization Configuration Example)<a href="#初始化配置示例-initialization-configuration-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
84
83
  <p>在 <code>new Five()</code> 时配置各个模式的默认参数：</p>
85
- <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">PanoCircleMeshSolid</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-8">// 全景模式配置</span><br/><span class="hl-1"> </span><span class="hl-6">panorama:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 限制垂直视角范围</span><br/><span class="hl-1"> </span><span class="hl-6">minFov:</span><span class="hl-1"> </span><span class="hl-11">40</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">maxFov:</span><span class="hl-1"> </span><span class="hl-11">100</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 调整移动速度</span><br/><span class="hl-1"> </span><span class="hl-6">moveSpeed:</span><span class="hl-1"> </span><span class="hl-11">5.0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 自定义地面点位样式 (例如：只显示实心点)</span><br/><span class="hl-1"> </span><span class="hl-5">panoCircleMeshCreator</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">observer</span><span class="hl-1">, </span><span class="hl-6">options</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 这里的 options 包含了 aerialObserverMinHeight 等信息</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PanoCircleMeshSolid</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-11">0x3366ff</span><span class="hl-1">, </span><span class="hl-8">// 自定义颜色</span><br/><span class="hl-1"> </span><span class="hl-6">scale:</span><span class="hl-1"> </span><span class="hl-11">1.2</span><span class="hl-1"> </span><span class="hl-8">// 自定义大小</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-8">// 模型地图配置</span><br/><span class="hl-1"> </span><span class="hl-6">mapview:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 设置默认进入时的视角参数</span><br/><span class="hl-1"> </span><span class="hl-6">defaultLatitude:</span><span class="hl-1"> </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-4">PI</span><span class="hl-1"> / </span><span class="hl-11">3</span><span class="hl-1">, </span><span class="hl-8">// 60度俯视</span><br/><span class="hl-1"> </span><span class="hl-6">defaultDistance:</span><span class="hl-1"> </span><span class="hl-11">200</span><span class="hl-1">, </span><span class="hl-8">// 相机距离</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-8">// 模型漫游配置</span><br/><span class="hl-1"> </span><span class="hl-6">model:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">moveSpeed:</span><span class="hl-1"> </span><span class="hl-11">10.0</span><span class="hl-1"> </span><span class="hl-8">// 模型模式下移动更快</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
84
+ <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">PanoCircleMeshSolid</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five-webgpu&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-8">// 全景模式配置</span><br/><span class="hl-1"> </span><span class="hl-6">panorama:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 限制垂直视角范围</span><br/><span class="hl-1"> </span><span class="hl-6">minFov:</span><span class="hl-1"> </span><span class="hl-11">40</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">maxFov:</span><span class="hl-1"> </span><span class="hl-11">100</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 调整移动速度</span><br/><span class="hl-1"> </span><span class="hl-6">moveSpeed:</span><span class="hl-1"> </span><span class="hl-11">5.0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 自定义地面点位样式 (例如：只显示实心点)</span><br/><span class="hl-1"> </span><span class="hl-5">panoCircleMeshCreator</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">observer</span><span class="hl-1">, </span><span class="hl-6">options</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 这里的 options 包含了 aerialObserverMinHeight 等信息</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PanoCircleMeshSolid</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">color:</span><span class="hl-1"> </span><span class="hl-11">0x3366ff</span><span class="hl-1">, </span><span class="hl-8">// 自定义颜色</span><br/><span class="hl-1"> </span><span class="hl-6">scale:</span><span class="hl-1"> </span><span class="hl-11">1.2</span><span class="hl-1"> </span><span class="hl-8">// 自定义大小</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-8">// 模型地图配置</span><br/><span class="hl-1"> </span><span class="hl-6">mapview:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 设置默认进入时的视角参数</span><br/><span class="hl-1"> </span><span class="hl-6">defaultLatitude:</span><span class="hl-1"> </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-4">PI</span><span class="hl-1"> / </span><span class="hl-11">3</span><span class="hl-1">, </span><span class="hl-8">// 60度俯视</span><br/><span class="hl-1"> </span><span class="hl-6">defaultDistance:</span><span class="hl-1"> </span><span class="hl-11">200</span><span class="hl-1">, </span><span class="hl-8">// 相机距离</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-8">// 模型漫游配置</span><br/><span class="hl-1"> </span><span class="hl-6">model:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">moveSpeed:</span><span class="hl-1"> </span><span class="hl-11">10.0</span><span class="hl-1"> </span><span class="hl-8">// 模型模式下移动更快</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
86
85
  </code><button type="button">Copy</button></pre>
87
86
 
88
87
  <h3 id="动态修改配置-update-configuration" class="tsd-anchor-link">动态修改配置 (Update Configuration)<a href="#动态修改配置-update-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
@@ -92,7 +91,7 @@
92
91
 
93
92
  <h3 id="进阶用法-advanced-usage" class="tsd-anchor-link">进阶用法 (Advanced Usage)<a href="#进阶用法-advanced-usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
94
93
  <p>使用 <code>changeMode</code> 精准控制切换过程，并监听完成时机：</p>
95
- <pre><code class="ts"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// ... 初始化 ...</span><br/><br/><span class="hl-8">// 定义一个切换模式的函数</span><br/><span class="hl-3">async</span><span class="hl-1"> </span><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">switchMode</span><span class="hl-1">(</span><span class="hl-6">targetMode</span><span class="hl-1">: </span><span class="hl-7">Mode</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-10">try</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// changeMode 返回 Promise，resolve 时表示切换动画结束</span><br/><span class="hl-1"> </span><span class="hl-10">await</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">changeMode</span><span class="hl-1">(</span><span class="hl-6">targetMode</span><span class="hl-1">, </span><span class="hl-3">undefined</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1000</span><span class="hl-1"> </span><span class="hl-8">// 动画时长 1000ms</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">`成功切换到 </span><span class="hl-3">${</span><span class="hl-6">targetMode</span><span class="hl-3">}</span><span class="hl-9"> 模式`</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-10">catch</span><span class="hl-1"> (</span><span class="hl-6">error</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">error</span><span class="hl-1">(</span><span class="hl-9">`切换到 </span><span class="hl-3">${</span><span class="hl-6">targetMode</span><span class="hl-3">}</span><span class="hl-9"> 失败`</span><span class="hl-1">, </span><span class="hl-6">error</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">// 绑定按钮事件</span><br/><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">querySelector</span><span class="hl-1">(</span><span class="hl-9">&#39;#btn-map&#39;</span><span class="hl-1">).</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-9">&#39;click&#39;</span><span class="hl-1">, () </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">switchMode</span><span class="hl-1">(</span><span class="hl-9">&#39;Mapview&#39;</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
94
+ <pre><code class="ts"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five-webgpu&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// ... 初始化 ...</span><br/><br/><span class="hl-8">// 定义一个切换模式的函数</span><br/><span class="hl-3">async</span><span class="hl-1"> </span><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">switchMode</span><span class="hl-1">(</span><span class="hl-6">targetMode</span><span class="hl-1">: </span><span class="hl-7">Mode</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-10">try</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// changeMode 返回 Promise，resolve 时表示切换动画结束</span><br/><span class="hl-1"> </span><span class="hl-10">await</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">changeMode</span><span class="hl-1">(</span><span class="hl-6">targetMode</span><span class="hl-1">, </span><span class="hl-3">undefined</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-6">duration:</span><span class="hl-1"> </span><span class="hl-11">1000</span><span class="hl-1"> </span><span class="hl-8">// 动画时长 1000ms</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">`成功切换到 </span><span class="hl-3">${</span><span class="hl-6">targetMode</span><span class="hl-3">}</span><span class="hl-9"> 模式`</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-10">catch</span><span class="hl-1"> (</span><span class="hl-6">error</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">error</span><span class="hl-1">(</span><span class="hl-9">`切换到 </span><span class="hl-3">${</span><span class="hl-6">targetMode</span><span class="hl-3">}</span><span class="hl-9"> 失败`</span><span class="hl-1">, </span><span class="hl-6">error</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">// 绑定按钮事件</span><br/><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">querySelector</span><span class="hl-1">(</span><span class="hl-9">&#39;#btn-map&#39;</span><span class="hl-1">).</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-9">&#39;click&#39;</span><span class="hl-1">, () </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">switchMode</span><span class="hl-1">(</span><span class="hl-9">&#39;Mapview&#39;</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
96
95
  </code><button type="button">Copy</button></pre>
97
96
 
98
97
  <h2 id="common-pitfalls" class="tsd-anchor-link">Common Pitfalls<a href="#common-pitfalls" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
@@ -100,15 +99,31 @@
100
99
  <li><strong>相机类型差异</strong>：<code>Topview</code> 模式使用的是正交相机 (OrthographicCamera)，而其他模式使用的是透视相机 (PerspectiveCamera)。在进行自定义渲染或计算时需注意投影矩阵的差异。</li>
101
100
  <li><strong>切换动画</strong>：<code>setState</code> 触发的切换动画是自动规划的，而 <code>changeMode</code> 允许更细粒度的控制。如果需要精确控制动画时长或回调，请使用 <code>changeMode</code>。</li>
102
101
  <li><strong>全景加载</strong>：<code>Panorama</code> 模式下会自动使用瓦片（tile）方式加载全景图以平衡效率和清晰度，而其他模式（如 <code>Mapview</code>）主要展示模型几何。</li>
102
+ <li><strong><code>XRPanorama</code> 与 <code>VRPanorama</code> 不要混淆</strong>：
103
+ <ul>
104
+ <li><code>VRPanorama</code> 是手机 Cardboard 分屏 + 陀螺仪方案，<strong>不需要头显、不需要 <code>forceWebGL</code></strong>，面向的是把手机塞进纸盒眼镜的场景。</li>
105
+ <li><code>XRPanorama</code> 走的是真正的 WebXR 头显设备（Pico / Quest / Apple Vision Pro 等），<strong>必须 <code>new Five({ forceWebGL: true })</code></strong>，面向的是独立 VR 头显。</li>
106
+ <li>两者的驱动源（陀螺仪 vs WebXR viewer pose）、渲染路径（分屏 quad vs XR projection layer）、输入方式（无手柄 vs 手柄 / 注视射线）都不同，切换前请先确认目标设备。</li>
107
+ </ul>
108
+ </li>
109
+ <li><strong><code>XRPanorama</code> 的能力降级限制</strong>（均源自 <code>forceWebGL</code> 的 WebGL2 回落后端，无法规避）：
110
+ <ul>
111
+ <li><strong>XR 下没有后处理</strong>：XR 模式会整体旁路 <code>FiveRenderer</code> 的后处理链路（合成 / EffectComposer 全屏 pass 都不参与），滤镜、泛光等后处理效果在头显中不生效。</li>
112
+ <li><strong>点云走 NodeMaterial 路径</strong>：<code>forceWebGL</code> 下点云不再走 WebGPU compute 光栅化，而是退回 NodeMaterial 渲染路径。</li>
113
+ <li><strong>3DGS 走 CPU 排序，且 VR 中性能预期需放低</strong>：<code>forceWebGL</code> 下 3DGS 只能走 CPU 排序（<code>RASTER_CPU_SORT</code>）；在 XR 中还叠加了双眼渲染的开销，务必对点数 / 显示做降级，不要期待与 WebGPU 后端相同的帧率。</li>
114
+ </ul>
115
+ </li>
103
116
  </ol>
104
117
  <h2 id="related" class="tsd-anchor-link">Related<a href="#related" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
105
118
  <ul>
106
119
  <li><a href="features_state.html">State - 状态</a>: 了解 Mode 在 State 中的位置及其他状态属性。</li>
107
120
  <li><a href="features_gesture.html">Gesture - 手势</a>: 了解不同模式下的手势交互逻辑。</li>
108
121
  <li><a href="features_event.html">Event - 事件</a>: 了解模式切换等相关事件。</li>
122
+ <li><a href="features_five.html">Five - 核心类</a>: 了解 <code>forceWebGL</code> 初始化参数（进入 <code>XRPanorama</code> 的前置条件）。</li>
123
+ <li>XR 示例：参见 <code>examples/xr</code>（<code>forceWebGL: true</code> + 按钮进入 <code>XRPanorama</code>）。</li>
109
124
  </ul>
110
125
  <hr>
111
- <pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">mode</span><span class="hl-1">, </span><span class="hl-2">state</span><span class="hl-1">, </span><span class="hl-2">interaction</span><span class="hl-1">]</span>
126
+ <pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">mode</span><span class="hl-1">, </span><span class="hl-2">state</span><span class="hl-1">, </span><span class="hl-2">interaction</span><span class="hl-1">, </span><span class="hl-2">xr</span><span class="hl-1">, </span><span class="hl-2">webxr</span><span class="hl-1">, </span><span class="hl-2">vr</span><span class="hl-1">, </span><span class="hl-2">forceWebGL</span><span class="hl-1">, </span><span class="hl-2">XRPanorama</span><span class="hl-1">, </span><span class="hl-2">VRPanorama</span><span class="hl-1">]</span>
112
127
  </code><button type="button">Copy</button></pre>
113
128
 
114
- </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#mode-模式"><span>Mode (模式)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#panorama-全景漫游"><span>Panorama (全景漫游)</span></a></li><li><a href="#mapview-模型地图"><span>Mapview (模型地图)</span></a></li><li><a href="#floorplan-模型户型"><span>Floorplan (模型户型)</span></a></li><li><a href="#topview-模型平面"><span>Topview (模型平面)</span></a></li><li><a href="#model-模型漫游"><span>Model (模型漫游)</span></a></li><li><a href="#vrpanorama-xrpanorama-vr-模式"><span>VR<wbr/>Panorama / <wbr/>XR<wbr/>Panorama (<wbr/>VR 模式)</span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#快速上手-quick-example"><span>快速上手 (<wbr/>Quick <wbr/>Example)</span></a></li><li><a href="#初始化配置示例-initialization-configuration-example"><span>初始化配置示例 (<wbr/>Initialization <wbr/>Configuration <wbr/>Example)</span></a></li><li><a href="#动态修改配置-update-configuration"><span>动态修改配置 (<wbr/>Update <wbr/>Configuration)</span></a></li><li><a href="#进阶用法-advanced-usage"><span>进阶用法 (<wbr/>Advanced <wbr/>Usage)</span></a></li></ul></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
129
+ </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#mode-模式"><span>Mode (模式)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#panorama-全景漫游"><span>Panorama (全景漫游)</span></a></li><li><a href="#mapview-模型地图"><span>Mapview (模型地图)</span></a></li><li><a href="#floorplan-模型户型"><span>Floorplan (模型户型)</span></a></li><li><a href="#topview-模型平面"><span>Topview (模型平面)</span></a></li><li><a href="#model-模型漫游"><span>Model (模型漫游)</span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#快速上手-quick-example"><span>快速上手 (<wbr/>Quick <wbr/>Example)</span></a></li><li><a href="#初始化配置示例-initialization-configuration-example"><span>初始化配置示例 (<wbr/>Initialization <wbr/>Configuration <wbr/>Example)</span></a></li><li><a href="#动态修改配置-update-configuration"><span>动态修改配置 (<wbr/>Update <wbr/>Configuration)</span></a></li><li><a href="#进阶用法-advanced-usage"><span>进阶用法 (<wbr/>Advanced <wbr/>Usage)</span></a></li></ul></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
package/docs/documents/features_model.html CHANGED
@@ -115,7 +115,7 @@ Model 加载完成后，会自动根据 Work 数据生成对应的 ViewLayer，
115
115
  </table>
116
116
  <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
117
117
  <h3 id="获取并操作当前模型" class="tsd-anchor-link">获取并操作当前模型<a href="#获取并操作当前模型" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
118
- <pre><code class="typescript"><span class="hl-8">// 获取当前模型</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">model</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">models</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><br/><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">model</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&quot;模型对应 Work 名称:&quot;</span><span class="hl-1">, </span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-6">work</span><span class="hl-1">.</span><span class="hl-6">name</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&quot;模型是否细化完成:&quot;</span><span class="hl-1">, </span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-6">refined</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 监听模型细化事件</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">&quot;model.refined&quot;</span><span class="hl-1">, () </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&quot;模型高清资源加载完毕&quot;</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
118
+ <pre><code class="typescript"><span class="hl-8">// 获取当前模型</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">model</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">models</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><br/><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">model</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&quot;模型对应 Work 名称:&quot;</span><span class="hl-1">, </span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-6">work</span><span class="hl-1">.</span><span class="hl-6">name</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&quot;模型是否细化完成:&quot;</span><span class="hl-1">, </span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-6">refined</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 监听模型细化事件</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">&quot;models.refined&quot;</span><span class="hl-1">, () </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&quot;模型高清资源加载完毕&quot;</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
119
119
  </code><button type="button">Copy</button></pre>
120
120
 
121
121
  <h3 id="遍历-viewlayer" class="tsd-anchor-link">遍历 ViewLayer<a href="#遍历-viewlayer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
package/docs/documents/features_pano-filter.html CHANGED
@@ -11,7 +11,7 @@
11
11
  <p><strong>Definition</strong>: <a href="../../five/model/materials/pbmMaterial.d.ts">PBMPanoFilter</a></p>
12
12
  </blockquote>
13
13
  <p><code>PBMPanoFilter</code> 类定义了全景图的滤镜参数。所有属性均为对象引用，直接修改其内部属性即可生效。</p>
14
- <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">PBMUpdateable</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">PBMPanoFilter</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">PBMUpdateable</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 对比度控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">contrast</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 对比度偏移 [-1, 1] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">contrastBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 饱和度控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">saturation</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 饱和度偏移 [-1, 1] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">saturationBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 颜色控制 (色温与色调) */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">color</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 色温偏移 [-100, 100] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">temperatureBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 色调偏移 [-100, 100] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">tintBias</span><span class="hl-1">: </span><span class="hl-7">number</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 高光与阴影控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">highlightShadow</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 全局亮度偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">globalBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 高光偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">highlightBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 阴影偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">shadowBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><span class="hl-1">}</span>
14
+ <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">PBMUpdateable</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five-webgpu&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">PBMPanoFilter</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">PBMUpdateable</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 对比度控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">contrast</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 对比度偏移 [-1, 1] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">contrastBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 饱和度控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">saturation</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 饱和度偏移 [-1, 1] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">saturationBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 颜色控制 (色温与色调) */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">color</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 色温偏移 [-100, 100] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">temperatureBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 色调偏移 [-100, 100] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">tintBias</span><span class="hl-1">: </span><span class="hl-7">number</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/** 高光与阴影控制 */</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-3">readonly</span><span class="hl-1"> </span><span class="hl-6">highlightShadow</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 全局亮度偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">globalBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 高光偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">highlightBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 阴影偏移 [-255, 255] (默认 0) */</span><br/><span class="hl-1"> </span><span class="hl-6">shadowBias</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> };</span><br/><span class="hl-1">}</span>
15
15
  </code><button type="button">Copy</button></pre>
16
16
 
17
17
  <h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
@@ -99,12 +99,12 @@
99
99
  <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
100
100
  <h3 id="basic-usage-基础用法" class="tsd-anchor-link">Basic Usage (基础用法)<a href="#basic-usage-基础用法" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
101
101
  <p>创建一个滤镜实例并应用到 Five 场景中。</p>
102
- <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">PBMPanoFilter</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><span class="hl-8">// ... 初始化 five ...</span><br/><br/><span class="hl-8">// 1. 创建滤镜实例</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">panoFilter</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PBMPanoFilter</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 2. 配置参数 (例如：增加一点暖色调和亮度)</span><br/><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">color</span><span class="hl-1">.</span><span class="hl-6">temperatureBias</span><span class="hl-1"> = </span><span class="hl-11">10</span><span class="hl-1">; </span><span class="hl-8">// 暖色</span><br/><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">highlightShadow</span><span class="hl-1">.</span><span class="hl-6">globalBias</span><span class="hl-1"> = </span><span class="hl-11">20</span><span class="hl-1">; </span><span class="hl-8">// 提亮</span><br/><br/><span class="hl-8">// 3. 启用滤镜</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">modelScene</span><span class="hl-1">.</span><span class="hl-6">parameter</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-9">&#39;panoFilter&#39;</span><span class="hl-1">, </span><span class="hl-6">panoFilter</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 4. (可选) 停用滤镜</span><br/><span class="hl-8">// five.modelScene.parameter.reset(&#39;panoFilter&#39;);</span>
102
+ <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">PBMPanoFilter</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five-webgpu&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><span class="hl-8">// ... 初始化 five ...</span><br/><br/><span class="hl-8">// 1. 创建滤镜实例</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">panoFilter</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PBMPanoFilter</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 2. 配置参数 (例如：增加一点暖色调和亮度)</span><br/><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">color</span><span class="hl-1">.</span><span class="hl-6">temperatureBias</span><span class="hl-1"> = </span><span class="hl-11">10</span><span class="hl-1">; </span><span class="hl-8">// 暖色</span><br/><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">highlightShadow</span><span class="hl-1">.</span><span class="hl-6">globalBias</span><span class="hl-1"> = </span><span class="hl-11">20</span><span class="hl-1">; </span><span class="hl-8">// 提亮</span><br/><br/><span class="hl-8">// 3. 启用滤镜</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">modelScene</span><span class="hl-1">.</span><span class="hl-6">parameter</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-9">&#39;panoFilter&#39;</span><span class="hl-1">, </span><span class="hl-6">panoFilter</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 4. (可选) 停用滤镜</span><br/><span class="hl-8">// five.modelScene.parameter.reset(&#39;panoFilter&#39;);</span>
103
103
  </code><button type="button">Copy</button></pre>
104
104
 
105
105
  <h3 id="interactive-adjustment-动态调整" class="tsd-anchor-link">Interactive Adjustment (动态调整)<a href="#interactive-adjustment-动态调整" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
106
106
  <p>滤镜参数支持实时修改，适合制作调节面板。</p>
107
- <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">PBMPanoFilter</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 假设已经有 five 实例</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">panoFilter</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PBMPanoFilter</span><span class="hl-1">();</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">modelScene</span><span class="hl-1">.</span><span class="hl-6">parameter</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-9">&#39;panoFilter&#39;</span><span class="hl-1">, </span><span class="hl-6">panoFilter</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 模拟 UI 绑定的数据对象</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">filterSettings</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">brightness:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">contrast:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-8">// 监听 UI 变化 (示例伪代码)</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onBrightnessChange</span><span class="hl-1">(</span><span class="hl-6">value</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// value range: [-255, 255]</span><br/><span class="hl-1"> </span><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">highlightShadow</span><span class="hl-1">.</span><span class="hl-6">globalBias</span><span class="hl-1"> = </span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 five 没有开启自动渲染 (play: false)，需要手动触发重绘</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onContrastChange</span><span class="hl-1">(</span><span class="hl-6">value</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// value range: [-1, 1]</span><br/><span class="hl-1"> </span><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">contrast</span><span class="hl-1">.</span><span class="hl-6">contrastBias</span><span class="hl-1"> = </span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
107
+ <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">PBMPanoFilter</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five-webgpu&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 假设已经有 five 实例</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">panoFilter</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">PBMPanoFilter</span><span class="hl-1">();</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">modelScene</span><span class="hl-1">.</span><span class="hl-6">parameter</span><span class="hl-1">.</span><span class="hl-5">set</span><span class="hl-1">(</span><span class="hl-9">&#39;panoFilter&#39;</span><span class="hl-1">, </span><span class="hl-6">panoFilter</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 模拟 UI 绑定的数据对象</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">filterSettings</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-6">brightness:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">contrast:</span><span class="hl-1"> </span><span class="hl-11">0</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-8">// 监听 UI 变化 (示例伪代码)</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onBrightnessChange</span><span class="hl-1">(</span><span class="hl-6">value</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// value range: [-255, 255]</span><br/><span class="hl-1"> </span><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">highlightShadow</span><span class="hl-1">.</span><span class="hl-6">globalBias</span><span class="hl-1"> = </span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 five 没有开启自动渲染 (play: false)，需要手动触发重绘</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onContrastChange</span><span class="hl-1">(</span><span class="hl-6">value</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// value range: [-1, 1]</span><br/><span class="hl-1"> </span><span class="hl-6">panoFilter</span><span class="hl-1">.</span><span class="hl-6">contrast</span><span class="hl-1">.</span><span class="hl-6">contrastBias</span><span class="hl-1"> = </span><span class="hl-6">value</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
108
108
  </code><button type="button">Copy</button></pre>
109
109
 
110
110
  <h2 id="related" class="tsd-anchor-link">Related<a href="#related" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
package/docs/documents/features_pano-tile.html CHANGED
@@ -81,11 +81,11 @@
81
81
  </table>
82
82
  <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
83
83
  <h3 id="查看瓦片数据结构" class="tsd-anchor-link">查看瓦片数据结构<a href="#查看瓦片数据结构" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
84
- <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">&quot;loaded&quot;</span><span class="hl-1">, () </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">observer</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">work</span><span class="hl-1">.</span><span class="hl-6">observers</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">observer</span><span class="hl-1"> &amp;&amp; </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1"> &amp;&amp; </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&quot;Available Tiles:&quot;</span><span class="hl-1">, </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">.</span><span class="hl-5">forEach</span><span class="hl-1">(</span><span class="hl-6">tile</span><span class="hl-1"> </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">`Level: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">level</span><span class="hl-3">}</span><span class="hl-9">, Size: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">size</span><span class="hl-3">}</span><span class="hl-9">, Scale: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">scale</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
84
+ <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five-webgpu&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">&quot;loaded&quot;</span><span class="hl-1">, () </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">observer</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">work</span><span class="hl-1">.</span><span class="hl-6">observers</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">observer</span><span class="hl-1"> &amp;&amp; </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1"> &amp;&amp; </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&quot;Available Tiles:&quot;</span><span class="hl-1">, </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">observer</span><span class="hl-1">.</span><span class="hl-6">images</span><span class="hl-1">.</span><span class="hl-6">tiles</span><span class="hl-1">.</span><span class="hl-5">forEach</span><span class="hl-1">(</span><span class="hl-6">tile</span><span class="hl-1"> </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">`Level: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">level</span><span class="hl-3">}</span><span class="hl-9">, Size: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">size</span><span class="hl-3">}</span><span class="hl-9">, Scale: </span><span class="hl-3">${</span><span class="hl-6">tile</span><span class="hl-12">.</span><span class="hl-6">scale</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
85
85
  </code><button type="button">Copy</button></pre>
86
86
 
87
87
  <h3 id="配置瓦片加载策略与图片参数" class="tsd-anchor-link">配置瓦片加载策略与图片参数<a href="#配置瓦片加载策略与图片参数" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
88
- <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-8">// 自定义瓦片层级选择策略</span><br/><span class="hl-1"> </span><span class="hl-5">tileLevelForFov</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">fov</span><span class="hl-1">, </span><span class="hl-6">viewSize</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 简单示例：FOV 小于 60 度时强制使用 Level 2，否则使用 Level 1</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">fov</span><span class="hl-1"> &lt; </span><span class="hl-11">60</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-11">2</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-8">// 限制并发请求数</span><br/><span class="hl-1"> </span><span class="hl-6">tileMaxRequest:</span><span class="hl-1"> </span><span class="hl-11">6</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 图片加载配置</span><br/><span class="hl-1"> </span><span class="hl-6">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 强制请求 WebP 格式的图片</span><br/><span class="hl-1"> </span><span class="hl-6">format:</span><span class="hl-1"> </span><span class="hl-9">&quot;webp&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 图片质量设置为 80%</span><br/><span class="hl-1"> </span><span class="hl-6">quality:</span><span class="hl-1"> </span><span class="hl-11">80</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// (可选) 自定义 URL 转换逻辑</span><br/><span class="hl-1"> </span><span class="hl-8">// transform: (url, options) =&gt; {</span><br/><span class="hl-1"> </span><span class="hl-8">// return url + `?x-oss-process=image/format,webp/quality,q_80`;</span><br/><span class="hl-1"> </span><span class="hl-8">// }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
88
+ <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five-webgpu&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-8">// 自定义瓦片层级选择策略</span><br/><span class="hl-1"> </span><span class="hl-5">tileLevelForFov</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">fov</span><span class="hl-1">, </span><span class="hl-6">viewSize</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 简单示例：FOV 小于 60 度时强制使用 Level 2，否则使用 Level 1</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">fov</span><span class="hl-1"> &lt; </span><span class="hl-11">60</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-11">2</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-8">// 限制并发请求数</span><br/><span class="hl-1"> </span><span class="hl-6">tileMaxRequest:</span><span class="hl-1"> </span><span class="hl-11">6</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 图片加载配置</span><br/><span class="hl-1"> </span><span class="hl-6">imageOptions:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 强制请求 WebP 格式的图片</span><br/><span class="hl-1"> </span><span class="hl-6">format:</span><span class="hl-1"> </span><span class="hl-9">&quot;webp&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// 图片质量设置为 80%</span><br/><span class="hl-1"> </span><span class="hl-6">quality:</span><span class="hl-1"> </span><span class="hl-11">80</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">// (可选) 自定义 URL 转换逻辑</span><br/><span class="hl-1"> </span><span class="hl-8">// transform: (url, options) =&gt; {</span><br/><span class="hl-1"> </span><span class="hl-8">// return url + `?x-oss-process=image/format,webp/quality,q_80`;</span><br/><span class="hl-1"> </span><span class="hl-8">// }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
89
89
  </code><button type="button">Copy</button></pre>
90
90
 
91
91
  <h2 id="related" class="tsd-anchor-link">Related<a href="#related" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
package/docs/documents/features_raycast.html CHANGED
@@ -62,7 +62,7 @@
62
62
  <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
63
63
  <h3 id="基础用法：检测点击位置" class="tsd-anchor-link">基础用法：检测点击位置<a href="#基础用法：检测点击位置" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
64
64
  <p>最常见的场景是将鼠标点击的屏幕坐标转换为 3D 空间中的点。</p>
65
- <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;three&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><span class="hl-8">// ... 初始化 ...</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">raycaster</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Raycaster</span><span class="hl-1">();</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">vector</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 假设 onTap 是点击事件处理函数</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onTap</span><span class="hl-1">(</span><span class="hl-6">event</span><span class="hl-1">: { </span><span class="hl-6">x</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-6">y</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1"> }) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 1. 将屏幕坐标转换为归一化设备坐标 (NDC)</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意：five.getElement() 获取 canvas 容器</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">element</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getElement</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (!</span><span class="hl-6">element</span><span class="hl-1">) </span><span class="hl-10">return</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rect</span><span class="hl-1"> = </span><span class="hl-6">element</span><span class="hl-1">.</span><span class="hl-5">getBoundingClientRect</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> = ((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> - </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> = -((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 2. 设置射线</span><br/><span class="hl-1"> </span><span class="hl-6">raycaster</span><span class="hl-1">.</span><span class="hl-5">setFromCamera</span><span class="hl-1">(</span><span class="hl-6">vector</span><span class="hl-1">, </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 3. 调用 Five 的检测方法</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">intersects</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-5">intersectRaycaster</span><span class="hl-1">(</span><span class="hl-6">raycaster</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">intersects</span><span class="hl-1">.</span><span class="hl-6">length</span><span class="hl-1"> &gt; </span><span class="hl-11">0</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">firstHit</span><span class="hl-1"> = </span><span class="hl-6">intersects</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&#39;点击到了模型:&#39;</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">object</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&#39;交点坐标 (世界坐标):&#39;</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">point</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
65
+ <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;three&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five-webgpu&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><span class="hl-8">// ... 初始化 ...</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">raycaster</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Raycaster</span><span class="hl-1">();</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">vector</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 假设 onTap 是点击事件处理函数</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onTap</span><span class="hl-1">(</span><span class="hl-6">event</span><span class="hl-1">: { </span><span class="hl-6">x</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-6">y</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1"> }) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 1. 将屏幕坐标转换为归一化设备坐标 (NDC)</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意：five.getElement() 获取 canvas 容器</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">element</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getElement</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (!</span><span class="hl-6">element</span><span class="hl-1">) </span><span class="hl-10">return</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rect</span><span class="hl-1"> = </span><span class="hl-6">element</span><span class="hl-1">.</span><span class="hl-5">getBoundingClientRect</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> = ((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> - </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> = -((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 2. 设置射线</span><br/><span class="hl-1"> </span><span class="hl-6">raycaster</span><span class="hl-1">.</span><span class="hl-5">setFromCamera</span><span class="hl-1">(</span><span class="hl-6">vector</span><span class="hl-1">, </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 3. 调用 Five 的检测方法</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">intersects</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-5">intersectRaycaster</span><span class="hl-1">(</span><span class="hl-6">raycaster</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">intersects</span><span class="hl-1">.</span><span class="hl-6">length</span><span class="hl-1"> &gt; </span><span class="hl-11">0</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">firstHit</span><span class="hl-1"> = </span><span class="hl-6">intersects</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&#39;点击到了模型:&#39;</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">object</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">&#39;交点坐标 (世界坐标):&#39;</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">point</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
66
66
  </code><button type="button">Copy</button></pre>
67
67
 
68
68
  <h3 id="性能优化：只获取第一个交点" class="tsd-anchor-link">性能优化：只获取第一个交点<a href="#性能优化：只获取第一个交点" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
package/docs/documents/features_screen-project.html CHANGED
@@ -57,7 +57,7 @@
57
57
  <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
58
58
  <h3 id="1-空间标签-3d-point-to-dom-label" class="tsd-anchor-link">1. 空间标签 (3D Point to DOM Label)<a href="#1-空间标签-3d-point-to-dom-label" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
59
59
  <p>最典型的应用场景是在 3D 场景中的某个物体上方显示一个 HTML 标签。</p>
60
- <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five&quot;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;three/webgpu&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><span class="hl-8">// ... 初始化 five ...</span><br/><br/><span class="hl-8">// 1. 创建标签 DOM 元素</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">label</span><span class="hl-1"> = </span><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">createElement</span><span class="hl-1">(</span><span class="hl-9">&quot;div&quot;</span><span class="hl-1">);</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">textContent</span><span class="hl-1"> = </span><span class="hl-9">&quot;Living Room&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">position</span><span class="hl-1"> = </span><span class="hl-9">&quot;absolute&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">padding</span><span class="hl-1"> = </span><span class="hl-9">&quot;4px 8px&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">background</span><span class="hl-1"> = </span><span class="hl-9">&quot;rgba(0, 0, 0, 0.6)&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">color</span><span class="hl-1"> = </span><span class="hl-9">&quot;white&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">borderRadius</span><span class="hl-1"> = </span><span class="hl-9">&quot;4px&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">pointerEvents</span><span class="hl-1"> = </span><span class="hl-9">&quot;none&quot;</span><span class="hl-1">; </span><span class="hl-8">// 避免阻挡鼠标事件</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">transform</span><span class="hl-1"> = </span><span class="hl-9">&quot;translate(-50%, -100%)&quot;</span><span class="hl-1">; </span><span class="hl-8">// 居中并显示在点上方</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">&quot;none&quot;</span><span class="hl-1">; </span><span class="hl-8">// 默认隐藏</span><br/><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-6">body</span><span class="hl-1">.</span><span class="hl-5">appendChild</span><span class="hl-1">(</span><span class="hl-6">label</span><span class="hl-1">); </span><span class="hl-8">// 添加到 container (注意 container 的定位 context)</span><br/><br/><span class="hl-8">// 2. 定义目标空间坐标 (例如客厅中心)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">targetPosition</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector3</span><span class="hl-1">(</span><span class="hl-11">1.5</span><span class="hl-1">, </span><span class="hl-11">2.0</span><span class="hl-1">, -</span><span class="hl-11">3.0</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 3. 在每一帧渲染时更新标签位置</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">&quot;render.prepare&quot;</span><span class="hl-1">, () </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 计算屏幕坐标</span><br/><span class="hl-1"> </span><span class="hl-8">// 参数2: false 表示不检测遮挡 (性能更好)；true 表示如果被墙挡住则隐藏</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">screenPos</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">project2d</span><span class="hl-1">(</span><span class="hl-6">targetPosition</span><span class="hl-1">, </span><span class="hl-3">true</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">screenPos</span><span class="hl-1"> === </span><span class="hl-3">null</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果返回 null，说明点在相机背面，或者被遮挡（如果开启了 testModel）</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">&quot;none&quot;</span><span class="hl-1">;</span><br/><span class="hl-1"> } </span><span class="hl-10">else</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">&quot;block&quot;</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// 更新 DOM 位置</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意：screenPos 是相对于 Canvas 的坐标。</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 Canvas 占满全屏，直接使用即可。</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 Canvas 有偏移，需加上 Canvas 的 offset。</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">screenPos</span><span class="hl-12">.</span><span class="hl-6">x</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">screenPos</span><span class="hl-12">.</span><span class="hl-6">y</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
60
+ <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1">, </span><span class="hl-6">Mode</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;@realsee/five-webgpu&quot;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&quot;three/webgpu&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><span class="hl-8">// ... 初始化 five ...</span><br/><br/><span class="hl-8">// 1. 创建标签 DOM 元素</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">label</span><span class="hl-1"> = </span><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">createElement</span><span class="hl-1">(</span><span class="hl-9">&quot;div&quot;</span><span class="hl-1">);</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">textContent</span><span class="hl-1"> = </span><span class="hl-9">&quot;Living Room&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">position</span><span class="hl-1"> = </span><span class="hl-9">&quot;absolute&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">padding</span><span class="hl-1"> = </span><span class="hl-9">&quot;4px 8px&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">background</span><span class="hl-1"> = </span><span class="hl-9">&quot;rgba(0, 0, 0, 0.6)&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">color</span><span class="hl-1"> = </span><span class="hl-9">&quot;white&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">borderRadius</span><span class="hl-1"> = </span><span class="hl-9">&quot;4px&quot;</span><span class="hl-1">;</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">pointerEvents</span><span class="hl-1"> = </span><span class="hl-9">&quot;none&quot;</span><span class="hl-1">; </span><span class="hl-8">// 避免阻挡鼠标事件</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">transform</span><span class="hl-1"> = </span><span class="hl-9">&quot;translate(-50%, -100%)&quot;</span><span class="hl-1">; </span><span class="hl-8">// 居中并显示在点上方</span><br/><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">&quot;none&quot;</span><span class="hl-1">; </span><span class="hl-8">// 默认隐藏</span><br/><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-6">body</span><span class="hl-1">.</span><span class="hl-5">appendChild</span><span class="hl-1">(</span><span class="hl-6">label</span><span class="hl-1">); </span><span class="hl-8">// 添加到 container (注意 container 的定位 context)</span><br/><br/><span class="hl-8">// 2. 定义目标空间坐标 (例如客厅中心)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">targetPosition</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector3</span><span class="hl-1">(</span><span class="hl-11">1.5</span><span class="hl-1">, </span><span class="hl-11">2.0</span><span class="hl-1">, -</span><span class="hl-11">3.0</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 3. 在每一帧渲染时更新标签位置</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">&quot;render.prepare&quot;</span><span class="hl-1">, () </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 计算屏幕坐标</span><br/><span class="hl-1"> </span><span class="hl-8">// 参数2: false 表示不检测遮挡 (性能更好)；true 表示如果被墙挡住则隐藏</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">screenPos</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">project2d</span><span class="hl-1">(</span><span class="hl-6">targetPosition</span><span class="hl-1">, </span><span class="hl-3">true</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">screenPos</span><span class="hl-1"> === </span><span class="hl-3">null</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果返回 null，说明点在相机背面，或者被遮挡（如果开启了 testModel）</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">&quot;none&quot;</span><span class="hl-1">;</span><br/><span class="hl-1"> } </span><span class="hl-10">else</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">display</span><span class="hl-1"> = </span><span class="hl-9">&quot;block&quot;</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// 更新 DOM 位置</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意：screenPos 是相对于 Canvas 的坐标。</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 Canvas 占满全屏，直接使用即可。</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果 Canvas 有偏移，需加上 Canvas 的 offset。</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">screenPos</span><span class="hl-12">.</span><span class="hl-6">x</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">label</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">screenPos</span><span class="hl-12">.</span><span class="hl-6">y</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
61
61
  </code><button type="button">Copy</button></pre>
62
62
 
63
63
  <h3 id="2-屏幕点击转射线-screen-to-ray" class="tsd-anchor-link">2. 屏幕点击转射线 (Screen to Ray)<a href="#2-屏幕点击转射线-screen-to-ray" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>