@realsee/five 6.8.0-alpha.0 → 6.8.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.
- package/AGENTS_READ_ME.md +4 -0
- package/AI_CONTEXT.md +4 -0
- package/README.md +50 -389
- package/ai_guides/README.md +122 -0
- package/ai_guides/ai-doc-guidelines.md +102 -0
- package/ai_guides/api.md +274 -0
- package/ai_guides/features/3dtile.md +172 -0
- package/ai_guides/features/camera-animation.md +205 -0
- package/ai_guides/features/clipper.md +135 -0
- package/ai_guides/features/coordinate-system.md +128 -0
- package/ai_guides/features/event.md +154 -0
- package/ai_guides/features/five.md +184 -0
- package/ai_guides/features/flowing-light-2d-pass.md +438 -0
- package/ai_guides/features/flowing-light-3d-pass.md +420 -0
- package/ai_guides/features/gaussian-blur-pass.md +202 -0
- package/ai_guides/features/gesture.md +180 -0
- package/ai_guides/features/get-screen-pixels.md +182 -0
- package/ai_guides/features/image-options.md +164 -0
- package/ai_guides/features/load-external-model.md +350 -0
- package/ai_guides/features/load-progress.md +140 -0
- package/ai_guides/features/material.md +151 -0
- package/ai_guides/features/mode.md +269 -0
- package/ai_guides/features/model.md +186 -0
- package/ai_guides/features/move-pano-effect.md +145 -0
- package/ai_guides/features/multi-work.md +146 -0
- package/ai_guides/features/pano-tile.md +132 -0
- package/ai_guides/features/pano-uv.md +131 -0
- package/ai_guides/features/parameter.md +153 -0
- package/ai_guides/features/plugin.md +210 -0
- package/ai_guides/features/postprocessing.md +259 -0
- package/ai_guides/features/raycast.md +175 -0
- package/ai_guides/features/request-proxy.md +112 -0
- package/ai_guides/features/screen-project.md +165 -0
- package/ai_guides/features/state.md +101 -0
- package/ai_guides/features/view-layer.md +187 -0
- package/ai_guides/features/work.md +303 -0
- package/ai_guides/glossary.md +93 -0
- package/ai_guides/intro.md +23 -0
- package/ai_guides/quick-start.md +69 -0
- package/ai_guides/release_notes/6.6.md +86 -0
- package/ai_guides/release_notes/6.7.md +401 -0
- package/ai_guides/release_notes/6.8.md +90 -0
- package/ai_guides/support.md +23 -0
- package/ai_guides/template.md +70 -0
- package/docs/00_FOR_AI_AGENTS.md +11 -0
- package/docs/README.md +11 -0
- package/docs/assets/hierarchy.js +1 -1
- package/docs/assets/highlight.css +29 -29
- package/docs/assets/icons.js +1 -1
- package/docs/assets/icons.svg +1 -1
- package/docs/assets/main.js +2 -2
- package/docs/assets/navigation.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/assets/style.css +3 -3
- package/docs/classes/five.AdaptiveLuminancePass.html +2 -2
- package/docs/classes/five.AnimationFrameLoop.html +5 -5
- package/docs/classes/five.BoundingMesh.html +1 -1
- package/docs/classes/five.Camera.html +5 -5
- package/docs/classes/five.EffectComposer.html +1 -1
- package/docs/classes/five.EyeDomeLightingPass.html +2 -2
- package/docs/classes/five.Five.html +134 -134
- package/docs/classes/five.FivePass.html +2 -2
- package/docs/classes/five.FullScreenQuad.html +2 -2
- package/docs/classes/five.InternalWebGLRenderer.html +1 -1
- package/docs/classes/five.Model.html +36 -36
- package/docs/classes/five.ModelScene.html +12 -12
- package/docs/classes/five.Motion.html +1 -1
- package/docs/classes/five.NetworkSubscribe.html +23 -23
- package/docs/classes/five.PBMContainer.html +3 -3
- package/docs/classes/five.PBMGSObject.html +24 -0
- package/docs/classes/five.PBMGroup.html +1 -1
- package/docs/classes/five.PBMMesh.html +1 -1
- package/docs/classes/five.PBMMeshMaterial.html +15 -6
- package/docs/classes/five.PBMPointCloud.html +1 -1
- package/docs/classes/five.PBMPointCloudMaterial.html +3 -3
- package/docs/classes/five.PBMSkinnedMesh.html +1 -1
- package/docs/classes/five.PanoCircleMesh.html +4 -4
- package/docs/classes/five.PanoCircleMeshCustom.html +4 -4
- package/docs/classes/five.PanoCircleMeshSolid.html +4 -4
- package/docs/classes/five.Parameter.html +55 -51
- package/docs/classes/five.Scene.html +3 -3
- package/docs/classes/five.Subscribe.html +26 -25
- package/docs/classes/five.Tile.html +1 -1
- package/docs/classes/five.Tile3D.html +30 -26
- package/docs/classes/five.TileNode.html +2 -2
- package/docs/classes/five.Tileset.html +11 -11
- package/docs/classes/five.Trajectory.html +1 -1
- package/docs/classes/five.TrajectoryNode.html +1 -1
- package/docs/classes/five.Work.html +19 -19
- package/docs/classes/five.WorkResolvedObserver.html +41 -16
- package/docs/classes/gltf-loader.DDSLoader.html +1 -1
- package/docs/classes/gltf-loader.DRACOLoader.html +1 -1
- package/docs/classes/gltf-loader.GLTFLoader.html +6 -6
- package/docs/classes/gltf-loader.GLTFObject.html +1 -1
- package/docs/classes/gltf-loader.THREEGLTFLoader.html +1 -1
- package/docs/classes/line.Line.html +1 -1
- package/docs/classes/line.LineGeometry.html +4 -4
- package/docs/classes/line.LineMaterial.html +1 -1
- package/docs/classes/line.LineSegmentsGeometry.html +4 -4
- package/docs/classes/line.THREE_Line2.html +1 -1
- package/docs/classes/line.THREE_LineSegments2.html +1 -1
- package/docs/classes/plugins.BasePlugin.Controller.html +16 -16
- package/docs/classes/plugins.RoundedBoxGeometry.html +1 -1
- package/docs/classes/react.Store.html +12 -11
- package/docs/classes/sticker.Sticker.html +11 -11
- package/docs/classes/vfx.Airflow.html +1 -1
- package/docs/classes/vfx.Flame.html +1 -1
- package/docs/classes/vfx.Particle.html +31 -31
- package/docs/classes/vfx.ParticleGPU.html +7 -7
- package/docs/classes/vfx.SpotLight.html +1 -1
- package/docs/documents/README.html +138 -0
- package/docs/documents/ai-doc-guidelines.html +117 -0
- package/docs/documents/api.html +337 -0
- package/docs/documents/features_3dtile.html +216 -0
- package/docs/documents/features_camera-animation.html +157 -0
- package/docs/documents/features_clipper.html +80 -0
- package/docs/documents/features_coordinate-system.html +127 -0
- package/docs/documents/features_event.html +104 -0
- package/docs/documents/features_five.html +147 -0
- package/docs/documents/features_flowing-light-2d-pass.html +356 -0
- package/docs/documents/features_flowing-light-3d-pass.html +351 -0
- package/docs/documents/features_gaussian-blur-pass.html +182 -0
- package/docs/documents/features_gesture.html +120 -0
- package/docs/documents/features_get-screen-pixels.html +88 -0
- package/docs/documents/features_image-options.html +108 -0
- package/docs/documents/features_load-external-model.html +600 -0
- package/docs/documents/features_load-progress.html +110 -0
- package/docs/documents/features_material.html +334 -0
- package/docs/documents/features_mode.html +114 -0
- package/docs/documents/features_model.html +141 -0
- package/docs/documents/features_move-pano-effect.html +110 -0
- package/docs/documents/features_multi-work.html +97 -0
- package/docs/documents/features_pano-tile.html +100 -0
- package/docs/documents/features_pano-uv.html +82 -0
- package/docs/documents/features_parameter.html +101 -0
- package/docs/documents/features_plugin.html +105 -0
- package/docs/documents/features_postprocessing.html +109 -0
- package/docs/documents/features_raycast.html +98 -0
- package/docs/documents/features_request-proxy.html +78 -0
- package/docs/documents/features_screen-project.html +112 -0
- package/docs/documents/features_state.html +71 -0
- package/docs/documents/features_view-layer.html +158 -0
- package/docs/documents/features_work.html +129 -0
- package/docs/documents/glossary.html +94 -0
- package/docs/documents/intro.html +24 -0
- package/docs/documents/quick-start.html +32 -0
- package/docs/documents/release_notes_6.6.html +79 -0
- package/docs/documents/release_notes_6.7.html +209 -0
- package/docs/documents/release_notes_6.8.html +103 -0
- package/docs/documents/support.html +49 -0
- package/docs/documents/template.html +80 -0
- package/docs/functions/five.coordinatesToVector.html +1 -1
- package/docs/functions/five.defaultImageURLTransform.html +3 -3
- package/docs/functions/five.headingToLongitude.html +1 -1
- package/docs/functions/five.loadAt3d.html +1 -1
- package/docs/functions/five.loadB3dm.html +1 -1
- package/docs/functions/five.loadDome.html +1 -1
- package/docs/functions/five.loadDomez.html +1 -1
- package/docs/functions/five.loadFbx.html +1 -1
- package/docs/functions/five.loadGltf.html +1 -1
- package/docs/functions/five.loadPbm.html +1 -1
- package/docs/functions/five.loadPly.html +1 -1
- package/docs/functions/five.loadPnts.html +1 -1
- package/docs/functions/five.loadSplat.html +1 -0
- package/docs/functions/five.loadSpz.html +1 -0
- package/docs/functions/five.loadX3p.html +1 -1
- package/docs/functions/five.longitudeToHeading.html +1 -1
- package/docs/functions/five.parseWork.html +3 -3
- package/docs/functions/five.vectorToCoordinates.html +1 -1
- package/docs/functions/react.createFiveProvider.html +2 -2
- package/docs/functions/react.createStore.html +8 -8
- package/docs/functions/react.useFiveAction.html +6 -6
- package/docs/functions/react.useFiveCameraDirection.html +1 -1
- package/docs/functions/react.useFiveCameraRaycaster.html +1 -1
- package/docs/functions/react.useFiveCurrentObserver.html +1 -1
- package/docs/functions/react.useFiveCurrentState.html +1 -1
- package/docs/functions/react.useFiveEventCallback.html +1 -1
- package/docs/functions/react.useFiveFloor.html +1 -1
- package/docs/functions/react.useFiveHelper.html +1 -1
- package/docs/functions/react.useFiveModelIntersectRaycaster.html +2 -2
- package/docs/functions/react.useFiveModelReadyState.html +1 -1
- package/docs/functions/react.useFiveProject2d.html +2 -2
- package/docs/functions/react.useFiveSceneEffect.html +1 -1
- package/docs/functions/react.useFiveWork.html +2 -2
- package/docs/functions/vue.useFiveAction.html +8 -8
- package/docs/functions/vue.useFiveCameraDirection.html +1 -1
- package/docs/functions/vue.useFiveCameraRaycaster.html +1 -1
- package/docs/functions/vue.useFiveCurrentObserver.html +1 -1
- package/docs/functions/vue.useFiveCurrentState.html +1 -1
- package/docs/functions/vue.useFiveEventCallback.html +1 -1
- package/docs/functions/vue.useFiveFloor.html +1 -1
- package/docs/functions/vue.useFiveHelper.html +1 -1
- package/docs/functions/vue.useFiveModel.html +1 -1
- package/docs/functions/vue.useFiveModelBounding.html +1 -1
- package/docs/functions/vue.useFiveModelIntersectRaycaster.html +2 -2
- package/docs/functions/vue.useFiveModelReadyState.html +1 -1
- package/docs/functions/vue.useFiveProject2d.html +2 -2
- package/docs/functions/vue.useFiveScene.html +1 -1
- package/docs/functions/vue.useFiveState.html +1 -1
- package/docs/functions/vue.useFiveWorks.html +4 -4
- package/docs/hierarchy.html +1 -1
- package/docs/index.html +115 -187
- package/docs/interfaces/five.AddableObject.html +5 -5
- package/docs/interfaces/five.AjaxOptions.html +5 -5
- package/docs/interfaces/five.BaseEvent.html +2 -2
- package/docs/interfaces/five.EventCallback.html +198 -194
- package/docs/interfaces/five.FiveInitArgs.html +18 -18
- package/docs/interfaces/five.FiveLoadOptions.html +3 -3
- package/docs/interfaces/five.FloorplanControllerCustomInitArgs.html +8 -8
- package/docs/interfaces/five.GestureEvent.html +2 -2
- package/docs/interfaces/five.ImageOptions.html +11 -11
- package/docs/interfaces/five.ImageURLOptions.html +8 -8
- package/docs/interfaces/five.IntersectEvent.html +2 -2
- package/docs/interfaces/five.IntersectMesh.html +1 -1
- package/docs/interfaces/five.IntersectMeshInterface.html +1 -1
- package/docs/interfaces/five.Intersection.html +4 -3
- package/docs/interfaces/five.LooseWorkWithExtrinsics.html +7 -7
- package/docs/interfaces/five.MapviewControllerCustomInitArgs.html +8 -8
- package/docs/interfaces/five.ModeChangeEvent.html +2 -2
- package/docs/interfaces/five.ModelControllerCustomInitArgs.html +9 -9
- package/docs/interfaces/five.ModelEvent.html +2 -2
- package/docs/interfaces/five.ModelOptions.html +3 -3
- package/docs/interfaces/five.ModelSceneEvent.html +2 -2
- package/docs/interfaces/five.ModelTileEvent.html +8 -0
- package/docs/interfaces/five.MovePanoOptions.html +10 -10
- package/docs/interfaces/five.NetworkAbortError.html +1 -1
- package/docs/interfaces/five.NetworkFirbiddenError.html +1 -1
- package/docs/interfaces/five.NetworkOptions.html +4 -4
- package/docs/interfaces/five.NetworkProxyError.html +1 -1
- package/docs/interfaces/five.NetworkResourceEvent.html +2 -2
- package/docs/interfaces/five.NetworkResponseError.html +1 -1
- package/docs/interfaces/five.NetworkTimeoutError.html +1 -1
- package/docs/interfaces/five.ObjectEvent.html +2 -2
- package/docs/interfaces/five.PBMMaterial.html +1 -1
- package/docs/interfaces/five.PBMMeshMaterialParameters.html +1 -1
- package/docs/interfaces/five.PBMPanoDepth.html +4 -4
- package/docs/interfaces/five.PBMPanoPicture.html +5 -5
- package/docs/interfaces/five.PBMPointCloudMaterialParameters.html +1 -1
- package/docs/interfaces/five.PanoCircleMeshInterface.html +4 -4
- package/docs/interfaces/five.PanoEvent.html +2 -2
- package/docs/interfaces/five.PanoTextureEvent.html +2 -2
- package/docs/interfaces/five.PanoramaControllerCustomInitArgs.html +15 -15
- package/docs/interfaces/five.PanoramaLikeControllerCustomInitArgs.html +9 -9
- package/docs/interfaces/five.ParameterMaterialValue.html +40 -36
- package/docs/interfaces/five.ParameterTilesetValue.html +15 -15
- package/docs/interfaces/five.ParameterValue.html +54 -50
- package/docs/interfaces/five.Pass.html +1 -1
- package/docs/interfaces/five.Pose.html +6 -7
- package/docs/interfaces/five.RenderEvent.html +2 -2
- package/docs/interfaces/five.ResolvedParameterValue.html +54 -50
- package/docs/interfaces/five.SplatData.html +10 -0
- package/docs/interfaces/five.State.html +9 -9
- package/docs/interfaces/five.StateEvent.html +2 -2
- package/docs/interfaces/five.TextureOptions.html +12 -12
- package/docs/interfaces/five.Tile3DOptions.html +2 -2
- package/docs/interfaces/five.TileCoordinateSystem.html +2 -2
- package/docs/interfaces/five.TilesetHeader.html +12 -12
- package/docs/interfaces/five.TopviewControllerCustomInitArgs.html +7 -7
- package/docs/interfaces/five.VRPanoramaControllerCustomInitArgs.html +13 -13
- package/docs/interfaces/five.ViewLayer.html +30 -26
- package/docs/interfaces/five.Viewport.html +4 -4
- package/docs/interfaces/five.WorkCubeImage.html +1 -1
- package/docs/interfaces/five.WorkImage.html +4 -4
- package/docs/interfaces/five.WorkInitial.html +8 -8
- package/docs/interfaces/five.WorkModel.html +8 -8
- package/docs/interfaces/five.WorkModelLayer.html +6 -6
- package/docs/interfaces/five.WorkObserver.html +41 -16
- package/docs/interfaces/five.WorkTile.html +4 -4
- package/docs/interfaces/five.WorkVideo.html +4 -4
- package/docs/interfaces/five.WorksEvent.html +2 -2
- package/docs/interfaces/five.XRControllerEvent.html +2 -2
- package/docs/interfaces/five.XRGestureEvent.html +2 -2
- package/docs/interfaces/five.XRPanoramaControllerCustomInitArgs.html +13 -13
- package/docs/interfaces/five.XRSessionEvent.html +2 -2
- package/docs/interfaces/plugins.BackgroundPluginController.html +11 -11
- package/docs/interfaces/plugins.BackgroundPluginType.EventMap.html +8 -8
- package/docs/interfaces/plugins.BasePlugin.BaseOptions.html +1 -1
- package/docs/interfaces/plugins.BasePlugin.Config.html +2 -2
- package/docs/interfaces/plugins.BasePlugin.State.html +4 -4
- package/docs/interfaces/plugins.BasePlugin.StateChangeParams.html +3 -3
- package/docs/interfaces/plugins.DynamicPathLinePluginController.html +45 -45
- package/docs/interfaces/plugins.DynamicPathLinePluginType.Config.html +18 -18
- package/docs/interfaces/plugins.DynamicPathLinePluginType.EventMap.html +13 -13
- package/docs/interfaces/plugins.DynamicPathLinePluginType.Params.html +2 -2
- package/docs/interfaces/plugins.DynamicPathLinePluginType.PathConfig.html +14 -14
- package/docs/interfaces/plugins.DynamicPathLinePluginType.State.html +5 -5
- package/docs/interfaces/plugins.ItemMaskController.html +12 -12
- package/docs/interfaces/plugins.ItemMaskPluginType.Config.html +1 -1
- package/docs/interfaces/plugins.ItemMaskPluginType.EventMap.html +5 -5
- package/docs/interfaces/plugins.ItemMaskPluginType.Params.html +1 -1
- package/docs/interfaces/plugins.ItemMaskPluginType.State.html +7 -7
- package/docs/interfaces/plugins.OrientationPluginController.html +12 -12
- package/docs/interfaces/plugins.OrientationPluginType.Config.html +1 -1
- package/docs/interfaces/plugins.OrientationPluginType.EventMap.html +5 -5
- package/docs/interfaces/plugins.OrientationPluginType.Params.html +1 -1
- package/docs/interfaces/plugins.OrientationPluginType.State.html +5 -5
- package/docs/interfaces/plugins.PanoAnimeController.html +14 -14
- package/docs/interfaces/plugins.PanoAnimePluginType.Config.html +1 -1
- package/docs/interfaces/plugins.PanoAnimePluginType.ConfigChangeEvent.html +3 -3
- package/docs/interfaces/plugins.PanoAnimePluginType.EventMap.html +6 -6
- package/docs/interfaces/plugins.PanoAnimePluginType.Params.html +1 -1
- package/docs/interfaces/plugins.PanoAnimePluginType.State.html +4 -4
- package/docs/interfaces/plugins.PluginTemplateType.Config.html +1 -1
- package/docs/interfaces/plugins.PluginTemplateType.EventMap.html +5 -5
- package/docs/interfaces/plugins.PluginTemplateType.Params.html +1 -1
- package/docs/interfaces/plugins.PluginTemplateType.State.html +4 -4
- package/docs/interfaces/plugins.TrajectoryController.html +30 -15
- package/docs/interfaces/react.FiveActionReactCallbacks.html +23 -23
- package/docs/interfaces/react.FiveCanvasProps.html +2 -2
- package/docs/interfaces/react.FiveInjectionTypes.html +76 -76
- package/docs/interfaces/sticker.IntersectionLike.html +2 -2
- package/docs/interfaces/vfx.ParticleArgs.html +26 -26
- package/docs/interfaces/vfx.ParticleGPUArgs.html +30 -30
- package/docs/interfaces/vue.FiveActionVueCallbacks.html +23 -23
- package/docs/modules/five.html +1 -1
- package/docs/modules.html +1 -1
- package/docs/types/five.ControllerEventTypes.html +32 -32
- package/docs/types/five.EventTypes.html +26 -24
- package/docs/types/five.FivePlugin.html +2 -2
- package/docs/types/five.FivePluginInit.html +1 -1
- package/docs/types/five.FivePluginInstance.html +1 -1
- package/docs/types/five.LegacyEventType.html +142 -142
- package/docs/types/five.LoadResultType.html +2 -2
- package/docs/types/five.Mode.html +1 -1
- package/docs/types/five.MotionCircle.html +1 -1
- package/docs/types/five.NetworkProgressCallback.html +1 -1
- package/docs/types/five.ParseOptions.html +6 -6
- package/docs/types/plugins.BasePlugin.EventMap.html +5 -5
- package/docs/types/plugins.DynamicPathLinePluginType.PluginData.html +1 -1
- package/docs/types/plugins.DynamicPathLinePluginType.ServerData.html +1 -1
- package/docs/variables/react.FiveCanvas.html +1 -1
- package/docs/variables/react.useFiveScene.html +1 -1
- package/docs/variables/vue.FiveCanvas.html +1 -1
- package/docs/variables/vue.FiveProvider.html +1 -1
- package/five/application/analysis.d.ts +40 -0
- package/five/application/controllers.d.ts +41 -0
- package/five/application/events-legacy.d.ts +454 -0
- package/five/application/events.d.ts +69 -0
- package/five/application/five.d.ts +518 -0
- package/five/application/fiveInitArgs.d.ts +176 -0
- package/five/application/fiveLoadOptions.d.ts +21 -0
- package/five/application/generateDefaultVideoElement.d.ts +2 -0
- package/five/application/getViewportScale.d.ts +2 -0
- package/five/application/initLights.d.ts +3 -0
- package/five/application/mode.d.ts +28 -0
- package/five/application/renderPoweredByRealsee.d.ts +3 -0
- package/five/assets/cardboard-png-data-url.d.ts +2 -0
- package/five/assets/gradient-png-data-url.d.ts +2 -0
- package/five/assets/loading-png-data-url.d.ts +2 -0
- package/five/assets/phone-png-data-url.d.ts +2 -0
- package/five/assets/realsee-pmg-data-url.d.ts +2 -0
- package/five/bvh/bvhMath.d.ts +33 -0
- package/five/bvh/bvhMesh.d.ts +7 -0
- package/five/bvh/bvhNode.d.ts +29 -0
- package/five/bvh/bvhObject.d.ts +18 -0
- package/five/bvh/bvhPoints.d.ts +6 -0
- package/five/bvh/index.d.ts +10 -0
- package/five/bvh/worker.d.ts +35 -0
- package/five/cardboard/helper.d.ts +2 -0
- package/five/cardboard/index.d.ts +13 -0
- package/five/cardboard/sensor.d.ts +158 -0
- package/five/certificates/hardware.d.ts +1 -0
- package/five/controllers/base.d.ts +166 -0
- package/five/controllers/events.d.ts +69 -0
- package/five/controllers/floorplan.d.ts +119 -0
- package/five/controllers/mapview.d.ts +138 -0
- package/five/controllers/model.d.ts +57 -0
- package/five/controllers/panorama.d.ts +143 -0
- package/five/controllers/panoramaLike.d.ts +87 -0
- package/five/controllers/topview.d.ts +42 -0
- package/five/controllers/vrPanorama.d.ts +56 -0
- package/five/controllers/xrPanorama.d.ts +81 -0
- package/five/core/camera.d.ts +65 -0
- package/five/core/internalWebGLRenderer.d.ts +14 -0
- package/five/core/panoVideo.d.ts +18 -0
- package/five/core/scene.d.ts +10 -0
- package/five/core/tiling.d.ts +43 -0
- package/five/declare.d.ts +2 -1
- package/five/gs/util/renderData.d.ts +32 -0
- package/five/gs/wasm/data.d.ts +20 -0
- package/five/gs/wasm/sort.d.ts +18 -0
- package/five/gs/worker/dataWorker.d.ts +1 -0
- package/five/gs/worker/sortWorker.d.ts +1 -0
- package/five/index.d.ts +57 -4582
- package/five/index.js +605 -92
- package/five/index.mjs +9661 -7537
- package/five/meshes/boundingMesh.d.ts +12 -0
- package/five/meshes/intersectMesh.d.ts +8 -0
- package/five/meshes/panoCircleMesh.d.ts +35 -0
- package/five/meshes/panoCircleMeshCustom.d.ts +40 -0
- package/five/meshes/panoCircleMeshSolid.d.ts +34 -0
- package/five/meshes/panoSphereMesh.d.ts +27 -0
- package/five/model/helpers/coordinate-transform.d.ts +3 -0
- package/five/model/helpers/ellipsoid-coordinates.d.ts +14 -0
- package/five/model/helpers/get-edges-by-sphere.d.ts +8 -0
- package/five/model/helpers/get-recommend-tile3d-parameters.d.ts +8 -0
- package/five/model/index.d.ts +70 -0
- package/five/model/intersection.d.ts +18 -0
- package/five/model/loaders/at3d.d.ts +12 -0
- package/five/model/loaders/b3dm.d.ts +9 -0
- package/five/model/loaders/dome.d.ts +22 -0
- package/five/model/loaders/domez.d.ts +11 -0
- package/five/model/loaders/fbx.d.ts +8 -0
- package/five/model/loaders/glTF-helpers/extensions/CESIUM_RTC.d.ts +9 -0
- package/five/model/loaders/glTF-helpers/extensions/EXT_meshopt_compression.d.ts +8 -0
- package/five/model/loaders/glTF-helpers/extensions/EXT_texture_webp.d.ts +11 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_animation_pointer.d.ts +6 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_binary_glTF.d.ts +25 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_draco_mesh_compression.d.ts +11 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_gaussian_splatting_compression_spz.d.ts +9 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_materials_clearcoat.d.ts +10 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_materials_emissive_strength.d.ts +10 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_materials_sheen.d.ts +10 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_materials_transmission.d.ts +10 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_materials_unlit.d.ts +10 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_mesh_quantization.d.ts +6 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_node_visibility.d.ts +10 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_texture_basisu.d.ts +9 -0
- package/five/model/loaders/glTF-helpers/extensions/KHR_texture_transform.d.ts +10 -0
- package/five/model/loaders/glTF-helpers/extensions/REALSEE_materials_lightmap.d.ts +7 -0
- package/five/model/loaders/glTF-helpers/extensions/base.d.ts +24 -0
- package/five/model/loaders/glTF-helpers/glTF.d.ts +713 -0
- package/five/model/loaders/glTF-helpers/index.d.ts +47 -0
- package/five/model/loaders/glTF-helpers/parser.d.ts +114 -0
- package/five/model/loaders/glTF-helpers/type.d.ts +14 -0
- package/five/model/loaders/gltf.d.ts +10 -0
- package/five/model/loaders/obj.d.ts +9 -0
- package/five/model/loaders/pbm.d.ts +26 -0
- package/five/model/loaders/ply.d.ts +24 -0
- package/five/model/loaders/pnts.d.ts +8 -0
- package/five/model/loaders/protobuf/dome.d.ts +540 -0
- package/five/model/loaders/protobuf/pbm.d.ts +203 -0
- package/five/model/loaders/shared.d.ts +16 -0
- package/five/model/loaders/splat.d.ts +8 -0
- package/five/model/loaders/spz.d.ts +14 -0
- package/five/model/loaders/tile3d-helpers/feature-table.d.ts +15 -0
- package/five/model/loaders/tile3d-helpers/gl-type.d.ts +20 -0
- package/five/model/loaders/tile3d-helpers/parse-gltf-array-buffer.d.ts +2 -0
- package/five/model/loaders/tile3d-helpers/parse-header.d.ts +2 -0
- package/five/model/loaders/tile3d-helpers/parse-point-cloud-attributes.d.ts +2 -0
- package/five/model/loaders/tile3d-helpers/parse-point-cloud-attributes.worker.d.ts +6 -0
- package/five/model/loaders/tile3d-helpers/parse-table.d.ts +3 -0
- package/five/model/loaders/tile3d-helpers/tile3d-type.d.ts +35 -0
- package/five/model/loaders/x3p.d.ts +22 -0
- package/five/model/materials/pbmMaterial.d.ts +87 -0
- package/five/model/materials/pbmMeshMaterial.d.ts +124 -0
- package/five/model/materials/pbmPointCloudMaterial.d.ts +72 -0
- package/five/model/model-scene.d.ts +172 -0
- package/five/model/model.d.ts +209 -0
- package/five/model/objects/pbmContainer.d.ts +28 -0
- package/five/model/objects/pbmGSObject.d.ts +40 -0
- package/five/model/objects/pbmGSRenderMesh.d.ts +32 -0
- package/five/model/objects/pbmGroup.d.ts +8 -0
- package/five/model/objects/pbmMesh.d.ts +10 -0
- package/five/model/objects/pbmPointCloud.d.ts +7 -0
- package/five/model/parameter.d.ts +136 -0
- package/five/model/shaders/pbm_gaussian_splatting/fragment.d.ts +2 -0
- package/five/model/shaders/pbm_gaussian_splatting/vertex.d.ts +2 -0
- package/five/model/shaders/pbm_mesh_basic/fragment.d.ts +2 -0
- package/five/model/shaders/pbm_mesh_basic/vertex.d.ts +2 -0
- package/five/model/shaders/pbm_mesh_none/fragment.d.ts +2 -0
- package/five/model/shaders/pbm_mesh_none/vertex.d.ts +2 -0
- package/five/model/shaders/pbm_mesh_phong/fragment.d.ts +2 -0
- package/five/model/shaders/pbm_mesh_phong/vertex.d.ts +2 -0
- package/five/model/shaders/pbm_mesh_standard/fragment.d.ts +2 -0
- package/five/model/shaders/pbm_mesh_standard/vertex.d.ts +2 -0
- package/five/model/shaders/pbm_pointcloud/fragment.d.ts +2 -0
- package/five/model/shaders/pbm_pointcloud/vertex.d.ts +2 -0
- package/five/model/tile3d/header.d.ts +88 -0
- package/five/model/tile3d/index.d.ts +214 -0
- package/five/model/tile3d/tile-cache.d.ts +18 -0
- package/five/model/tile3d/tile-content.d.ts +10 -0
- package/five/model/tile3d/tile-node.d.ts +24 -0
- package/five/model/tile3d/tile-request-scheduler.d.ts +17 -0
- package/five/model/tile3d/tile.d.ts +79 -0
- package/five/model/tile3d/tileset-base-traverser.d.ts +59 -0
- package/five/model/tile3d/tileset-most-detail-traverser.d.ts +14 -0
- package/five/model/tile3d/tileset-normal-traverser.d.ts +15 -0
- package/five/model/tile3d/tileset-skip-traverser.d.ts +60 -0
- package/five/model/tile3d/tileset.d.ts +69 -0
- package/five/model/tile3d/trajectory-content.d.ts +9 -0
- package/five/model/tile3d/trajectory-node.d.ts +15 -0
- package/five/model/tile3d/trajectory.d.ts +30 -0
- package/five/model/tile3d/types.d.ts +33 -0
- package/five/model/view-layer.d.ts +20 -0
- package/five/renderer/five-renderer.d.ts +17 -0
- package/five/renderer/index.d.ts +3 -0
- package/five/renderer/postprocessing/composer.d.ts +37 -0
- package/five/renderer/postprocessing/index.d.ts +7 -0
- package/five/renderer/postprocessing/passes/adaptive-luminance-pass.d.ts +15 -0
- package/five/renderer/postprocessing/passes/eye-dome-lighting-pass.d.ts +14 -0
- package/five/renderer/postprocessing/passes/flowing-light-2d-pass.d.ts +36 -0
- package/five/renderer/postprocessing/passes/flowing-light-3d-pass.d.ts +36 -0
- package/five/renderer/postprocessing/passes/gaussian-blur-pass.d.ts +12 -0
- package/five/renderer/postprocessing/passes/pass.d.ts +38 -0
- package/five/renderer/scene-renderers/point-cloud-high-quality-scene-renderer.d.ts +11 -0
- package/five/renderer/scene-renderers/scene-renderer.d.ts +9 -0
- package/five/renderer/scene-renderers/ssaa-scene-renderer.d.ts +15 -0
- package/five/renderer/tools/full-screen-quad.d.ts +15 -0
- package/five/renderer/tools/render-full-screen-depth.d.ts +2 -0
- package/five/renderer/tools/render-full-screen.d.ts +2 -0
- package/five/texture/imageBitmap.d.ts +13 -0
- package/five/texture/initTexture.d.ts +3 -0
- package/five/texture/loader.d.ts +39 -0
- package/five/thirdparty/fflate.d.ts +1407 -0
- package/five/thirdparty/hammer.d.ts +259 -0
- package/five/thirdparty/jsrsasign.d.ts +768 -0
- package/five/thirdparty/meshopt_decoder.d.ts +15 -0
- package/five/three-version-check.d.ts +1 -0
- package/five/types/addableObject.d.ts +12 -0
- package/five/types/cube.d.ts +1 -0
- package/five/types/gestureInput.d.ts +24 -0
- package/five/types/imageOptions.d.ts +20 -0
- package/five/types/intersectMeshInterface.d.ts +8 -0
- package/five/types/movePanoEffect.d.ts +13 -0
- package/five/types/movePanoOptions.d.ts +35 -0
- package/five/types/panoCircleMeshInterface.d.ts +34 -0
- package/five/types/plugin.d.ts +25 -0
- package/five/types/pose.d.ts +17 -0
- package/five/types/state.d.ts +20 -0
- package/five/types/viewport.d.ts +22 -0
- package/five/utils/ajax.d.ts +66 -0
- package/five/utils/animationFrameLoop.d.ts +45 -0
- package/five/utils/array.d.ts +31 -0
- package/five/utils/asyncTaskQueue.d.ts +8 -0
- package/five/utils/bufferGeometry.d.ts +33 -0
- package/five/utils/calculateProgress.d.ts +39 -0
- package/five/utils/calculateThreeMouse.d.ts +13 -0
- package/five/utils/canplayVideo.d.ts +2 -0
- package/five/utils/clamp.d.ts +2 -0
- package/five/utils/clock.d.ts +17 -0
- package/five/utils/createSymbol.d.ts +5 -0
- package/five/utils/decodeText.d.ts +2 -0
- package/five/utils/deepEqual.d.ts +2 -0
- package/five/utils/deepFreeze.d.ts +2 -0
- package/five/utils/defineProperty.d.ts +9 -0
- package/five/utils/detector.d.ts +14 -0
- package/five/utils/distance.d.ts +10 -0
- package/five/utils/draco.d.ts +26 -0
- package/five/utils/easing.d.ts +63 -0
- package/five/utils/event.d.ts +149 -0
- package/five/utils/formatRad.d.ts +7 -0
- package/five/utils/imageSupport.d.ts +6 -0
- package/five/utils/imageURL.d.ts +42 -0
- package/five/utils/isEmptyObject.d.ts +2 -0
- package/five/utils/isNil.d.ts +6 -0
- package/five/utils/isNumber.d.ts +2 -0
- package/five/utils/isPowerOfTwo.d.ts +2 -0
- package/five/utils/isPromise.d.ts +2 -0
- package/five/utils/isSimilar.d.ts +6 -0
- package/five/utils/json.d.ts +7 -0
- package/five/utils/ktx2.d.ts +30 -0
- package/five/utils/lzma/index.d.ts +2 -0
- package/five/utils/lzma/lzma.d.ts +3 -0
- package/five/utils/lzma/lzmaWASM.d.ts +2 -0
- package/five/utils/lzma/lzmaWorker.d.ts +14 -0
- package/five/utils/memoryUsage.d.ts +29 -0
- package/five/utils/motion.d.ts +38 -0
- package/five/utils/noop.d.ts +6 -0
- package/five/utils/now.d.ts +7 -0
- package/five/utils/pano.d.ts +9 -0
- package/five/utils/pick.d.ts +3 -0
- package/five/utils/poseUtils.d.ts +5 -0
- package/five/utils/renderCubeTextureToCubeRenderTarget.d.ts +3 -0
- package/five/utils/renderDepth.d.ts +2 -0
- package/five/utils/renderTexturesToCubeRenderTarget.d.ts +10 -0
- package/five/utils/requestPermission.d.ts +3 -0
- package/five/utils/shaderContentFix.d.ts +7 -0
- package/five/utils/shaderMaterial.d.ts +20 -0
- package/five/utils/stateUtils.d.ts +5 -0
- package/five/utils/string-pattern.d.ts +8 -0
- package/five/utils/subscribe.d.ts +67 -0
- package/five/utils/tileCube.d.ts +19 -0
- package/five/utils/toFastProperties.d.ts +1 -0
- package/five/utils/typedCache.d.ts +10 -0
- package/five/utils/uniform.d.ts +15 -0
- package/five/utils/url.d.ts +35 -0
- package/five/utils/uuid.d.ts +5 -0
- package/five/utils/values.d.ts +2 -0
- package/five/utils/vectorCoordinates.d.ts +29 -0
- package/five/utils/volume.d.ts +111 -0
- package/five/utils/webglError.d.ts +7 -0
- package/five/utils/worker.d.ts +26 -0
- package/five/webxr/XRControllerModelFactory.d.ts +28 -0
- package/five/webxr/motionHelper.d.ts +68 -0
- package/five/webxr/xrButton.d.ts +4 -0
- package/five/webxr/xrController.d.ts +24 -0
- package/five/webxr/xrManager.d.ts +84 -0
- package/five/work/_ALLOW_HOST.d.ts +2 -0
- package/five/work/index.d.ts +6 -0
- package/five/work/keychain.d.ts +5 -0
- package/five/work/looseWorkType.d.ts +121 -0
- package/five/work/verify.d.ts +7 -0
- package/five/work/work.d.ts +236 -0
- package/five/work/workFetcher.d.ts +4 -0
- package/five/work/workJson.d.ts +3 -0
- package/five/work/workJsonType.d.ts +73 -0
- package/five/work/workObserverUtils.d.ts +36 -0
- package/five/work/workParser.d.ts +6 -0
- package/five/work/workResolvedObserver.d.ts +12 -0
- package/five/work/workVerify.d.ts +2 -0
- package/five/work/works.d.ts +10 -0
- package/gltf-loader/gltf-object.d.ts +17 -0
- package/gltf-loader/index.d.ts +60 -160
- package/gltf-loader/index.js +3 -3
- package/gltf-loader/index.mjs +3 -3
- package/gltf-loader/thirdparty/DDSLoader.d.ts +23 -0
- package/gltf-loader/thirdparty/DRACOLoader.d.ts +18 -0
- package/gltf-loader/thirdparty/GLTFLoader.d.ts +59 -0
- package/line/circle_png.d.ts +1 -0
- package/line/index.d.ts +19 -69
- package/line/index.js +3 -3
- package/line/index.mjs +3 -3
- package/line/utils/Line2.d.ts +7 -0
- package/line/utils/LineGeometry.d.ts +10 -0
- package/line/utils/LineMaterial.d.ts +20 -0
- package/line/utils/LineSegments2.d.ts +11 -0
- package/line/utils/LineSegmentsGeometry.d.ts +15 -0
- package/llms.txt +65 -0
- package/package.json +10 -1
- package/plugins/BackgroundPlugin/Controller.d.ts +20 -0
- package/plugins/BackgroundPlugin/index.d.ts +5 -0
- package/plugins/BackgroundPlugin/typings.d.ts +44 -0
- package/plugins/BasePlugin/index.d.ts +119 -0
- package/plugins/DynamicPathLinePlugin/Controller.d.ts +167 -0
- package/plugins/DynamicPathLinePlugin/index.d.ts +5 -0
- package/plugins/DynamicPathLinePlugin/line2/Line2.d.ts +7 -0
- package/plugins/DynamicPathLinePlugin/line2/LineGeometry.d.ts +10 -0
- package/plugins/DynamicPathLinePlugin/line2/LineMaterial.d.ts +17 -0
- package/plugins/DynamicPathLinePlugin/line2/LineSegments2.d.ts +11 -0
- package/plugins/DynamicPathLinePlugin/line2/LineSegmentsGeometry.d.ts +15 -0
- package/plugins/DynamicPathLinePlugin/typing.d.ts +129 -0
- package/plugins/DynamicPathLinePlugin/typings.d.ts +72 -0
- package/plugins/ItemMaskPlugin/Controller.d.ts +48 -0
- package/plugins/ItemMaskPlugin/index.d.ts +5 -0
- package/plugins/ItemMaskPlugin/typing.d.ts +58 -0
- package/plugins/OrientationPlugin/Controller.d.ts +82 -0
- package/plugins/OrientationPlugin/RoundedBoxGeometry.d.ts +11 -0
- package/plugins/OrientationPlugin/index.d.ts +6 -0
- package/plugins/OrientationPlugin/typing.d.ts +25 -0
- package/plugins/PanoAnimePlugin/Controller.d.ts +46 -0
- package/plugins/PanoAnimePlugin/index.d.ts +5 -0
- package/plugins/PanoAnimePlugin/typing.d.ts +37 -0
- package/plugins/PluginTemplate/Controller.d.ts +27 -0
- package/plugins/PluginTemplate/index.d.ts +5 -0
- package/plugins/PluginTemplate/typing.d.ts +21 -0
- package/plugins/TrajectoryPlugin/Controller.d.ts +85 -0
- package/plugins/TrajectoryPlugin/index.d.ts +6 -0
- package/plugins/TrajectoryPlugin/typing.d.ts +25 -0
- package/plugins/index.d.ts +9 -1078
- package/plugins/index.js +17 -17
- package/plugins/index.mjs +1518 -1370
- package/plugins/thirdParty/CSS3DRenderer.d.ts +32 -0
- package/plugins/thirdParty/OrbitControls.d.ts +78 -0
- package/plugins/utils/absoluteUrl.d.ts +5 -0
- package/plugins/utils/clamp.d.ts +2 -0
- package/plugins/utils/loadImage.d.ts +1 -0
- package/plugins/utils/motion.d.ts +38 -0
- package/plugins/utils/now.d.ts +6 -0
- package/plugins/utils/uuid.d.ts +5 -0
- package/react/canvas.d.ts +19 -0
- package/react/context.d.ts +11 -0
- package/react/createProvider.d.ts +95 -0
- package/react/createStore.d.ts +144 -0
- package/react/hooks/unsafe__useFiveInstance.d.ts +9 -0
- package/react/hooks/useFiveAction.d.ts +147 -0
- package/react/hooks/useFiveCameraDirection.d.ts +7 -0
- package/react/hooks/useFiveCameraRaycaster.d.ts +7 -0
- package/react/hooks/useFiveCurrentObserver.d.ts +11 -0
- package/react/hooks/useFiveCurrentState.d.ts +15 -0
- package/react/hooks/useFiveEventCallback.d.ts +12 -0
- package/react/hooks/useFiveFloor.d.ts +15 -0
- package/react/hooks/useFiveHelper.d.ts +14 -0
- package/react/hooks/useFiveModelBounding.d.ts +5 -0
- package/react/hooks/useFiveModelEffect.d.ts +14 -0
- package/react/hooks/useFiveModelIntersectRaycaster.d.ts +22 -0
- package/react/hooks/useFiveModelReadyState.d.ts +8 -0
- package/react/hooks/useFiveProject2d.d.ts +20 -0
- package/react/hooks/useFiveSceneEffect.d.ts +21 -0
- package/react/hooks/useFiveState.d.ts +6 -0
- package/react/hooks/useFiveWork.d.ts +29 -0
- package/react/index.d.ts +24 -830
- package/react/index.js +2 -2
- package/react/index.mjs +2 -2
- package/react/rendererPool.d.ts +7 -0
- package/react/withFive.d.ts +213 -0
- package/shader-lib/EvenessPlane/index.d.ts +10 -0
- package/shader-lib/PointCloudExpand/index.d.ts +59 -0
- package/shader-lib/PolygonCuter/index.d.ts +52 -0
- package/shader-lib/PolygonCuter/worker.d.ts +14 -0
- package/shader-lib/ShineModel/index.d.ts +7 -0
- package/shader-lib/SweepModel/index.d.ts +7 -0
- package/shader-lib/index.d.ts +5 -86
- package/shader-lib/index.js +2 -2
- package/shader-lib/index.mjs +2 -2
- package/sticker/geometry.d.ts +3 -0
- package/sticker/index.d.ts +68 -71
- package/sticker/index.js +3 -3
- package/sticker/index.mjs +3 -3
- package/umd/five-gltf-loader.js +3 -3
- package/umd/five-line.js +3 -3
- package/umd/five-plugins.js +16 -16
- package/umd/five-react.js +2 -2
- package/umd/five-shader-lib.js +2 -2
- package/umd/five-sticker.js +3 -3
- package/umd/five-vfx.js +2 -2
- package/umd/five-vue.js +2 -2
- package/umd/five.js +605 -92
- package/vfx/airflow/airflow.d.ts +18 -0
- package/vfx/airflow/fragment-shader.d.ts +2 -0
- package/vfx/airflow/vertex-shader.d.ts +2 -0
- package/vfx/common/scale-shader.d.ts +2 -0
- package/vfx/common/simplex-noise-shader.d.ts +2 -0
- package/vfx/frame/fragment-shader.d.ts +2 -0
- package/vfx/frame/frame.d.ts +22 -0
- package/vfx/frame/vertex-shader.d.ts +2 -0
- package/vfx/index.d.ts +7 -363
- package/vfx/index.js +2 -2
- package/vfx/index.mjs +2 -2
- package/vfx/particle/fragment-shader.d.ts +2 -0
- package/vfx/particle/instance.d.ts +36 -0
- package/vfx/particle/particle.d.ts +205 -0
- package/vfx/particle/utils.d.ts +11 -0
- package/vfx/particle/vertex-shader.d.ts +2 -0
- package/vfx/particle-gpu/fragment-shader.d.ts +2 -0
- package/vfx/particle-gpu/instance.d.ts +36 -0
- package/vfx/particle-gpu/particle.d.ts +95 -0
- package/vfx/particle-gpu/utils.d.ts +11 -0
- package/vfx/particle-gpu/vertex-shader.d.ts +2 -0
- package/vfx/spotLight/fragment-shader.d.ts +2 -0
- package/vfx/spotLight/spotLight.d.ts +15 -0
- package/vfx/spotLight/vertex-shader.d.ts +2 -0
- package/vue/context.d.ts +7 -0
- package/vue/hooks/FiveCanvas.d.ts +36 -0
- package/vue/hooks/FiveProvider.d.ts +35 -0
- package/vue/hooks/unsafe__useFiveInject.d.ts +9 -0
- package/vue/hooks/useFiveAction.d.ts +178 -0
- package/vue/hooks/useFiveCameraDirection.d.ts +8 -0
- package/vue/hooks/useFiveCameraRaycaster.d.ts +8 -0
- package/vue/hooks/useFiveCurrentObserver.d.ts +12 -0
- package/vue/hooks/useFiveCurrentState.d.ts +16 -0
- package/vue/hooks/useFiveEventCallback.d.ts +11 -0
- package/vue/hooks/useFiveFloor.d.ts +16 -0
- package/vue/hooks/useFiveHelper.d.ts +15 -0
- package/vue/hooks/useFiveModel.d.ts +7 -0
- package/vue/hooks/useFiveModelBounding.d.ts +7 -0
- package/vue/hooks/useFiveModelIntersectRaycaster.d.ts +23 -0
- package/vue/hooks/useFiveModelReadyState.d.ts +9 -0
- package/vue/hooks/useFiveProject2d.d.ts +26 -0
- package/vue/hooks/useFiveScene.d.ts +6 -0
- package/vue/hooks/useFiveState.d.ts +16 -0
- package/vue/hooks/useFiveWork.d.ts +30 -0
- package/vue/index.d.ts +23 -467
- package/vue/index.js +2 -2
- package/vue/index.mjs +2 -2
- package/vue/rendererPool.d.ts +10 -0
- package/work-downloader/components/model-3d-tile.d.ts +2 -0
- package/work-downloader/components/model.d.ts +3 -0
- package/work-downloader/components/observer.d.ts +7 -0
- package/work-downloader/download.d.ts +16 -0
- package/work-downloader/index.d.ts +2 -33
- package/work-downloader/index.js +2 -2
- package/work-downloader/index.mjs +2 -2
- package/work-downloader/type.d.ts +28 -0
- package/work-downloader/utils/download-to-file.d.ts +1 -0
- package/work-downloader/utils/image-processing.d.ts +7 -0
- package/work-downloader/utils/join-url.d.ts +2 -0
- package/work-downloader/utils/log.d.ts +1 -0
- package/work-downloader/utils/relative-url.d.ts +1 -0
- package/docs/documents/coordinate.html +0 -9
- package/docs/documents/five.FivePlugin.plugins.html +0 -77
- package/docs/documents/five.Pose.coordinate.html +0 -9
- package/docs/documents/plugins.html +0 -77
- package/docs/documents/react-component.html +0 -32
- package/docs/media/coordinate.jpg +0 -0
|
@@ -0,0 +1,112 @@
|
|
|
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/screen-project | 如视 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/screen-project</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="screen-space-projection-屏幕与空间坐标转换" class="tsd-anchor-link">Screen & Space Projection (屏幕与空间坐标转换)<a href="#screen-space-projection-屏幕与空间坐标转换" 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
|
+
<ul>
|
|
3
|
+
<li><strong>Summary</strong>: 详解屏幕二维坐标与三维空间坐标/射线之间的相互转换关系,以及如何在 DOM 层与 3D 场景进行联动(如显示标签)。</li>
|
|
4
|
+
<li><strong>Schema</strong>: <code>five.project2d</code> 接口定义。</li>
|
|
5
|
+
<li><strong>Concepts</strong>: World Space, Screen Space, NDC, Raycasting.</li>
|
|
6
|
+
<li><strong>Examples</strong>: 空间点位转屏幕坐标 (标签功能)、屏幕坐标转空间射线。</li>
|
|
7
|
+
</ul>
|
|
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>
|
|
9
|
+
<blockquote>
|
|
10
|
+
<p><strong>Definition</strong>: <a href="../../five/application/five.d.ts">Five</a></p>
|
|
11
|
+
</blockquote>
|
|
12
|
+
<pre><code class="typescript"><span class="hl-8">// defined in Five class</span><br/><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">Five</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">/**</span><br/><span class="hl-8"> * 计算三维坐标对应到屏幕的二维坐标</span><br/><span class="hl-8"> * </span><span class="hl-3">@param</span><span class="hl-8"> </span><span class="hl-6">vector</span><span class="hl-8"> - 三维空间坐标 (World Space)</span><br/><span class="hl-8"> * </span><span class="hl-3">@param</span><span class="hl-8"> </span><span class="hl-6">testModel</span><span class="hl-8"> - 是否进行模型遮挡检测 (默认 false)。如果为 true,且该点被模型遮挡,则返回 null。</span><br/><span class="hl-8"> * </span><span class="hl-3">@returns</span><span class="hl-8"> 二维屏幕坐标 (相对于 Canvas 左上角) 或 null (如果点在视野外或被遮挡)</span><br/><span class="hl-8"> */</span><br/><span class="hl-1"> </span><span class="hl-5">project2d</span><span class="hl-1">(</span><span class="hl-6">vector</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</span><span class="hl-1">, </span><span class="hl-6">testModel</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">): </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector2</span><span class="hl-1"> | </span><span class="hl-7">null</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
13
|
+
</code><button type="button">Copy</button></pre>
|
|
14
|
+
|
|
15
|
+
<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>
|
|
16
|
+
<h3 id="1-坐标系转换流程" class="tsd-anchor-link">1. 坐标系转换流程<a href="#1-坐标系转换流程" 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>
|
|
17
|
+
<p>在 Five (Three.js) 中,坐标转换通常遵循以下流程:</p>
|
|
18
|
+
<ul>
|
|
19
|
+
<li><strong>World Space (世界坐标)</strong>: 三维场景中的绝对坐标 (x, y, z),单位通常为米。</li>
|
|
20
|
+
<li><strong>Camera Space (相机坐标)</strong>: 相对于相机的坐标。</li>
|
|
21
|
+
<li><strong>NDC (Normalized Device Coordinates)</strong>: 归一化设备坐标,x, y, z 范围均为 [-1, 1]。</li>
|
|
22
|
+
<li><strong>Screen Space (屏幕坐标)</strong>: 对应 Canvas 画布的像素坐标。原点 (0, 0) 在左上角,x 向右增加,y 向下增加。</li>
|
|
23
|
+
</ul>
|
|
24
|
+
<h3 id="2-转换关系" class="tsd-anchor-link">2. 转换关系<a href="#2-转换关系" 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>
|
|
25
|
+
<table>
|
|
26
|
+
<thead>
|
|
27
|
+
<tr>
|
|
28
|
+
<th style="text-align:left">方向</th>
|
|
29
|
+
<th style="text-align:left">方法</th>
|
|
30
|
+
<th style="text-align:left">核心逻辑</th>
|
|
31
|
+
<th style="text-align:left">用途</th>
|
|
32
|
+
</tr>
|
|
33
|
+
</thead>
|
|
34
|
+
<tbody>
|
|
35
|
+
<tr>
|
|
36
|
+
<td style="text-align:left"><strong>3D ➔ 2D</strong></td>
|
|
37
|
+
<td style="text-align:left"><code>five.project2d(vector)</code></td>
|
|
38
|
+
<td style="text-align:left">World ➔ NDC ➔ Screen</td>
|
|
39
|
+
<td style="text-align:left">标签 (Tag)、HUD、跟随 3D 物体的 UI</td>
|
|
40
|
+
</tr>
|
|
41
|
+
<tr>
|
|
42
|
+
<td style="text-align:left"><strong>2D ➔ 3D</strong></td>
|
|
43
|
+
<td style="text-align:left"><code>Raycaster</code></td>
|
|
44
|
+
<td style="text-align:left">Screen ➔ NDC ➔ Ray</td>
|
|
45
|
+
<td style="text-align:left">点击拾取 (Picking)、地面检测、放置物体</td>
|
|
46
|
+
</tr>
|
|
47
|
+
</tbody>
|
|
48
|
+
</table>
|
|
49
|
+
<h3 id="3-fiveproject2d" class="tsd-anchor-link">3. five.project2d<a href="#3-fiveproject2d" 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>
|
|
50
|
+
<p><code>five.project2d</code> 是 Five 提供的便捷方法,它封装了以下逻辑:</p>
|
|
51
|
+
<ol>
|
|
52
|
+
<li>将世界坐标投影 (Project) 到相机的 NDC 空间。</li>
|
|
53
|
+
<li>判断点是否在视锥体 (Frustum) 内(即是否在视野范围内)。</li>
|
|
54
|
+
<li>(可选) 发射射线检测该点与相机之间是否有模型遮挡。</li>
|
|
55
|
+
<li>将 NDC 坐标转换为相对于 Canvas 左上角的像素坐标 (px)。</li>
|
|
56
|
+
</ol>
|
|
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
|
+
<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
|
+
<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">"@realsee/five"</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">"three"</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">"div"</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">"Living Room"</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">"absolute"</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">"4px 8px"</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">"rgba(0, 0, 0, 0.6)"</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">"white"</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">"4px"</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">"none"</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">"translate(-50%, -100%)"</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">"none"</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">"render.prepare"</span><span class="hl-1">, () </span><span class="hl-3">=></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">"none"</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">"block"</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
|
+
</code><button type="button">Copy</button></pre>
|
|
62
|
+
|
|
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>
|
|
64
|
+
<p>将鼠标点击的屏幕坐标转换为 3D 射线,用于检测物体。</p>
|
|
65
|
+
<blockquote>
|
|
66
|
+
<p><strong>注意</strong>: 更多射线检测细节请参考 <a href="features_raycast.html">Raycast</a>。</p>
|
|
67
|
+
</blockquote>
|
|
68
|
+
<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">"three"</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 假设 container 是 five 的容器元素</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">container</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><span class="hl-6">parentElement</span><span class="hl-1">!;</span><br/><br/><span class="hl-6">container</span><span class="hl-1">.</span><span class="hl-5">addEventListener</span><span class="hl-1">(</span><span class="hl-9">"click"</span><span class="hl-1">, (</span><span class="hl-6">event</span><span class="hl-1">) </span><span class="hl-3">=></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">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-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">mouse</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-1"> </span><span class="hl-8">// 1. 计算 NDC 坐标 (x, y 范围 [-1, 1])</span><br/><span class="hl-1"> </span><span class="hl-8">// event.clientX/Y 是相对于视口的坐标</span><br/><span class="hl-1"> </span><span class="hl-8">// getBoundingClientRect 用于获取容器的位置</span><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">container</span><span class="hl-1">.</span><span class="hl-5">getBoundingClientRect</span><span class="hl-1">();</span><br/><br/><span class="hl-1"> </span><span class="hl-6">mouse</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">clientX</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">mouse</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">clientY</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><span class="hl-8">// 注意 Y 轴翻转</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">mouse</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. 进行相交检测</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"> > </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">"Hit point:"</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><span class="hl-6">point</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
69
|
+
</code><button type="button">Copy</button></pre>
|
|
70
|
+
|
|
71
|
+
<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>
|
|
72
|
+
<ol>
|
|
73
|
+
<li>
|
|
74
|
+
<p><strong>坐标系原点</strong>:</p>
|
|
75
|
+
<ul>
|
|
76
|
+
<li>DOM/CSS 坐标系原点在左上角,Y 轴向下。</li>
|
|
77
|
+
<li>NDC/WebGL 坐标系原点在中心,Y 轴向上。</li>
|
|
78
|
+
<li><code>project2d</code> 返回的是 <strong>DOM 风格</strong> 的坐标 (左上角原点),可以直接赋给 CSS <code>left</code>/<code>top</code>。</li>
|
|
79
|
+
<li>但在进行 Raycaster 转换时,需要手动将 DOM 坐标转换为 NDC (Y 轴翻转)。</li>
|
|
80
|
+
</ul>
|
|
81
|
+
</li>
|
|
82
|
+
<li>
|
|
83
|
+
<p><strong>性能开销</strong>:</p>
|
|
84
|
+
<ul>
|
|
85
|
+
<li><code>project2d(pos, true)</code> 开启 <code>testModel</code> 会进行射线检测,性能开销较大。如果在 <code>render.prepare</code> 中对大量点进行检测,可能会导致掉帧。</li>
|
|
86
|
+
<li>建议:对于大量标签,默认使用 <code>false</code>;或者仅对可视范围内的关键标签进行遮挡检测;或者限制检测频率(如每 10 帧检测一次)。</li>
|
|
87
|
+
</ul>
|
|
88
|
+
</li>
|
|
89
|
+
<li>
|
|
90
|
+
<p><strong>Canvas 尺寸</strong>:</p>
|
|
91
|
+
<ul>
|
|
92
|
+
<li><code>project2d</code> 内部使用 <code>five.renderer.getSize()</code> 和 <code>five.viewport</code> 计算。确保 Canvas 尺寸与 DOM 显示尺寸一致 (通常 Five 会自动处理,但如果使用了 CSS 缩放需注意)。</li>
|
|
93
|
+
</ul>
|
|
94
|
+
</li>
|
|
95
|
+
<li>
|
|
96
|
+
<p><strong>Null 返回值</strong>:</p>
|
|
97
|
+
<ul>
|
|
98
|
+
<li>务必检查 <code>project2d</code> 的返回值是否为 <code>null</code>。点在相机背面、超出视锥体裁剪范围、或被遮挡(开启 testModel 时)都会返回 <code>null</code>。</li>
|
|
99
|
+
</ul>
|
|
100
|
+
</li>
|
|
101
|
+
</ol>
|
|
102
|
+
<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>
|
|
103
|
+
<ul>
|
|
104
|
+
<li><a href="features_raycast.html">Raycast</a>: 详细的射线检测文档。</li>
|
|
105
|
+
<li><a href="features_five.html">Five</a>: Five 核心类说明。</li>
|
|
106
|
+
<li><a href="features_state.html">State</a>: 了解相机位姿 (Pose)。</li>
|
|
107
|
+
</ul>
|
|
108
|
+
<hr>
|
|
109
|
+
<pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">coordinate</span><span class="hl-1">, </span><span class="hl-2">screen</span><span class="hl-1">, </span><span class="hl-2">project</span><span class="hl-1">, </span><span class="hl-2">label</span><span class="hl-1">, </span><span class="hl-2">ui</span><span class="hl-1">]</span>
|
|
110
|
+
</code><button type="button">Copy</button></pre>
|
|
111
|
+
|
|
112
|
+
</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="#screen-space-projection-屏幕与空间坐标转换"><span>Screen & <wbr/>Space <wbr/>Projection (屏幕与空间坐标转换)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#1-坐标系转换流程"><span>1. 坐标系转换流程</span></a></li><li><a href="#2-转换关系"><span>2. 转换关系</span></a></li><li><a href="#3-fiveproject2d"><span>3. five.project2d</span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#1-空间标签-3d-point-to-dom-label"><span>1. 空间标签 (3<wbr/>D <wbr/>Point to <wbr/>DOM <wbr/>Label)</span></a></li><li><a href="#2-屏幕点击转射线-screen-to-ray"><span>2. 屏幕点击转射线 (<wbr/>Screen to <wbr/>Ray)</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>
|
|
@@ -0,0 +1,71 @@
|
|
|
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/state | 如视 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/state</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="state-状态" class="tsd-anchor-link">State (状态)<a href="#state-状态" 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
|
+
<ul>
|
|
3
|
+
<li><strong>Summary</strong>: State 是 Five 的核心状态对象,描述了当前的显示模式、观察点位以及相机的空间姿态。</li>
|
|
4
|
+
<li><strong>Schema</strong>: 包含 Pose (相机姿态) 和 Mode (模式) 等属性的接口。</li>
|
|
5
|
+
<li><strong>Concepts</strong>: Camera Pose, Coordinate System, Mode Specifics。</li>
|
|
6
|
+
<li><strong>Examples</strong>: 状态获取与更新。</li>
|
|
7
|
+
</ul>
|
|
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>
|
|
9
|
+
<blockquote>
|
|
10
|
+
<p><strong>Definition</strong>: <a href="../../five/types/state.d.ts">State</a></p>
|
|
11
|
+
</blockquote>
|
|
12
|
+
<p><strong>State</strong> 类型定义如下(继承自 <code>Pose</code>):</p>
|
|
13
|
+
<pre><code class="ts"><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">"three"</span><span class="hl-1">;</span><br/><span class="hl-10">import</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">"@realsee/five"</span><span class="hl-1">;</span><br/><br/><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">Pose</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">longitude</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">/** 相机俯仰角 (垂直方向),单位:弧度 */</span><br/><span class="hl-1"> </span><span class="hl-6">latitude</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">/** 相机垂直视场角,单位:度 */</span><br/><span class="hl-1"> </span><span class="hl-6">fov</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">/** 相机看向的目标中心点坐标 */</span><br/><span class="hl-1"> </span><span class="hl-6">offset</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Vector3</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">distance</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-3">interface</span><span class="hl-1"> </span><span class="hl-7">State</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">Pose</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">mode</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-8">/** 当前点位的唯一标识 (workCode) */</span><br/><span class="hl-1"> </span><span class="hl-6">workCode</span><span class="hl-1">: </span><span class="hl-7">string</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">panoIndex</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
14
|
+
</code><button type="button">Copy</button></pre>
|
|
15
|
+
|
|
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>
|
|
17
|
+
<ul>
|
|
18
|
+
<li><strong>Camera Pose (相机姿态)</strong>: Five 使用球坐标系 (Spherical) + 笛卡尔偏移 (Cartesian Offset) 来描述相机位置。
|
|
19
|
+
<ul>
|
|
20
|
+
<li>相机始终位于以 <code>offset</code> 为中心、<code>distance</code> 为半径的球面上。</li>
|
|
21
|
+
<li><strong>longitude</strong>: 球面上的经度(水平旋转)。</li>
|
|
22
|
+
<li><strong>latitude</strong>: 球面上的纬度(垂直旋转)。</li>
|
|
23
|
+
<li><strong>offset</strong>: 相机“看向”的点,也是球心。</li>
|
|
24
|
+
<li><strong>distance</strong>: 相机到 <code>offset</code> 的距离。</li>
|
|
25
|
+
</ul>
|
|
26
|
+
</li>
|
|
27
|
+
<li><strong>Coordinate System (坐标系)</strong>:
|
|
28
|
+
<ul>
|
|
29
|
+
<li>采用 Y-Up 右手坐标系(与 Three.js 默认一致)。</li>
|
|
30
|
+
<li>单位长度为米。</li>
|
|
31
|
+
</ul>
|
|
32
|
+
</li>
|
|
33
|
+
<li><strong>Mode Specifics (模式特性)</strong>:
|
|
34
|
+
<ul>
|
|
35
|
+
<li><strong>Panorama</strong>: <code>distance</code> 通常为 0,即相机位置与 <code>offset</code> 重合(第一人称视角)。</li>
|
|
36
|
+
<li><strong>Floorplan/Mapview</strong>: <code>offset</code> 通常位于模型中心,<code>distance</code> 大于模型包围盒半径(第三人称上帝视角)。</li>
|
|
37
|
+
</ul>
|
|
38
|
+
</li>
|
|
39
|
+
<li><strong>State vs CurrentState</strong>:
|
|
40
|
+
<ul>
|
|
41
|
+
<li><strong>five.state</strong>: <strong>目标状态</strong>。表示相机最终应该到达的状态。当调用 <code>setState</code> 或用户交互结束时,此值即为最终结果。通常用于 UI 同步(如高亮当前模式按钮)。</li>
|
|
42
|
+
<li><strong>five.getCurrentState()</strong>: <strong>瞬时状态</strong>。表示当前渲染帧相机的实际状态。在动画过渡过程中,<code>currentState</code> 会不断变化直至追赶上 <code>state</code>。通常用于需要实时反馈的场景(如罗盘旋转)。</li>
|
|
43
|
+
</ul>
|
|
44
|
+
</li>
|
|
45
|
+
</ul>
|
|
46
|
+
<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>
|
|
47
|
+
<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>
|
|
48
|
+
<p>使用 <code>setState</code> 更新状态:</p>
|
|
49
|
+
<pre><code class="ts"><span class="hl-8">// 切换到户型图模式,并旋转相机到 45 度</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">setState</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">mode:</span><span class="hl-1"> </span><span class="hl-9">'Floorplan'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">longitude:</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">4</span><br/><span class="hl-1">});</span>
|
|
50
|
+
</code><button type="button">Copy</button></pre>
|
|
51
|
+
|
|
52
|
+
<h3 id="详细示例-detailed-example" class="tsd-anchor-link">详细示例 (Detailed Example)<a href="#详细示例-detailed-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>
|
|
53
|
+
<p>获取当前状态并基于此修改:</p>
|
|
54
|
+
<pre><code class="ts"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">state</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">state</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 在当前状态基础上,向右旋转 90 度,并略微拉远距离</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">setState</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">longitude:</span><span class="hl-1"> </span><span class="hl-6">tate</span><span class="hl-1">.</span><span class="hl-6">longitude</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">2</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">distance:</span><span class="hl-1"> </span><span class="hl-6">tate</span><span class="hl-1">.</span><span class="hl-6">distance</span><span class="hl-1"> + </span><span class="hl-11">2.0</span><br/><span class="hl-1">});</span>
|
|
55
|
+
</code><button type="button">Copy</button></pre>
|
|
56
|
+
|
|
57
|
+
<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>
|
|
58
|
+
<ol>
|
|
59
|
+
<li><strong>单位混淆</strong>: <code>longitude</code> 和 <code>latitude</code> 使用<strong>弧度</strong>,而 <code>fov</code> 使用<strong>角度</strong>(度)。</li>
|
|
60
|
+
<li><strong>Offset 类型</strong>: <code>offset</code> 必须是 <code>THREE.Vector3</code> 实例。如果在 React 等框架中使用纯对象(Plain Object),Five 内部会自动转换,但在 TypeScript 中需注意类型匹配。</li>
|
|
61
|
+
<li><strong>异步更新</strong>: <code>setState</code> 触发的相机运动是异步动画过程。如果需要立即无动画跳转,可传递第二个参数 <code>immediately: true</code>。</li>
|
|
62
|
+
</ol>
|
|
63
|
+
<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>
|
|
64
|
+
<ul>
|
|
65
|
+
<li><a href="features_mode.html">Mode - 模式</a>: 详细了解各种 Mode 的区别。</li>
|
|
66
|
+
</ul>
|
|
67
|
+
<hr>
|
|
68
|
+
<pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">camera</span><span class="hl-1">, </span><span class="hl-2">state</span><span class="hl-1">, </span><span class="hl-2">pose</span><span class="hl-1">, </span><span class="hl-2">interaction</span><span class="hl-1">]</span>
|
|
69
|
+
</code><button type="button">Copy</button></pre>
|
|
70
|
+
|
|
71
|
+
</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="#state-状态"><span>State (状态)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></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="#详细示例-detailed-example"><span>详细示例 (<wbr/>Detailed <wbr/>Example)</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>
|
|
@@ -0,0 +1,158 @@
|
|
|
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/view-layer | 如视 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/view-layer</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 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></h1>
|
|
2
|
+
<ul>
|
|
3
|
+
<li><strong>Summary</strong>: ViewLayer 是 Model 的组成部分,负责管理具体的 3D 资源(如 Mesh 或 PointCloud),支持独立的渲染配置和可见性控制。</li>
|
|
4
|
+
<li><strong>Schema</strong>: 继承自 <code>Tile3D</code>,由 <code>Model</code> 统一管理。</li>
|
|
5
|
+
<li><strong>Concepts</strong>: Layer Fallback, 3DTile Integration, Parameter Inheritance.</li>
|
|
6
|
+
<li><strong>Examples</strong>: 可见性控制、参数配置、事件监听。</li>
|
|
7
|
+
</ul>
|
|
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>
|
|
9
|
+
<blockquote>
|
|
10
|
+
<p><strong>Definition</strong>: <a href="../../five/model/view-layer.d.ts">ViewLayer</a>, <a href="../../five/model/view-layer.d.ts">ViewLayerInit</a></p>
|
|
11
|
+
</blockquote>
|
|
12
|
+
<p>ViewLayer 是一个具体的渲染图层,它对应一个具体的 3D 数据源(通常是一个 <code>.gltf</code> / <code>.b3dm</code> / <code>.pnts</code> 等 Tileset 入口)。</p>
|
|
13
|
+
<pre><code class="typescript"><span class="hl-8">// 简化定义</span><br/><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">ViewLayer</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">Tile3D</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 图层名称 (如 'mesh', 'point_cloud') */</span><br/><span class="hl-1"> </span><span class="hl-6">name</span><span class="hl-1">: </span><span class="hl-7">string</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">type</span><span class="hl-1">: </span><span class="hl-9">"point_cloud"</span><span class="hl-1"> | </span><span class="hl-9">"mesh"</span><span class="hl-1"> | </span><span class="hl-9">"gaussian_splatting"</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">parameter</span><span class="hl-1">: </span><span class="hl-7">Parameter</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">visible</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 对应的 Tileset URL */</span><br/><span class="hl-1"> </span><span class="hl-6">tilesetUrl</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
14
|
+
</code><button type="button">Copy</button></pre>
|
|
15
|
+
|
|
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>
|
|
17
|
+
<h3 id="1-viewlayer-vs-workmodel" class="tsd-anchor-link">1. ViewLayer vs Work.Model<a href="#1-viewlayer-vs-workmodel" 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>
|
|
18
|
+
<p><code>ViewLayer</code> 的生成逻辑严格依赖于 <code>Work</code> 数据中的定义,但也包含了向后兼容的 Fallback 机制。</p>
|
|
19
|
+
<h4 id="数据来源-data-source" class="tsd-anchor-link">数据来源 (Data Source)<a href="#数据来源-data-source" 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></h4>
|
|
20
|
+
<ol>
|
|
21
|
+
<li>
|
|
22
|
+
<p><strong>优先使用 <code>work.model.layers</code></strong>:
|
|
23
|
+
这是标准的定义方式。<code>work.model.layers</code> 是一个数组,每个元素显式定义了一个 Layer 的 <code>name</code>, <code>type</code>, <code>tileset</code> (URL) 等信息。
|
|
24
|
+
Five 会遍历这个数组,为每一项创建一个 <code>ViewLayer</code> 实例。</p>
|
|
25
|
+
</li>
|
|
26
|
+
<li>
|
|
27
|
+
<p><strong>Fallback to <code>work.model.file</code></strong>:
|
|
28
|
+
如果 <code>work.model.layers</code> 中没有定义 <code>mesh</code> 类型的层,且 <code>work.model.file</code> 存在(旧版数据字段),Five 会自动创建一个 <strong>虚拟的 Mesh Layer</strong>。</p>
|
|
29
|
+
<ul>
|
|
30
|
+
<li><strong>Name</strong>: 默认为 <code>model</code> (或其他内部标识)。</li>
|
|
31
|
+
<li><strong>Type</strong>: <code>mesh</code>。</li>
|
|
32
|
+
<li><strong>URL</strong>: 指向 <code>work.model.file</code>。</li>
|
|
33
|
+
<li><strong>UpAxis</strong>: 根据文件后缀自动推断 (如 <code>.obj</code> 可能需要特殊处理)。</li>
|
|
34
|
+
</ul>
|
|
35
|
+
</li>
|
|
36
|
+
</ol>
|
|
37
|
+
<blockquote>
|
|
38
|
+
<p><strong>总结</strong>: <code>ViewLayer</code> 是 <code>work.model</code> 数据的运行时表现。<code>layers</code> 字段提供了精细的控制,而 <code>file</code> 字段提供了旧数据的兼容支持。</p>
|
|
39
|
+
</blockquote>
|
|
40
|
+
<h3 id="2-viewlayer-vs-3dtile" class="tsd-anchor-link">2. ViewLayer vs 3DTile<a href="#2-viewlayer-vs-3dtile" 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>
|
|
41
|
+
<p><code>ViewLayer</code> 本质上是一个 <strong>3DTile</strong> 加载器实例(继承自 <code>Tile3D</code>)。</p>
|
|
42
|
+
<ul>
|
|
43
|
+
<li><strong>加载机制</strong>: 每个 ViewLayer 独立维护一个 3DTiles 的遍历器 (Traverser) 和调度器 (Scheduler)。这意味着 Mesh 层、PointCloud 层和 GaussianSplatting 层是独立加载、独立计算 LOD (Level of Detail) 的。</li>
|
|
44
|
+
<li><strong>空间变换</strong>: ViewLayer 负责处理数据的坐标系转换 (如 ECEF 转 ENU,Y-Up 转 Z-Up),确保不同格式的数据在 Five 场景中正确对齐。</li>
|
|
45
|
+
</ul>
|
|
46
|
+
<h3 id="3-viewlayer-model-modelscene-parameter" class="tsd-anchor-link">3. ViewLayer, Model, ModelScene & Parameter<a href="#3-viewlayer-model-modelscene-parameter" 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>
|
|
47
|
+
<p>这是 Five 渲染架构的核心层级关系,<code>Parameter</code> 在其中起到了“胶水”的作用。</p>
|
|
48
|
+
<h4 id="层级关系-hierarchy" class="tsd-anchor-link">层级关系 (Hierarchy)<a href="#层级关系-hierarchy" 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></h4>
|
|
49
|
+
<pre><code class="mermaid"><span class="hl-1">graph TD</span><br/><span class="hl-1"> Scene[ModelScene] -->|包含| Model[Model]</span><br/><span class="hl-1"> Model -->|包含| LayerA[ViewLayer (Mesh)]</span><br/><span class="hl-1"> Model -->|包含| LayerB[ViewLayer (PointCloud)]</span>
|
|
50
|
+
</code><button type="button">Copy</button></pre>
|
|
51
|
+
|
|
52
|
+
<h4 id="parameter-的作用-inheritance" class="tsd-anchor-link">Parameter 的作用 (Inheritance)<a href="#parameter-的作用-inheritance" 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></h4>
|
|
53
|
+
<p><code>Parameter</code> 系统贯穿了上述三层,实现了**“配置继承与覆盖”**。</p>
|
|
54
|
+
<ol>
|
|
55
|
+
<li><strong>ModelScene (全局配置)</strong>:
|
|
56
|
+
<ul>
|
|
57
|
+
<li>持有 <code>five.modelScene.parameter</code>。</li>
|
|
58
|
+
<li>定义了场景级的默认值(如:默认显存上限 <code>512MB</code>)。</li>
|
|
59
|
+
</ul>
|
|
60
|
+
</li>
|
|
61
|
+
<li><strong>Model (模型级配置)</strong>:
|
|
62
|
+
<ul>
|
|
63
|
+
<li>持有 <code>model.parameter</code>。</li>
|
|
64
|
+
<li>可以覆盖全局配置(如:特定模型需要 <code>1024MB</code> 显存)。</li>
|
|
65
|
+
</ul>
|
|
66
|
+
</li>
|
|
67
|
+
<li><strong>ViewLayer (图层级配置)</strong>:
|
|
68
|
+
<ul>
|
|
69
|
+
<li>持有 <code>viewLayer.parameter</code>。</li>
|
|
70
|
+
<li><strong>最具体的控制点</strong>。它在计算最终值时,会依次继承 <code>Model</code> 和 <code>ModelScene</code> 的配置。</li>
|
|
71
|
+
</ul>
|
|
72
|
+
</li>
|
|
73
|
+
</ol>
|
|
74
|
+
<p><strong>示例场景</strong>:</p>
|
|
75
|
+
<ul>
|
|
76
|
+
<li>如果你想让<strong>整个场景</strong>变暗,设置 <code>modelScene.parameter.set('opacity', 0.5)</code>。</li>
|
|
77
|
+
<li>如果你只想让<strong>点云层</strong>变暗,保留模型层亮度,设置 <code>pointCloudLayer.parameter.set('opacity', 0.5)</code>。</li>
|
|
78
|
+
</ul>
|
|
79
|
+
<h3 id="4-visibility-control-可见性控制" class="tsd-anchor-link">4. Visibility Control (可见性控制)<a href="#4-visibility-control-可见性控制" 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>
|
|
80
|
+
<p>默认情况下,Five <strong>不会</strong>加载所有图层,而是根据优先级<strong>仅加载一个</strong>图层,以节省资源。
|
|
81
|
+
优先级顺序:<code>mesh</code> > <code>point_cloud</code> > 其他类型。</p>
|
|
82
|
+
<p><strong>可见性与内存管理 (Visibility & Memory)</strong>:</p>
|
|
83
|
+
<ul>
|
|
84
|
+
<li><strong>显示 (Show)</strong>: 当图层设置为可见 (<code>visible = true</code>) 时,Five 会开始加载该图层的资源。</li>
|
|
85
|
+
<li><strong>隐藏 (Hide)</strong>: 当图层设置为隐藏 (<code>visible = false</code>) 时,Five 会<strong>释放该图层占用的所有内存资源</strong> (Geometry, Texture 等)。这意味着“隐藏”等同于“卸载”。</li>
|
|
86
|
+
</ul>
|
|
87
|
+
<p>Five 提供了两种层级的可见性控制方式:</p>
|
|
88
|
+
<ol>
|
|
89
|
+
<li>
|
|
90
|
+
<p><strong>初始化配置 (Load Options)</strong>:
|
|
91
|
+
在 <code>five.load</code> 时,通过 <code>model["3d-tiles"].showLayers</code> 参数指定初始显示的图层。</p>
|
|
92
|
+
<ul>
|
|
93
|
+
<li><code>true</code> (默认): 使用上述的默认优先级策略(仅加载一个最佳图层)。</li>
|
|
94
|
+
<li><code>string[]</code>: 仅显示名称在数组中的图层(例如 <code>['mesh', 'point_cloud']</code> 可以强制同时显示模型和点云)。</li>
|
|
95
|
+
</ul>
|
|
96
|
+
</li>
|
|
97
|
+
<li>
|
|
98
|
+
<p><strong>运行时控制 (Runtime Control)</strong>:
|
|
99
|
+
加载完成后,可以直接修改 <code>viewLayer.visible</code> 属性来切换可见性。</p>
|
|
100
|
+
</li>
|
|
101
|
+
</ol>
|
|
102
|
+
<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>
|
|
103
|
+
<p>ViewLayer 的配置主要通过其 <code>parameter</code> 属性进行。</p>
|
|
104
|
+
<h3 id="common-configuration" class="tsd-anchor-link">Common Configuration<a href="#common-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>
|
|
105
|
+
<table>
|
|
106
|
+
<thead>
|
|
107
|
+
<tr>
|
|
108
|
+
<th style="text-align:left">Parameter</th>
|
|
109
|
+
<th style="text-align:left">Type</th>
|
|
110
|
+
<th style="text-align:left">Description</th>
|
|
111
|
+
</tr>
|
|
112
|
+
</thead>
|
|
113
|
+
<tbody>
|
|
114
|
+
<tr>
|
|
115
|
+
<td style="text-align:left"><code>visible</code></td>
|
|
116
|
+
<td style="text-align:left"><code>boolean</code></td>
|
|
117
|
+
<td style="text-align:left">控制图层的可见性 (也可直接修改 <code>viewLayer.visible</code>)。</td>
|
|
118
|
+
</tr>
|
|
119
|
+
<tr>
|
|
120
|
+
<td style="text-align:left"><code>opacity</code></td>
|
|
121
|
+
<td style="text-align:left"><code>number</code></td>
|
|
122
|
+
<td style="text-align:left">图层透明度 (0.0 - 1.0)。</td>
|
|
123
|
+
</tr>
|
|
124
|
+
<tr>
|
|
125
|
+
<td style="text-align:left"><code>pointSize</code></td>
|
|
126
|
+
<td style="text-align:left"><code>number</code></td>
|
|
127
|
+
<td style="text-align:left">(仅点云) 点的大小。</td>
|
|
128
|
+
</tr>
|
|
129
|
+
</tbody>
|
|
130
|
+
</table>
|
|
131
|
+
<blockquote>
|
|
132
|
+
<p>更多配置项请参考 <a href="features_parameter.html">Parameter</a> 和 <a href="features_3dtile.html">3DTile Params</a>。</p>
|
|
133
|
+
</blockquote>
|
|
134
|
+
<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>
|
|
135
|
+
<h3 id="1-访问-viewlayer" class="tsd-anchor-link">1. 访问 ViewLayer<a href="#1-访问-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>
|
|
136
|
+
<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">model</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 遍历所有图层</span><br/><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-6">viewLayers</span><span class="hl-1">.</span><span class="hl-5">forEach</span><span class="hl-1">(</span><span class="hl-6">layer</span><span class="hl-1"> </span><span class="hl-3">=></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">`Layer Name: </span><span class="hl-3">${</span><span class="hl-6">layer</span><span class="hl-12">.</span><span class="hl-6">name</span><span class="hl-3">}</span><span class="hl-9">, Type: </span><span class="hl-3">${</span><span class="hl-6">layer</span><span class="hl-12">.</span><span class="hl-6">type</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">);</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-8">// 查找特定的图层 (例如点云层)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pointCloudLayer</span><span class="hl-1"> = </span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-6">viewLayers</span><span class="hl-1">.</span><span class="hl-5">find</span><span class="hl-1">(</span><span class="hl-6">layer</span><span class="hl-1"> </span><span class="hl-3">=></span><span class="hl-1"> </span><span class="hl-6">layer</span><span class="hl-1">.</span><span class="hl-6">type</span><span class="hl-1"> === </span><span class="hl-9">'point_cloud'</span><span class="hl-1">);</span>
|
|
137
|
+
</code><button type="button">Copy</button></pre>
|
|
138
|
+
|
|
139
|
+
<h3 id="2-独立控制图层可见性" class="tsd-anchor-link">2. 独立控制图层可见性<a href="#2-独立控制图层可见性" 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>
|
|
140
|
+
<pre><code class="typescript"><span class="hl-8">// 方式 A: 运行时控制</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">meshLayer</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-6">viewLayers</span><span class="hl-1">.</span><span class="hl-5">find</span><span class="hl-1">(</span><span class="hl-6">layer</span><span class="hl-1"> </span><span class="hl-3">=></span><span class="hl-1"> </span><span class="hl-6">layer</span><span class="hl-1">.</span><span class="hl-6">type</span><span class="hl-1"> === </span><span class="hl-9">'mesh'</span><span class="hl-1">);</span><br/><br/><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">meshLayer</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">meshLayer</span><span class="hl-1">.</span><span class="hl-6">visible</span><span class="hl-1"> = </span><span class="hl-3">false</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">// 或者通过 parameter 设置</span><br/><span class="hl-1"> </span><span class="hl-8">// meshLayer.parameter.set('visible', false);</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">// 方式 B: 加载时控制 (初始化时仅显示 mesh)</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">load</span><span class="hl-1">(</span><span class="hl-6">work</span><span class="hl-1">, {</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-9">"3d-tiles"</span><span class="hl-6">:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">showLayers:</span><span class="hl-1"> [</span><span class="hl-9">'mesh'</span><span class="hl-1">] </span><span class="hl-8">// 仅显示 mesh 层,隐藏 point_cloud 等其他层</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
141
|
+
</code><button type="button">Copy</button></pre>
|
|
142
|
+
|
|
143
|
+
<h3 id="3-修改特定图层的渲染参数" class="tsd-anchor-link">3. 修改特定图层的渲染参数<a href="#3-修改特定图层的渲染参数" 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>
|
|
144
|
+
<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pointCloudLayer</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-6">viewLayers</span><span class="hl-1">.</span><span class="hl-5">find</span><span class="hl-1">(</span><span class="hl-6">layer</span><span class="hl-1"> </span><span class="hl-3">=></span><span class="hl-1"> </span><span class="hl-6">layer</span><span class="hl-1">.</span><span class="hl-6">type</span><span class="hl-1"> === </span><span class="hl-9">'point_cloud'</span><span class="hl-1">);</span><br/><br/><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">pointCloudLayer</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">pointCloudLayer</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">'pointSize'</span><span class="hl-1">, </span><span class="hl-11">2.0</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">pointCloudLayer</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">'maxMemoryUsage'</span><span class="hl-1">, </span><span class="hl-11">128</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
|
145
|
+
</code><button type="button">Copy</button></pre>
|
|
146
|
+
|
|
147
|
+
<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>
|
|
148
|
+
<ul>
|
|
149
|
+
<li><a href="features_model.html">Model</a>: ViewLayer 的父级容器。</li>
|
|
150
|
+
<li><a href="features_work.html">Work</a>: 定义 ViewLayer 数据结构的数据源。</li>
|
|
151
|
+
<li><a href="features_parameter.html">Parameter</a>: 控制 ViewLayer 渲染表现的配置系统。</li>
|
|
152
|
+
<li><a href="features_3dtile.html">3DTile</a>: ViewLayer 的底层技术实现。</li>
|
|
153
|
+
</ul>
|
|
154
|
+
<hr>
|
|
155
|
+
<pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">viewlayer</span><span class="hl-1">, </span><span class="hl-2">model</span><span class="hl-1">, </span><span class="hl-2">3dtile</span><span class="hl-1">, </span><span class="hl-2">parameter</span><span class="hl-1">, </span><span class="hl-2">layer</span><span class="hl-1">]</span>
|
|
156
|
+
</code><button type="button">Copy</button></pre>
|
|
157
|
+
|
|
158
|
+
</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="#viewlayer-视图层"><span>View<wbr/>Layer (视图层)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#1-viewlayer-vs-workmodel"><span>1. <wbr/>View<wbr/>Layer vs <wbr/>Work.<wbr/>Model</span></a></li><li><ul><li><a href="#数据来源-data-source"><span>数据来源 (<wbr/>Data <wbr/>Source)</span></a></li></ul></li><li><a href="#2-viewlayer-vs-3dtile"><span>2. <wbr/>View<wbr/>Layer vs 3<wbr/>D<wbr/>Tile</span></a></li><li><a href="#3-viewlayer-model-modelscene-parameter"><span>3. <wbr/>View<wbr/>Layer, <wbr/>Model, <wbr/>Model<wbr/>Scene & <wbr/>Parameter</span></a></li><li><ul><li><a href="#层级关系-hierarchy"><span>层级关系 (<wbr/>Hierarchy)</span></a></li><li><a href="#parameter-的作用-inheritance"><span>Parameter 的作用 (<wbr/>Inheritance)</span></a></li></ul></li><li><a href="#4-visibility-control-可见性控制"><span>4. <wbr/>Visibility <wbr/>Control (可见性控制)</span></a></li></ul></li><li><a href="#configuration"><span>Configuration</span></a></li><li><ul><li><a href="#common-configuration"><span>Common <wbr/>Configuration</span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#1-访问-viewlayer"><span>1. 访问 <wbr/>View<wbr/>Layer</span></a></li><li><a href="#2-独立控制图层可见性"><span>2. 独立控制图层可见性</span></a></li><li><a href="#3-修改特定图层的渲染参数"><span>3. 修改特定图层的渲染参数</span></a></li></ul></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>
|