@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,109 @@
|
|
|
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/postprocessing | 如视 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/postprocessing</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="后处理-post-processing" class="tsd-anchor-link">后处理 (Post Processing)<a href="#后处理-post-processing" 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>: Five 提供了基于 EffectComposer 的后处理机制,默认挂载了自适应亮度 (Auto Exposure) 和眼球穹顶光照 (EDL) 两种效果,同时提供多种可选内置 Pass,并支持开发者编写自定义 Pass。</li>
|
|
4
|
+
<li><strong>Schema</strong>: <code>FivePass</code> 类及 <code>Pass</code> 接口。</li>
|
|
5
|
+
<li><strong>Concepts</strong>: EffectComposer, G-Buffer, Pass, AdaptiveLuminance, EyeDomeLighting。</li>
|
|
6
|
+
<li><strong>Configuration</strong>: 开启内置 Pass 的开关及参数配置。</li>
|
|
7
|
+
<li><strong>Examples</strong>: 开启内置 Pass 示例,自定义黑白滤镜 Pass 示例。</li>
|
|
8
|
+
</ul>
|
|
9
|
+
<h2 id="schema" class="tsd-anchor-link">Schema<a href="#schema" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
10
|
+
<blockquote>
|
|
11
|
+
<p><strong>Definition</strong>: <a href="../../five/renderer/postprocessing/passes/pass.d.ts">FivePass</a></p>
|
|
12
|
+
</blockquote>
|
|
13
|
+
<pre><code class="typescript"><span class="hl-8">/**</span><br/><span class="hl-8"> * Pass 接口 (兼容 three.js EffectComposer)</span><br/><span class="hl-8"> */</span><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">Pass</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">enabled</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-6">needsSwap</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-6">clear</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-6">renderToScreen</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-5">setSize</span><span class="hl-1">(</span><span class="hl-6">width</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-6">height</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-5">render</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-6">renderer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderer</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">writeBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">readBuffer</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">WebGLRenderTarget</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">deltaTime</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">maskActive</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><br/><span class="hl-1"> ): </span><span class="hl-7">void</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">/**</span><br/><span class="hl-8"> * FivePass 基类</span><br/><span class="hl-8"> * 支持 G-Buffer 注入 (depth, normal, color)</span><br/><span class="hl-8"> */</span><br/><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">FivePass</span><span class="hl-1"> </span><span class="hl-3">implements</span><span class="hl-1"> </span><span class="hl-7">Pass</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">enabled</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">needsSwap</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">clear</span><span class="hl-1">: </span><span class="hl-7">boolean</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-3">public</span><span class="hl-1"> </span><span class="hl-6">renderToScreen</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">dependencies</span><span class="hl-1">: (</span><span class="hl-9">'depth'</span><span class="hl-1"> | </span><span class="hl-9">'normal'</span><span class="hl-1"> | </span><span class="hl-9">'color'</span><span class="hl-1">)[];</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 由 EffectComposer 在 render 时注入</span><br/><span class="hl-1"> </span><span class="hl-3">public</span><span class="hl-1"> </span><span class="hl-6">gbuffer</span><span class="hl-1">!: </span><span class="hl-7">Map</span><span class="hl-1"><</span><span class="hl-9">'depth'</span><span class="hl-1"> | </span><span class="hl-9">'normal'</span><span class="hl-1"> | </span><span class="hl-9">'color'</span><span class="hl-1">, </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Texture</span><span class="hl-1">>;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">constructor</span><span class="hl-1">(</span><span class="hl-6">dependencies</span><span class="hl-1">?: (</span><span class="hl-9">'depth'</span><span class="hl-1"> | </span><span class="hl-9">'normal'</span><span class="hl-1"> | </span><span class="hl-9">'color'</span><span class="hl-1">)[]);</span><br/><span class="hl-1"> </span><span class="hl-8">// ... render method implementation</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>EffectComposer</strong>: 后处理管理器,负责按顺序执行 Pass,管理渲染目标 (RenderTarget) 和 G-Buffer。</li>
|
|
19
|
+
<li><strong>FivePass</strong>: Five 引擎优化的 Pass 基类。相比普通 Pass,它声明了 <code>dependencies</code>,Five 会在渲染 Pass 之前准备好所需的 G-Buffer (如深度图、法线图),避免在每个 Pass 中重复渲染场景。</li>
|
|
20
|
+
<li><strong>AdaptiveLuminancePass (自适应亮度)</strong>: 模拟人眼对光线的适应过程。当场景亮度变化时,会自动平滑调整曝光度,使画面保持在舒适的亮度范围内。</li>
|
|
21
|
+
<li><strong>EyeDomeLightingPass (EDL)</strong>: 一种非真实感渲染技术,主要用于增强点云模型的深度感知。通过屏幕空间的深度差计算遮蔽效果,让点云看起来更有轮廓感。</li>
|
|
22
|
+
</ul>
|
|
23
|
+
<h2 id="built-in-passes-内置-pass" class="tsd-anchor-link">Built-in Passes (内置 Pass)<a href="#built-in-passes-内置-pass" 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>
|
|
24
|
+
<p>Five 默认挂载了两个 Pass 实例,挂载在 <code>five</code> 实例上,默认是关闭状态。</p>
|
|
25
|
+
<h3 id="1-adaptiveluminancepass" class="tsd-anchor-link">1. AdaptiveLuminancePass<a href="#1-adaptiveluminancepass" 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>
|
|
26
|
+
<p>位于 <code>five.adaptiveLuminancePass</code>。</p>
|
|
27
|
+
<ul>
|
|
28
|
+
<li><strong>作用</strong>: 自动调整画面曝光。</li>
|
|
29
|
+
<li><strong>开启方式</strong>: <code>five.adaptiveLuminancePass.enabled = true</code>。</li>
|
|
30
|
+
<li><strong>配置项</strong>:
|
|
31
|
+
<ul>
|
|
32
|
+
<li><code>luminanceScale</code> (number): 亮度缩放系数,影响最终画面的整体亮度。</li>
|
|
33
|
+
<li><code>luminanceStep</code> (number): 亮度适应步长,影响适应速度。</li>
|
|
34
|
+
</ul>
|
|
35
|
+
</li>
|
|
36
|
+
</ul>
|
|
37
|
+
<h3 id="2-eyedomelightingpass" class="tsd-anchor-link">2. EyeDomeLightingPass<a href="#2-eyedomelightingpass" 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>
|
|
38
|
+
<p>位于 <code>five.eyeDomeLightingPass</code>。</p>
|
|
39
|
+
<ul>
|
|
40
|
+
<li><strong>作用</strong>: 增强点云的轮廓和深度感。</li>
|
|
41
|
+
<li><strong>开启方式</strong>: <code>five.eyeDomeLightingPass.enabled = true</code>。</li>
|
|
42
|
+
<li><strong>配置项</strong>:
|
|
43
|
+
<ul>
|
|
44
|
+
<li><code>strength</code> (number): 增强强度,值越大轮廓越明显。</li>
|
|
45
|
+
<li><code>radius</code> (number): 采样半径,影响阴影的范围。</li>
|
|
46
|
+
</ul>
|
|
47
|
+
</li>
|
|
48
|
+
<li><strong>注意</strong>: 这是一个基于屏幕空间深度的算法,依赖 Depth Buffer。</li>
|
|
49
|
+
</ul>
|
|
50
|
+
<h3 id="3-optional-built-in-passes-可选内置-pass" class="tsd-anchor-link">3. Optional Built-in Passes (可选内置 Pass)<a href="#3-optional-built-in-passes-可选内置-pass" 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>
|
|
51
|
+
<p>Five 新增了三个可选使用的内置 Pass,这些 Pass 没有预先挂载在 <code>five</code> 实例上,需手动导入并添加到渲染链中:</p>
|
|
52
|
+
<ul>
|
|
53
|
+
<li><strong><a href="features_gaussian-blur-pass.html">GaussianBlurPass</a></strong>: 高斯模糊效果。</li>
|
|
54
|
+
<li><strong><a href="features_flowing-light-2d-pass.html">FlowingLight2DPass</a></strong>: 2D 流光效果(通常用于平面路线流光)。</li>
|
|
55
|
+
<li><strong><a href="features_flowing-light-3d-pass.html">FlowingLight3DPass</a></strong>: 3D 流光效果(通常用于空间路径流光)。</li>
|
|
56
|
+
</ul>
|
|
57
|
+
<h4 id="gaussianblurpass-使用示例" class="tsd-anchor-link">GaussianBlurPass 使用示例<a href="#gaussianblurpass-使用示例" 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>
|
|
58
|
+
<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">GaussianBlurPass</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-8">// 1. 创建 GaussianBlurPass 实例 (需要传入 camera)</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">gaussianBlurPass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">GaussianBlurPass</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-8">// 2. 配置参数</span><br/><span class="hl-8">// 设置模糊半径 (默认 4.0)</span><br/><span class="hl-6">gaussianBlurPass</span><span class="hl-1">.</span><span class="hl-5">setRadius</span><span class="hl-1">(</span><span class="hl-11">6</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 3. 将 Pass 添加到渲染链</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">gaussianBlurPass</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 4. (可选) 动态开关</span><br/><span class="hl-8">// gaussianBlurPass.enabled = false;</span><br/><br/><span class="hl-8">// 5. (可选) 移除 Pass</span><br/><span class="hl-8">// five.removePass(gaussianBlurPass);</span>
|
|
59
|
+
</code><button type="button">Copy</button></pre>
|
|
60
|
+
|
|
61
|
+
<h2 id="custom-pass-自定义-pass" class="tsd-anchor-link">Custom Pass (自定义 Pass)<a href="#custom-pass-自定义-pass" 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>
|
|
62
|
+
<p>如果需要实现自定义的后处理效果(如景深、色彩校正、描边等),建议继承 <code>FivePass</code>。</p>
|
|
63
|
+
<h3 id="步骤" class="tsd-anchor-link">步骤<a href="#步骤" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
64
|
+
<ol>
|
|
65
|
+
<li><strong>创建类</strong>: 继承 <code>FivePass</code>。</li>
|
|
66
|
+
<li><strong>声明依赖</strong>: 在 <code>super()</code> 中传入需要的 G-Buffer 依赖 (如 <code>['depth']</code>)。</li>
|
|
67
|
+
<li><strong>实现 render</strong>: 使用 <code>readBuffer</code> 作为输入,将结果渲染到 <code>writeBuffer</code> (或直接渲染到屏幕)。</li>
|
|
68
|
+
<li><strong>挂载</strong>: 使用 <code>five.addPass(pass)</code> 将其实例添加到渲染链中。</li>
|
|
69
|
+
</ol>
|
|
70
|
+
<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>
|
|
71
|
+
<h3 id="开启内置-pass" class="tsd-anchor-link">开启内置 Pass<a href="#开启内置-pass" 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>
|
|
72
|
+
<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">'@realsee/five'</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 开启自适应亮度</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">adaptiveLuminancePass</span><span class="hl-1">.</span><span class="hl-6">enabled</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">adaptiveLuminancePass</span><span class="hl-1">.</span><span class="hl-6">luminanceScale</span><span class="hl-1"> = </span><span class="hl-11">0.5</span><span class="hl-1">; </span><span class="hl-8">// 调整目标亮度</span><br/><br/><span class="hl-8">// 开启 EDL (通常用于点云模式)</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">eyeDomeLightingPass</span><span class="hl-1">.</span><span class="hl-6">enabled</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">eyeDomeLightingPass</span><span class="hl-1">.</span><span class="hl-6">strength</span><span class="hl-1"> = </span><span class="hl-11">1.5</span><span class="hl-1">; </span><span class="hl-8">// 增强轮廓感</span><br/><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span>
|
|
73
|
+
</code><button type="button">Copy</button></pre>
|
|
74
|
+
|
|
75
|
+
<h3 id="自定义-pass-黑白滤镜" class="tsd-anchor-link">自定义 Pass (黑白滤镜)<a href="#自定义-pass-黑白滤镜" 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>
|
|
76
|
+
<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/><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">FivePass</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-6">FullScreenQuad</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">'@realsee/five/lib/five/tools/full-screen-quad'</span><span class="hl-1">; </span><span class="hl-8">// 需根据实际路径引用</span><br/><br/><span class="hl-8">// 1. 定义 Shader</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">grayscaleVertexShader</span><span class="hl-1"> = </span><span class="hl-9">`</span><br/><span class="hl-9"> varying vec2 vUv;</span><br/><span class="hl-9"> void main() {</span><br/><span class="hl-9"> vUv = uv;</span><br/><span class="hl-9"> gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);</span><br/><span class="hl-9"> }</span><br/><span class="hl-9">`</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">grayscaleFragmentShader</span><span class="hl-1"> = </span><span class="hl-9">`</span><br/><span class="hl-9"> uniform sampler2D tDiffuse;</span><br/><span class="hl-9"> varying vec2 vUv;</span><br/><span class="hl-9"> void main() {</span><br/><span class="hl-9"> vec4 color = texture2D(tDiffuse, vUv);</span><br/><span class="hl-9"> float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));</span><br/><span class="hl-9"> gl_FragColor = vec4(vec3(gray), color.a);</span><br/><span class="hl-9"> }</span><br/><span class="hl-9">`</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 2. 创建 Pass 类</span><br/><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">GrayscalePass</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">FivePass</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">private</span><span class="hl-1"> </span><span class="hl-6">material</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">ShaderMaterial</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">private</span><span class="hl-1"> </span><span class="hl-6">fsQuad</span><span class="hl-1">: </span><span class="hl-7">FullScreenQuad</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">constructor</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-3">super</span><span class="hl-1">(); </span><span class="hl-8">// 不需要额外的 G-Buffer 依赖,只需要前一个 Pass 的颜色结果</span><br/><span class="hl-1"> </span><span class="hl-3">this</span><span class="hl-1">.</span><span class="hl-6">material</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">ShaderMaterial</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">uniforms:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-6">tDiffuse:</span><span class="hl-1"> { </span><span class="hl-6">value:</span><span class="hl-1"> </span><span class="hl-3">null</span><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-6">vertexShader:</span><span class="hl-1"> </span><span class="hl-6">grayscaleVertexShader</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">fragmentShader:</span><span class="hl-1"> </span><span class="hl-6">grayscaleFragmentShader</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-3">this</span><span class="hl-1">.</span><span class="hl-6">fsQuad</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">FullScreenQuad</span><span class="hl-1">(</span><span class="hl-3">this</span><span class="hl-1">.</span><span class="hl-6">material</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-5">render</span><span class="hl-1">(</span><span class="hl-6">renderer</span><span class="hl-1">, </span><span class="hl-6">writeBuffer</span><span class="hl-1">, </span><span class="hl-6">readBuffer</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 将上一个 Pass 的结果 (readBuffer) 传给 Shader</span><br/><span class="hl-1"> </span><span class="hl-3">this</span><span class="hl-1">.</span><span class="hl-6">material</span><span class="hl-1">.</span><span class="hl-6">uniforms</span><span class="hl-1">.</span><span class="hl-6">tDiffuse</span><span class="hl-1">.</span><span class="hl-6">value</span><span class="hl-1"> = </span><span class="hl-6">readBuffer</span><span class="hl-1">.</span><span class="hl-6">texture</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-3">this</span><span class="hl-1">.</span><span class="hl-6">renderToScreen</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 如果是最后一个 Pass,直接渲染到屏幕</span><br/><span class="hl-1"> </span><span class="hl-6">renderer</span><span class="hl-1">.</span><span class="hl-5">setRenderTarget</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-3">this</span><span class="hl-1">.</span><span class="hl-6">fsQuad</span><span class="hl-1">.</span><span class="hl-5">render</span><span class="hl-1">(</span><span class="hl-6">renderer</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-8">// 否则渲染到 writeBuffer,供下一个 Pass 使用</span><br/><span class="hl-1"> </span><span class="hl-6">renderer</span><span class="hl-1">.</span><span class="hl-5">setRenderTarget</span><span class="hl-1">(</span><span class="hl-6">writeBuffer</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-3">this</span><span class="hl-1">.</span><span class="hl-6">clear</span><span class="hl-1">) </span><span class="hl-6">renderer</span><span class="hl-1">.</span><span class="hl-5">clear</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-3">this</span><span class="hl-1">.</span><span class="hl-6">fsQuad</span><span class="hl-1">.</span><span class="hl-5">render</span><span class="hl-1">(</span><span class="hl-6">renderer</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">// 3. 挂载到 Five</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">grayPass</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">GrayscalePass</span><span class="hl-1">();</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">addPass</span><span class="hl-1">(</span><span class="hl-6">grayPass</span><span class="hl-1">);</span><br/><br/><span class="hl-8">// 触发重绘</span><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">needsRender</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span>
|
|
77
|
+
</code><button type="button">Copy</button></pre>
|
|
78
|
+
|
|
79
|
+
<h3 id="使用-g-buffer-深度图示例" class="tsd-anchor-link">使用 G-Buffer (深度图示例)<a href="#使用-g-buffer-深度图示例" 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>如果你的 Pass 需要使用场景的深度信息(例如雾效),可以在构造函数中声明依赖。</p>
|
|
81
|
+
<pre><code class="typescript"><span class="hl-3">class</span><span class="hl-1"> </span><span class="hl-7">FogPass</span><span class="hl-1"> </span><span class="hl-3">extends</span><span class="hl-1"> </span><span class="hl-7">FivePass</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">constructor</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-3">super</span><span class="hl-1">([</span><span class="hl-9">'depth'</span><span class="hl-1">]); </span><span class="hl-8">// 声明需要深度图</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-5">render</span><span class="hl-1">(</span><span class="hl-6">renderer</span><span class="hl-1">, </span><span class="hl-6">writeBuffer</span><span class="hl-1">, </span><span class="hl-6">readBuffer</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 获取深度图</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">depthTexture</span><span class="hl-1"> = </span><span class="hl-3">this</span><span class="hl-1">.</span><span class="hl-6">gbuffer</span><span class="hl-1">.</span><span class="hl-5">get</span><span class="hl-1">(</span><span class="hl-9">'depth'</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 在 Shader 中使用 depthTexture ...</span><br/><span class="hl-1"> </span><span class="hl-8">// this.material.uniforms.tDepth.value = depthTexture;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// ... 渲染逻辑</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
|
|
82
|
+
</code><button type="button">Copy</button></pre>
|
|
83
|
+
|
|
84
|
+
<h2 id="debugging" class="tsd-anchor-link">Debugging<a href="#debugging" 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>
|
|
85
|
+
<ul>
|
|
86
|
+
<li><strong>查看 Pass 列表</strong>: 检查 <code>five.fiveRenderer.composer.passes</code> 数组,确认 Pass 是否已添加以及顺序是否正确。</li>
|
|
87
|
+
<li><strong>检查 Enabled 状态</strong>: 确保 Pass 实例的 <code>.enabled</code> 属性为 <code>true</code>。</li>
|
|
88
|
+
<li><strong>G-Buffer 调试</strong>: 如果自定义 Pass 依赖 G-Buffer 但效果不对,检查 <code>this.gbuffer</code> 是否包含预期的纹理。</li>
|
|
89
|
+
</ul>
|
|
90
|
+
<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>
|
|
91
|
+
<ol>
|
|
92
|
+
<li><strong>Pass 顺序</strong>: 后处理是按顺序执行的。如果添加了多个 Pass,要注意它们的添加顺序。<code>addPass</code> 会添加到末尾,<code>insertPass</code> 可以插入到指定位置。</li>
|
|
93
|
+
<li><strong>renderToScreen</strong>: 只有链中的最后一个 Pass (且 <code>renderToScreen</code> 为 true) 才会渲染到屏幕。EffectComposer 会自动管理这个标志,但自定义 Pass 必须在 <code>render</code> 方法中正确处理 <code>this.renderToScreen</code> 逻辑。</li>
|
|
94
|
+
<li><strong>Performance</strong>: 过多的后处理 Pass 会显著降低帧率,尤其是在高分辨率屏幕上。尽量合并 Shader 逻辑,避免频繁的 Buffer 拷贝。</li>
|
|
95
|
+
<li><strong>Dependencies</strong>: 只有继承 <code>FivePass</code> 并声明了 <code>dependencies</code>,<code>this.gbuffer</code> 才会有值。普通 <code>Pass</code> 实现无法自动获取 G-Buffer。</li>
|
|
96
|
+
</ol>
|
|
97
|
+
<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>
|
|
98
|
+
<ul>
|
|
99
|
+
<li><a href="features_gaussian-blur-pass.html">Gaussian Blur Pass</a>: 高斯模糊 Pass 文档。</li>
|
|
100
|
+
<li><a href="features_flowing-light-2d-pass.html">Flowing Light 2D Pass</a>: 2D 流光 Pass 文档。</li>
|
|
101
|
+
<li><a href="features_flowing-light-3d-pass.html">Flowing Light 3D Pass</a>: 3D 流光 Pass 文档。</li>
|
|
102
|
+
<li><a href="../../five/application/five.d.ts">five.ts</a>: 查看 <code>addPass</code> 方法的实现。</li>
|
|
103
|
+
<li><a href="../../five/renderer/postprocessing/passes/pass.d.ts">pass.ts</a>: 查看 <code>FivePass</code> 基类定义。</li>
|
|
104
|
+
</ul>
|
|
105
|
+
<hr>
|
|
106
|
+
<pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">postprocessing</span><span class="hl-1">, </span><span class="hl-2">shader</span><span class="hl-1">, </span><span class="hl-2">effect</span><span class="hl-1">, </span><span class="hl-2">adaptive-luminance</span><span class="hl-1">, </span><span class="hl-2">edl</span><span class="hl-1">]</span>
|
|
107
|
+
</code><button type="button">Copy</button></pre>
|
|
108
|
+
|
|
109
|
+
</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="#后处理-post-processing"><span>后处理 (<wbr/>Post <wbr/>Processing)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><a href="#built-in-passes-内置-pass"><span>Built-<wbr/>in <wbr/>Passes (内置 <wbr/>Pass)</span></a></li><li><ul><li><a href="#1-adaptiveluminancepass"><span>1. <wbr/>Adaptive<wbr/>Luminance<wbr/>Pass</span></a></li><li><a href="#2-eyedomelightingpass"><span>2. <wbr/>Eye<wbr/>Dome<wbr/>Lighting<wbr/>Pass</span></a></li><li><a href="#3-optional-built-in-passes-可选内置-pass"><span>3. <wbr/>Optional <wbr/>Built-<wbr/>in <wbr/>Passes (可选内置 <wbr/>Pass)</span></a></li><li><ul><li><a href="#gaussianblurpass-使用示例"><span>Gaussian<wbr/>Blur<wbr/>Pass 使用示例</span></a></li></ul></li></ul></li><li><a href="#custom-pass-自定义-pass"><span>Custom <wbr/>Pass (自定义 <wbr/>Pass)</span></a></li><li><ul><li><a href="#步骤"><span>步骤</span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#开启内置-pass"><span>开启内置 <wbr/>Pass</span></a></li><li><a href="#自定义-pass-黑白滤镜"><span>自定义 <wbr/>Pass (黑白滤镜)</span></a></li><li><a href="#使用-g-buffer-深度图示例"><span>使用 <wbr/>G-<wbr/>Buffer (深度图示例)</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></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,98 @@
|
|
|
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/raycast | 如视 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/raycast</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="raycast-射线检测" class="tsd-anchor-link">Raycast (射线检测)<a href="#raycast-射线检测" 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>: Five 提供了增强版的射线检测机制,内置 BVH 加速,并扩展了 Three.js Raycaster 以支持更灵活的过滤和性能优化。</li>
|
|
4
|
+
<li><strong>Schema</strong>: 参见下方 <code>Three.js Raycaster Extensions</code>。</li>
|
|
5
|
+
<li><strong>Concepts</strong>: BVH, IntersectRaycaster, Raycaster Extensions。</li>
|
|
6
|
+
<li><strong>Examples</strong>: 提供基础检测与性能优化示例。</li>
|
|
7
|
+
</ul>
|
|
8
|
+
<h2 id="schema-threejs-raycaster-extensions" class="tsd-anchor-link">Schema: Three.js Raycaster Extensions<a href="#schema-threejs-raycaster-extensions" 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/declare.d.ts">Raycaster</a></p>
|
|
11
|
+
</blockquote>
|
|
12
|
+
<p>Five 对 Three.js 的 <code>Raycaster</code> 进行了扩展,在 <code>declare module 'three'</code> 中增加了以下属性:</p>
|
|
13
|
+
<pre><code class="typescript"><span class="hl-8">// defined in five/declare.d.ts</span><br/><span class="hl-3">declare</span><span class="hl-1"> </span><span class="hl-3">module</span><span class="hl-1"> </span><span class="hl-9">'three'</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">Raycaster</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"> * - true: 找到第一个交点后立即停止检测,返回结果。</span><br/><span class="hl-8"> * - false (默认): 检测所有可能的交点。</span><br/><span class="hl-8"> */</span><br/><span class="hl-1"> </span><span class="hl-6">firstHitOnly</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/**</span><br/><span class="hl-8"> * 自定义交点过滤器</span><br/><span class="hl-8"> * - 回调函数,返回 boolean。</span><br/><span class="hl-8"> * - true: 保留该交点。</span><br/><span class="hl-8"> * - false: 丢弃该交点。</span><br/><span class="hl-8"> */</span><br/><span class="hl-1"> </span><span class="hl-5">hitFilter</span><span class="hl-1">?: (</span><span class="hl-6">intersect</span><span class="hl-1">: </span><span class="hl-7">THREE</span><span class="hl-1">.</span><span class="hl-7">Intersection</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/**</span><br/><span class="hl-8"> * 是否由近及远排序</span><br/><span class="hl-8"> * - true (默认): 返回的结果数组按距离摄像机从近到远排序。</span><br/><span class="hl-8"> * - false: 结果顺序不确定(通常按遍历顺序)。</span><br/><span class="hl-8"> */</span><br/><span class="hl-1"> </span><span class="hl-6">sortByDistance</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">/**</span><br/><span class="hl-8"> * 作用楼层 (Five 特有逻辑)</span><br/><span class="hl-8"> * - 用于多楼层场景过滤。</span><br/><span class="hl-8"> */</span><br/><span class="hl-1"> </span><span class="hl-6">floorIndex</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-10">export</span><span class="hl-1"> </span><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">Intersection</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 命中的具体 Tile 对象 (仅 3DTiles) */</span><br/><span class="hl-1"> </span><span class="hl-6">tile</span><span class="hl-1">?: </span><span class="hl-7">Tile</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 命中的 ViewLayer 对象 */</span><br/><span class="hl-1"> </span><span class="hl-6">viewLayer</span><span class="hl-1">?: </span><span class="hl-7">ViewLayer</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 命中的 Model 对象 */</span><br/><span class="hl-1"> </span><span class="hl-6">model</span><span class="hl-1">?: </span><span class="hl-7">Model</span><span class="hl-1">;</span><br/><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-five-内置-bvh-bounding-volume-hierarchy" class="tsd-anchor-link">1. Five 内置 BVH (Bounding Volume Hierarchy)<a href="#1-five-内置-bvh-bounding-volume-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></h3>
|
|
18
|
+
<p>Five 内置了一套高效的 BVH 实现,用于优化 <code>Mesh</code> 和 <code>Points</code> 的射线检测。</p>
|
|
19
|
+
<ul>
|
|
20
|
+
<li><strong>作用</strong>: 在进行射线检测时,不直接遍历所有三角形或点,而是先与构建好的 BVH 树(包围盒层次结构)进行相交测试。只有当射线穿过包围盒时,才进一步检测内部的几何体。</li>
|
|
21
|
+
<li><strong>优势</strong>: 极大提升了复杂模型(如数十万面的 Mesh 或百万级 Points)的碰撞检测性能。</li>
|
|
22
|
+
<li><strong>透明性</strong>: 开发者通常无需手动操作 BVH,Five 在加载模型时会自动构建,并在调用 <code>intersectRaycaster</code> 时自动应用。</li>
|
|
23
|
+
</ul>
|
|
24
|
+
<h3 id="2-modelsintersectraycaster-modelintersectraycaster-vs-原生-intersectobject" class="tsd-anchor-link">2. models.intersectRaycaster / model.intersectRaycaster vs 原生 intersectObject<a href="#2-modelsintersectraycaster-modelintersectraycaster-vs-原生-intersectobject" 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
|
+
<p>Five 提供了 <code>model.intersectRaycaster</code> 方法,与 Three.js 原生的 <code>raycaster.intersectObject</code> 有显著区别:</p>
|
|
26
|
+
<table>
|
|
27
|
+
<thead>
|
|
28
|
+
<tr>
|
|
29
|
+
<th style="text-align:left">特性</th>
|
|
30
|
+
<th style="text-align:left"><code>five.model.intersectRaycaster</code></th>
|
|
31
|
+
<th style="text-align:left"><code>raycaster.intersectObject</code> (Three.js 原生)</th>
|
|
32
|
+
</tr>
|
|
33
|
+
</thead>
|
|
34
|
+
<tbody>
|
|
35
|
+
<tr>
|
|
36
|
+
<td style="text-align:left"><strong>检测范围</strong></td>
|
|
37
|
+
<td style="text-align:left">聚合检测 <code>five.model.shownModels</code> 中所有可见模型。</td>
|
|
38
|
+
<td style="text-align:left">仅检测指定的单个 Object3D 及其子节点。</td>
|
|
39
|
+
</tr>
|
|
40
|
+
<tr>
|
|
41
|
+
<td style="text-align:left"><strong>结果排序</strong></td>
|
|
42
|
+
<td style="text-align:left">自动合并所有模型的检测结果,并根据 <code>raycaster.sortByDistance</code> 排序。</td>
|
|
43
|
+
<td style="text-align:left">仅对当前 Object 及其子节点的结果排序。</td>
|
|
44
|
+
</tr>
|
|
45
|
+
<tr>
|
|
46
|
+
<td style="text-align:left"><strong>扩展支持</strong></td>
|
|
47
|
+
<td style="text-align:left"><strong>支持</strong> <code>firstHitOnly</code>, <code>hitFilter</code>, <code>sortByDistance</code> 等扩展属性。</td>
|
|
48
|
+
<td style="text-align:left">不支持 Five 的扩展属性(需手动实现)。</td>
|
|
49
|
+
</tr>
|
|
50
|
+
<tr>
|
|
51
|
+
<td style="text-align:left"><strong>内部优化</strong></td>
|
|
52
|
+
<td style="text-align:left">自动调用模型内部的优化逻辑(如 BVH, Tile3D 的空间索引)。</td>
|
|
53
|
+
<td style="text-align:left">仅进行标准的场景图遍历检测。</td>
|
|
54
|
+
</tr>
|
|
55
|
+
<tr>
|
|
56
|
+
<td style="text-align:left"><strong>使用场景</strong></td>
|
|
57
|
+
<td style="text-align:left"><strong>推荐</strong>。适用于全局点击、地板检测、物体拾取等业务场景。</td>
|
|
58
|
+
<td style="text-align:left">仅在需要检测特定原生 Object3D 时使用。</td>
|
|
59
|
+
</tr>
|
|
60
|
+
</tbody>
|
|
61
|
+
</table>
|
|
62
|
+
<h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
63
|
+
<h3 id="基础用法:检测点击位置" class="tsd-anchor-link">基础用法:检测点击位置<a href="#基础用法:检测点击位置" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
64
|
+
<p>最常见的场景是将鼠标点击的屏幕坐标转换为 3D 空间中的点。</p>
|
|
65
|
+
<pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">'three'</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">'@realsee/five'</span><span class="hl-1">;</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">();</span><br/><span class="hl-8">// ... 初始化 ...</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">raycaster</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Raycaster</span><span class="hl-1">();</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">vector</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">();</span><br/><br/><span class="hl-8">// 假设 onTap 是点击事件处理函数</span><br/><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">onTap</span><span class="hl-1">(</span><span class="hl-6">event</span><span class="hl-1">: { </span><span class="hl-6">x</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">, </span><span class="hl-6">y</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1"> }) {</span><br/><span class="hl-1"> </span><span class="hl-8">// 1. 将屏幕坐标转换为归一化设备坐标 (NDC)</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意:five.getElement() 获取 canvas 容器</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">element</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getElement</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (!</span><span class="hl-6">element</span><span class="hl-1">) </span><span class="hl-10">return</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">rect</span><span class="hl-1"> = </span><span class="hl-6">element</span><span class="hl-1">.</span><span class="hl-5">getBoundingClientRect</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> = ((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> - </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">vector</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> = -((</span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1">) / </span><span class="hl-6">rect</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1">) * </span><span class="hl-11">2</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 2. 设置射线</span><br/><span class="hl-1"> </span><span class="hl-6">raycaster</span><span class="hl-1">.</span><span class="hl-5">setFromCamera</span><span class="hl-1">(</span><span class="hl-6">vector</span><span class="hl-1">, </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">camera</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 3. 调用 Five 的检测方法</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">intersects</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">model</span><span class="hl-1">.</span><span class="hl-5">intersectRaycaster</span><span class="hl-1">(</span><span class="hl-6">raycaster</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">intersects</span><span class="hl-1">.</span><span class="hl-6">length</span><span class="hl-1"> > </span><span class="hl-11">0</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">firstHit</span><span class="hl-1"> = </span><span class="hl-6">intersects</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">'点击到了模型:'</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">object</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-9">'交点坐标 (世界坐标):'</span><span class="hl-1">, </span><span class="hl-6">firstHit</span><span class="hl-1">.</span><span class="hl-6">point</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
|
|
66
|
+
</code><button type="button">Copy</button></pre>
|
|
67
|
+
|
|
68
|
+
<h3 id="性能优化:只获取第一个交点" class="tsd-anchor-link">性能优化:只获取第一个交点<a href="#性能优化:只获取第一个交点" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
69
|
+
<p>在进行如“地面检测”或“视线遮挡检测”时,通常只需要知道最近的交点。此时开启 <code>firstHitOnly</code> 可以显著提升性能。</p>
|
|
70
|
+
<pre><code class="typescript"><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-6">raycaster</span><span class="hl-1">.</span><span class="hl-5">setFromCamera</span><span class="hl-1">(</span><span class="hl-6">mouseVector</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-8">// 开启性能优化:找到最近的一个交点后立即停止</span><br/><span class="hl-6">raycaster</span><span class="hl-1">.</span><span class="hl-6">firstHitOnly</span><span class="hl-1"> = </span><span class="hl-3">true</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 结果数组长度最多为 1</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">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-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-8">// 处理最近的交点</span><br/><span class="hl-1">}</span>
|
|
71
|
+
</code><button type="button">Copy</button></pre>
|
|
72
|
+
|
|
73
|
+
<h3 id="高级用法:使用过滤器" class="tsd-anchor-link">高级用法:使用过滤器<a href="#高级用法:使用过滤器" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
74
|
+
<p>如果你只想检测特定类型的物体(例如只检测地板,忽略天花板),可以使用 <code>hitFilter</code>。</p>
|
|
75
|
+
<pre><code class="typescript"><span class="hl-6">raycaster</span><span class="hl-1">.</span><span class="hl-5">hitFilter</span><span class="hl-1"> = (</span><span class="hl-6">intersect</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">// 示例:假设地板的法线是向上的 (0, 1, 0)</span><br/><span class="hl-1"> </span><span class="hl-8">// 只保留法线朝上的交点(地板)</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">intersect</span><span class="hl-1">.</span><span class="hl-6">face</span><span class="hl-1"> && </span><span class="hl-6">intersect</span><span class="hl-1">.</span><span class="hl-6">face</span><span class="hl-1">.</span><span class="hl-6">normal</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> > </span><span class="hl-11">0.5</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-3">true</span><span class="hl-1">; </span><span class="hl-8">// 保留</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-3">false</span><span class="hl-1">; </span><span class="hl-8">// 丢弃</span><br/><span class="hl-1">};</span><br/><br/><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>
|
|
76
|
+
</code><button type="button">Copy</button></pre>
|
|
77
|
+
|
|
78
|
+
<h2 id="debugging" class="tsd-anchor-link">Debugging<a href="#debugging" 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>
|
|
79
|
+
<ul>
|
|
80
|
+
<li><strong>验证交点</strong>: 在开发阶段,可以在交点处添加一个临时的红色小球 <code>THREE.Mesh</code>,直观地确认检测位置是否正确。</li>
|
|
81
|
+
<li><strong>检查模型可见性</strong>: <code>intersectRaycaster</code> 只会检测 <code>visible = true</code> 的模型。如果检测不到,请检查模型的可见性状态。</li>
|
|
82
|
+
<li><strong>Performance</strong>: 如果射线检测导致掉帧,检查是否频繁调用了全场景检测。尝试使用 <code>firstHitOnly</code> 或减小检测频率(如节流)。</li>
|
|
83
|
+
</ul>
|
|
84
|
+
<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>
|
|
85
|
+
<ol>
|
|
86
|
+
<li><strong>混淆 API</strong>: 错误地使用 <code>raycaster.intersectObject(five.scene)</code>。虽然这也能工作,但会失去 Five 的 BVH 优化和多模型聚合能力,导致性能下降或漏检。请始终优先使用 <code>five.model.intersectRaycaster(raycaster)</code>。</li>
|
|
87
|
+
<li><strong>忽略坐标系</strong>: <code>raycaster.setFromCamera</code> 需要 NDC 坐标(-1 到 1),而不是像素坐标。务必进行正确的坐标转换。</li>
|
|
88
|
+
<li><strong>Tile3D 模型的特殊性</strong>: 对于大型 Tile3D 场景,射线检测可能涉及动态加载的瓦片。Five 内部已处理这些逻辑,外部调用方式不变,但返回的 <code>object</code> 可能是某个具体的 Tile 节点。</li>
|
|
89
|
+
</ol>
|
|
90
|
+
<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>
|
|
91
|
+
<ul>
|
|
92
|
+
<li><a href="features_parameter.html">parameter.md</a>: 了解模型参数配置。</li>
|
|
93
|
+
</ul>
|
|
94
|
+
<hr>
|
|
95
|
+
<pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">raycast</span><span class="hl-1">, </span><span class="hl-2">bvh</span><span class="hl-1">, </span><span class="hl-2">interaction</span><span class="hl-1">, </span><span class="hl-2">performance</span><span class="hl-1">]</span>
|
|
96
|
+
</code><button type="button">Copy</button></pre>
|
|
97
|
+
|
|
98
|
+
</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="#raycast-射线检测"><span>Raycast (射线检测)</span></a><ul><li><a href="#schema-threejs-raycaster-extensions"><span>Schema: <wbr/>Three.js <wbr/>Raycaster <wbr/>Extensions</span></a></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#1-five-内置-bvh-bounding-volume-hierarchy"><span>1. <wbr/>Five 内置 <wbr/>BVH (<wbr/>Bounding <wbr/>Volume <wbr/>Hierarchy)</span></a></li><li><a href="#2-modelsintersectraycaster-modelintersectraycaster-vs-原生-intersectobject"><span>2. models.intersect<wbr/>Raycaster / model.intersect<wbr/>Raycaster vs 原生 intersect<wbr/>Object</span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#基础用法:检测点击位置"><span>基础用法:检测点击位置</span></a></li><li><a href="#性能优化:只获取第一个交点"><span>性能优化:只获取第一个交点</span></a></li><li><a href="#高级用法:使用过滤器"><span>高级用法:使用过滤器</span></a></li></ul></li><li><a href="#debugging"><span>Debugging</span></a></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,78 @@
|
|
|
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/request-proxy | 如视 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/request-proxy</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="request-proxy-请求代理" class="tsd-anchor-link">Request Proxy (请求代理)<a href="#request-proxy-请求代理" 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>: <code>requestProxy</code> 是 Five 初始化时的关键参数,用于在发起网络请求前对 URL 进行拦截和修改,常用于鉴权、资源重定向或 CDN 域名替换。</li>
|
|
4
|
+
<li><strong>Schema</strong>: <code>(url: string) => string | Promise<string></code></li>
|
|
5
|
+
<li><strong>Concepts</strong>: 请求拦截、资源重定向、鉴权签名。</li>
|
|
6
|
+
<li><strong>Configuration</strong>: <code>FiveInitArgs.requestProxy</code>。</li>
|
|
7
|
+
<li><strong>Examples</strong>: CDN 替换、私有化部署鉴权、调试模式。</li>
|
|
8
|
+
</ul>
|
|
9
|
+
<h2 id="schema" class="tsd-anchor-link">Schema<a href="#schema" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
10
|
+
<blockquote>
|
|
11
|
+
<p><strong>Definition</strong>: <a href="../../five/application/fiveInitArgs.d.ts">FiveInitArgs</a></p>
|
|
12
|
+
</blockquote>
|
|
13
|
+
<pre><code class="typescript"><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">FiveInitArgs</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">@description</span><span class="hl-8"> 在 Five 内部发起任何网络请求(如加载图片、模型、配置)之前调用。</span><br/><span class="hl-8"> * </span><span class="hl-3">@param</span><span class="hl-8"> </span><span class="hl-6">url</span><span class="hl-8"> - 原始请求 URL</span><br/><span class="hl-8"> * </span><span class="hl-3">@returns</span><span class="hl-8"> 修改后的 URL (string) 或异步返回修改后的 URL (Promise<string>)</span><br/><span class="hl-8"> */</span><br/><span class="hl-1"> </span><span class="hl-5">requestProxy</span><span class="hl-1">?: (</span><span class="hl-6">url</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">) </span><span class="hl-3">=></span><span class="hl-1"> </span><span class="hl-7">string</span><span class="hl-1"> | </span><span class="hl-7">Promise</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="拦截时机" class="tsd-anchor-link">拦截时机<a href="#拦截时机" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
18
|
+
<p>Five 内部加载资源(全景图瓦片、3D 模型、纹理贴图等)时,会通过统一的 Fetcher 层发起请求。<code>requestProxy</code> 钩子函数会在每次请求发起<strong>前</strong>被触发。</p>
|
|
19
|
+
<h3 id="核心用途" class="tsd-anchor-link">核心用途<a href="#核心用途" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
20
|
+
<ol>
|
|
21
|
+
<li><strong>域名替换 (CDN Domain Sharding)</strong>: 将资源请求分散到多个 CDN 域名以突破浏览器并发限制。</li>
|
|
22
|
+
<li><strong>鉴权签名 (Authentication)</strong>: 针对私有化部署或受保护资源,在 URL 后追加鉴权 Token (如 SAS Token)。</li>
|
|
23
|
+
<li><strong>资源重定向 (Redirection)</strong>: 在开发环境下将线上资源重定向到本地或测试环境。</li>
|
|
24
|
+
<li><strong>协议适配</strong>: 强制将 <code>http</code> 协议升级为 <code>https</code>。</li>
|
|
25
|
+
</ol>
|
|
26
|
+
<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>
|
|
27
|
+
<p><code>requestProxy</code> 是 <code>Five</code> 构造函数的配置项之一。</p>
|
|
28
|
+
<table>
|
|
29
|
+
<thead>
|
|
30
|
+
<tr>
|
|
31
|
+
<th style="text-align:left">参数</th>
|
|
32
|
+
<th style="text-align:left">类型</th>
|
|
33
|
+
<th style="text-align:left">默认值</th>
|
|
34
|
+
<th style="text-align:left">说明</th>
|
|
35
|
+
</tr>
|
|
36
|
+
</thead>
|
|
37
|
+
<tbody>
|
|
38
|
+
<tr>
|
|
39
|
+
<td style="text-align:left"><code>requestProxy</code></td>
|
|
40
|
+
<td style="text-align:left"><code>(url: string) => string | Promise<string></code></td>
|
|
41
|
+
<td style="text-align:left"><code>undefined</code></td>
|
|
42
|
+
<td style="text-align:left">代理函数,返回修改后的 URL。支持同步或异步返回。</td>
|
|
43
|
+
</tr>
|
|
44
|
+
</tbody>
|
|
45
|
+
</table>
|
|
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="1-基础用法:cdn-域名替换" class="tsd-anchor-link">1. 基础用法:CDN 域名替换<a href="#1-基础用法:cdn-域名替换" 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>将图片资源请求分散到不同的 CDN 节点,加速加载。</p>
|
|
49
|
+
<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-5">requestProxy</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">url</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-10">return</span><span class="hl-1"> </span><span class="hl-6">url</span><span class="hl-1">.</span><span class="hl-5">replace</span><span class="hl-1">(</span><span class="hl-9">'//vrlab-public.ljcdn.com/'</span><span class="hl-1">, </span><span class="hl-9">'//vr-public.realsee-cdn.cn/'</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
50
|
+
</code><button type="button">Copy</button></pre>
|
|
51
|
+
|
|
52
|
+
<h3 id="2-进阶用法:异步鉴权-async-auth" class="tsd-anchor-link">2. 进阶用法:异步鉴权 (Async Auth)<a href="#2-进阶用法:异步鉴权-async-auth" 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>对于需要动态获取 Token 的场景,可以使用 <code>Promise</code> 异步返回 URL。</p>
|
|
54
|
+
<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-5">requestProxy</span><span class="hl-6">:</span><span class="hl-1"> </span><span class="hl-3">async</span><span class="hl-1"> (</span><span class="hl-6">url</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-10">if</span><span class="hl-1"> (</span><span class="hl-6">url</span><span class="hl-1">.</span><span class="hl-5">includes</span><span class="hl-1">(</span><span class="hl-9">'private-bucket'</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">token</span><span class="hl-1"> = </span><span class="hl-10">await</span><span class="hl-1"> </span><span class="hl-5">fetchToken</span><span class="hl-1">(); </span><span class="hl-8">// 假设 fetchToken 是一个获取鉴权的异步函数</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">separator</span><span class="hl-1"> = </span><span class="hl-6">url</span><span class="hl-1">.</span><span class="hl-5">includes</span><span class="hl-1">(</span><span class="hl-9">'?'</span><span class="hl-1">) ? </span><span class="hl-9">'&'</span><span class="hl-1"> : </span><span class="hl-9">'?'</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">url</span><span class="hl-3">}${</span><span class="hl-6">separator</span><span class="hl-3">}</span><span class="hl-9">token=</span><span class="hl-3">${</span><span class="hl-6">token</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-6">url</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
55
|
+
</code><button type="button">Copy</button></pre>
|
|
56
|
+
|
|
57
|
+
<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>
|
|
58
|
+
<p>在开发阶段,将特定资源重定向到本地文件。</p>
|
|
59
|
+
<pre><code class="typescript"><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">proxyMap</span><span class="hl-1">: </span><span class="hl-7">Record</span><span class="hl-1"><</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">string</span><span class="hl-1">> = {};</span><br/><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">five</span><span class="hl-1"> = </span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-5">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-5">requestProxy</span><span class="hl-6">:</span><span class="hl-1"> (</span><span class="hl-6">url</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">// 如果该 URL 在映射表中存在(例如通过 <input type="file"> 加载的本地 Blob URL),则使用映射值</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (</span><span class="hl-6">proxyMap</span><span class="hl-1">[</span><span class="hl-6">url</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">`[Proxy] Redirecting </span><span class="hl-3">${</span><span class="hl-6">url</span><span class="hl-3">}</span><span class="hl-9"> -> </span><span class="hl-3">${</span><span class="hl-6">proxyMap</span><span class="hl-12">[</span><span class="hl-6">url</span><span class="hl-12">]</span><span class="hl-3">}</span><span class="hl-9">`</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-6">proxyMap</span><span class="hl-1">[</span><span class="hl-6">url</span><span class="hl-1">];</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-6">url</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
60
|
+
</code><button type="button">Copy</button></pre>
|
|
61
|
+
|
|
62
|
+
<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>
|
|
63
|
+
<ol>
|
|
64
|
+
<li><strong>死循环风险</strong>: 不要在 <code>requestProxy</code> 内部再次发起会导致 <code>requestProxy</code> 触发的 Five 资源请求,否则可能导致递归调用。</li>
|
|
65
|
+
<li><strong>性能损耗</strong>: <code>requestProxy</code> 会在<strong>所有</strong>资源请求前触发(包括成百上千个瓦片请求)。请确保该函数执行效率极高,避免进行耗时的同步操作。如果是异步操作,应做好缓存。</li>
|
|
66
|
+
<li><strong>URL 格式</strong>: 确保返回的 URL 格式正确。如果原 URL 包含 Query 参数,拼接 Token 时要注意判断是使用 <code>?</code> 还是 <code>&</code>。</li>
|
|
67
|
+
<li><strong>缓存一致性</strong>: 如果修改了 URL(例如加了 Token),可能会影响浏览器的缓存命中策略。</li>
|
|
68
|
+
</ol>
|
|
69
|
+
<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>
|
|
70
|
+
<ul>
|
|
71
|
+
<li><a href="features_parameter.html">Parameter</a>: Five 初始化参数总览。</li>
|
|
72
|
+
<li><a href="features_load-external-model.html">Load External Model</a>: 加载外部模型时也会触发 requestProxy。</li>
|
|
73
|
+
</ul>
|
|
74
|
+
<hr>
|
|
75
|
+
<pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">configuration</span><span class="hl-1">, </span><span class="hl-2">network</span><span class="hl-1">, </span><span class="hl-2">proxy</span><span class="hl-1">, </span><span class="hl-2">authentication</span><span class="hl-1">]</span>
|
|
76
|
+
</code><button type="button">Copy</button></pre>
|
|
77
|
+
|
|
78
|
+
</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="#request-proxy-请求代理"><span>Request <wbr/>Proxy (请求代理)</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="#拦截时机"><span>拦截时机</span></a></li><li><a href="#核心用途"><span>核心用途</span></a></li></ul></li><li><a href="#configuration"><span>Configuration</span></a></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#1-基础用法:cdn-域名替换"><span>1. 基础用法:<wbr/>CDN 域名替换</span></a></li><li><a href="#2-进阶用法:异步鉴权-async-auth"><span>2. 进阶用法:异步鉴权 (<wbr/>Async <wbr/>Auth)</span></a></li><li><a href="#3-开发调试:本地资源代理"><span>3. 开发调试:本地资源代理</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>
|