@realsee/five 6.9.0-alpha.0 → 6.9.0-alpha.1
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/ai_guides/3dgs-current-branch-changes.md +237 -0
- package/docs/assets/hierarchy.js +1 -1
- package/docs/assets/highlight.css +18 -18
- package/docs/assets/navigation.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/classes/five.AdaptiveLuminancePass.html +1 -1
- package/docs/classes/five.BoundingMesh.html +1 -1
- package/docs/classes/five.Camera.html +1 -1
- package/docs/classes/five.EyeDomeLightingPass.html +1 -1
- package/docs/classes/five.Five.html +4 -4
- package/docs/classes/five.FivePass.html +1 -1
- package/docs/classes/five.FlowingFireworks3DPass.html +30 -0
- package/docs/classes/five.FlowingLight2DPass.html +1 -1
- package/docs/classes/five.FlowingLight3DPass.html +1 -1
- package/docs/classes/five.GaussianBlurPass.html +1 -1
- package/docs/classes/five.InternalWebGLRenderer.html +1 -1
- package/docs/classes/five.Model.html +2 -2
- package/docs/classes/five.ModelScene.html +1 -1
- package/docs/classes/five.NetworkSubscribe.html +2 -2
- package/docs/classes/five.PBMContainer.html +1 -1
- package/docs/classes/five.PBMCustomShader.html +2 -2
- package/docs/classes/five.PBMGSObject.html +7 -7
- package/docs/classes/five.PBMGroup.html +1 -1
- package/docs/classes/five.PBMMesh.html +1 -1
- package/docs/classes/five.PBMMeshMaterial.html +1 -1
- package/docs/classes/five.PBMPanoFilter.html +2 -2
- package/docs/classes/five.PBMPointCloud.html +1 -1
- package/docs/classes/five.PBMPointCloudMaterial.html +1 -1
- package/docs/classes/five.PBMSkinnedMesh.html +1 -1
- package/docs/classes/five.PBMUpdateable.html +2 -2
- package/docs/classes/five.PanoCircleMesh.html +1 -1
- package/docs/classes/five.PanoCircleMeshCustom.html +1 -1
- package/docs/classes/five.PanoCircleMeshSolid.html +1 -1
- package/docs/classes/five.Parameter.html +1 -1
- package/docs/classes/five.Scene.html +1 -1
- package/docs/classes/five.Subscribe.html +2 -2
- package/docs/classes/five.Tile3D.html +1 -1
- package/docs/classes/five.TileNode.html +1 -1
- package/docs/classes/five.TrajectoryNode.html +1 -1
- package/docs/classes/five.WorkResolvedObserver.html +2 -2
- 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 +2 -2
- 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 +1 -1
- package/docs/classes/line.LineMaterial.html +1 -1
- package/docs/classes/line.LineSegmentsGeometry.html +1 -1
- 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 +1 -1
- package/docs/classes/plugins.CSS2DObject.html +1 -1
- package/docs/classes/plugins.CSS3DObject.html +1 -1
- package/docs/classes/plugins.CSS3DSprite.html +1 -1
- package/docs/classes/plugins.InstancedPrefabBufferGeometry.html +1 -1
- package/docs/classes/plugins.Object3DHelperController.html +1 -1
- package/docs/classes/plugins.PointBufferGeometry.html +1 -1
- package/docs/classes/plugins.PrefabBufferGeometry.html +1 -1
- package/docs/classes/plugins.RoundedBoxGeometry.html +1 -1
- package/docs/classes/react.Store.html +1 -1
- package/docs/classes/sticker.Sticker.html +2 -2
- package/docs/classes/vfx.Airflow.html +1 -1
- package/docs/classes/vfx.Flame.html +1 -1
- package/docs/classes/vfx.Particle.html +1 -1
- package/docs/classes/vfx.ParticleGPU.html +1 -1
- package/docs/classes/vfx.SpotLight.html +1 -1
- package/docs/documents/3dgs-current-branch-changes.html +205 -0
- package/docs/documents/api.html +6 -6
- package/docs/documents/features_3dtile.html +4 -4
- package/docs/documents/features_camera-animation.html +10 -10
- package/docs/documents/features_clipper.html +3 -3
- package/docs/documents/features_coordinate-system.html +3 -3
- package/docs/documents/features_event.html +10 -10
- package/docs/documents/features_five.html +4 -4
- package/docs/documents/features_flowing-fireworks-3d-pass.html +7 -7
- package/docs/documents/features_flowing-light-2d-pass.html +11 -11
- package/docs/documents/features_flowing-light-3d-pass.html +11 -11
- package/docs/documents/features_gaussian-blur-pass.html +6 -6
- package/docs/documents/features_gesture.html +6 -6
- package/docs/documents/features_get-screen-pixels.html +4 -4
- package/docs/documents/features_image-options.html +5 -5
- package/docs/documents/features_load-external-model.html +8 -8
- package/docs/documents/features_load-progress.html +7 -7
- package/docs/documents/features_material.html +3 -3
- package/docs/documents/features_mode.html +11 -11
- package/docs/documents/features_model.html +4 -4
- package/docs/documents/features_move-pano-effect.html +5 -5
- package/docs/documents/features_multi-work.html +5 -5
- package/docs/documents/features_pano-filter.html +3 -3
- package/docs/documents/features_pano-tile.html +4 -4
- package/docs/documents/features_pano-uv.html +4 -4
- package/docs/documents/features_parameter.html +7 -7
- package/docs/documents/features_plugin.html +4 -4
- package/docs/documents/features_postprocessing.html +5 -5
- package/docs/documents/features_raycast.html +4 -4
- package/docs/documents/features_request-proxy.html +4 -4
- package/docs/documents/features_screen-project.html +3 -3
- package/docs/documents/features_state.html +4 -4
- package/docs/documents/features_view-layer.html +4 -4
- package/docs/documents/features_work.html +5 -5
- package/docs/documents/quick-start.html +2 -2
- package/docs/documents/release_notes_6.6.html +4 -4
- package/docs/documents/release_notes_6.7.html +14 -14
- package/docs/documents/release_notes_6.8.html +4 -4
- package/docs/functions/react.useFiveAction.html +6 -6
- 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.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.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.useFiveModelIntersectRaycaster.html +2 -2
- package/docs/functions/vue.useFiveProject2d.html +2 -2
- package/docs/functions/vue.useFiveState.html +1 -1
- package/docs/functions/vue.useFiveWorks.html +2 -2
- package/docs/hierarchy.html +1 -1
- package/docs/interfaces/five.AddableObject.html +1 -1
- package/docs/interfaces/five.AjaxOptions.html +1 -1
- package/docs/interfaces/five.BaseEvent.html +1 -1
- package/docs/interfaces/five.BaseExtendableEvent.html +1 -1
- package/docs/interfaces/five.EventCallback.html +1 -1
- package/docs/interfaces/five.FiveInitArgs.html +2 -2
- package/docs/interfaces/five.GestureEvent.html +1 -1
- package/docs/interfaces/five.ImageOptions.html +1 -1
- package/docs/interfaces/five.IntersectEvent.html +1 -1
- package/docs/interfaces/five.IntersectMesh.html +1 -1
- package/docs/interfaces/five.IntersectMeshInterface.html +1 -1
- package/docs/interfaces/five.Intersection.html +1 -1
- package/docs/interfaces/five.LooseWorkWithExtrinsics.html +1 -1
- package/docs/interfaces/five.ModeChangeEvent.html +1 -1
- package/docs/interfaces/five.ModelControllerCustomInitArgs.html +1 -1
- package/docs/interfaces/five.ModelEvent.html +1 -1
- package/docs/interfaces/five.ModelSceneEvent.html +1 -1
- package/docs/interfaces/five.ModelTileEvent.html +1 -1
- package/docs/interfaces/five.MovePanoOptions.html +1 -1
- package/docs/interfaces/five.NetworkAbortError.html +1 -1
- package/docs/interfaces/five.NetworkFirbiddenError.html +1 -1
- package/docs/interfaces/five.NetworkOptions.html +1 -1
- package/docs/interfaces/five.NetworkProxyError.html +1 -1
- package/docs/interfaces/five.NetworkResourceEvent.html +1 -1
- package/docs/interfaces/five.NetworkResponseError.html +1 -1
- package/docs/interfaces/five.NetworkTimeoutError.html +1 -1
- package/docs/interfaces/five.ObjectEvent.html +1 -1
- package/docs/interfaces/five.PBMMaterial.html +1 -1
- package/docs/interfaces/five.PBMMeshMaterialParameters.html +1 -1
- package/docs/interfaces/five.PBMPointCloudMaterialParameters.html +1 -1
- package/docs/interfaces/five.PanoCircleMeshInterface.html +1 -1
- package/docs/interfaces/five.PanoEvent.html +1 -1
- package/docs/interfaces/five.PanoPrepareEvent.html +1 -1
- package/docs/interfaces/five.PanoTextureEvent.html +1 -1
- package/docs/interfaces/five.PanoramaControllerCustomInitArgs.html +1 -1
- package/docs/interfaces/five.PanoramaLikeControllerCustomInitArgs.html +1 -1
- package/docs/interfaces/five.ParameterMaterialValue.html +1 -1
- package/docs/interfaces/five.ParameterTilesetValue.html +1 -1
- package/docs/interfaces/five.ParameterValue.html +1 -1
- package/docs/interfaces/five.Pose.html +1 -1
- package/docs/interfaces/five.RenderEvent.html +1 -1
- package/docs/interfaces/five.ResolvedParameterValue.html +1 -1
- package/docs/interfaces/five.State.html +1 -1
- package/docs/interfaces/five.StateEvent.html +1 -1
- package/docs/interfaces/five.TextureOptions.html +1 -1
- package/docs/interfaces/five.TopviewControllerCustomInitArgs.html +1 -1
- package/docs/interfaces/five.VRPanoramaControllerCustomInitArgs.html +1 -1
- package/docs/interfaces/five.ViewLayer.html +1 -1
- package/docs/interfaces/five.WorkCubeImage.html +1 -1
- package/docs/interfaces/five.WorkImage.html +1 -1
- package/docs/interfaces/five.WorkObserver.html +2 -2
- package/docs/interfaces/five.WorkObserverProto.html +1 -1
- package/docs/interfaces/five.WorkTile.html +1 -1
- package/docs/interfaces/five.WorksEvent.html +1 -1
- package/docs/interfaces/five.XRControllerEvent.html +1 -1
- package/docs/interfaces/five.XRGestureEvent.html +1 -1
- package/docs/interfaces/five.XRPanoramaControllerCustomInitArgs.html +1 -1
- package/docs/interfaces/five.XRSessionEvent.html +1 -1
- package/docs/interfaces/plugins.BackgroundPluginController.html +1 -1
- package/docs/interfaces/plugins.BackgroundPluginType.EventMap.html +1 -1
- package/docs/interfaces/plugins.BasePlugin.State.html +1 -1
- package/docs/interfaces/plugins.CSS2DPluginController.html +1 -1
- package/docs/interfaces/plugins.CSS2DPluginType.EventMap.html +1 -1
- package/docs/interfaces/plugins.CSS2DPluginType.State.html +1 -1
- package/docs/interfaces/plugins.CSS3DPluginController.html +1 -1
- package/docs/interfaces/plugins.CSS3DPluginType.EventMap.html +1 -1
- package/docs/interfaces/plugins.CSS3DPluginType.State.html +1 -1
- package/docs/interfaces/plugins.DynamicPathLinePluginController.html +1 -1
- package/docs/interfaces/plugins.DynamicPathLinePluginType.EventMap.html +1 -1
- package/docs/interfaces/plugins.DynamicPathLinePluginType.State.html +1 -1
- package/docs/interfaces/plugins.GaussianSplattingEntranceAnimationController.html +1 -1
- package/docs/interfaces/plugins.GaussianSplattingEntranceAnimationPluginType.EventMap.html +1 -1
- package/docs/interfaces/plugins.GaussianSplattingEntranceAnimationPluginType.State.html +1 -1
- package/docs/interfaces/plugins.ItemMaskController.html +1 -1
- package/docs/interfaces/plugins.ItemMaskPluginType.EventMap.html +1 -1
- package/docs/interfaces/plugins.ItemMaskPluginType.State.html +1 -1
- package/docs/interfaces/plugins.Object3DHelperPluginType.BaseController.html +1 -1
- package/docs/interfaces/plugins.Object3DHelperPluginType.BaseHelper.html +1 -1
- package/docs/interfaces/plugins.Object3DHelperPluginType.BoundingBoxController.html +1 -1
- package/docs/interfaces/plugins.Object3DHelperPluginType.MoveController.html +1 -1
- package/docs/interfaces/plugins.Object3DHelperPluginType.MoveHelperAbstract.html +1 -1
- package/docs/interfaces/plugins.Object3DHelperPluginType.RotateController.html +1 -1
- package/docs/interfaces/plugins.Object3DHelperPluginType.RotateHelperAbstract.html +1 -1
- package/docs/interfaces/plugins.OrientationPluginController.html +1 -1
- package/docs/interfaces/plugins.OrientationPluginType.EventMap.html +1 -1
- package/docs/interfaces/plugins.OrientationPluginType.State.html +1 -1
- package/docs/interfaces/plugins.PanoAnimeController.html +1 -1
- package/docs/interfaces/plugins.PanoAnimePluginType.EventMap.html +1 -1
- package/docs/interfaces/plugins.PanoAnimePluginType.State.html +1 -1
- package/docs/interfaces/plugins.PluginTemplateType.EventMap.html +1 -1
- package/docs/interfaces/plugins.PluginTemplateType.State.html +1 -1
- package/docs/interfaces/plugins.TrajectoryController.html +1 -1
- package/docs/interfaces/react.FiveInjectionTypes.html +2 -2
- package/docs/interfaces/react.UseFivePluginOptions.html +1 -1
- package/docs/interfaces/react.UseFivePluginOptionsWithCreate.html +1 -1
- package/docs/modules/five.html +1 -1
- package/docs/modules.html +1 -1
- package/docs/types/five.FlowingFireworks3DPassLine.html +16 -0
- package/docs/types/five.ParseOptions.html +1 -1
- package/docs/types/plugins.BasePlugin.EventMap.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/index.js +177 -106
- package/five/index.mjs +795 -639
- package/five/model/objects/pbmGaussianSplattingObject.d.ts +5 -5
- package/five/renderer/index.d.ts +1 -1
- package/five/renderer/postprocessing/index.d.ts +1 -1
- package/five/renderer/postprocessing/passes/flowing-fireworks-3d-pass.d.ts +4 -5
- package/gltf-loader/index.js +3 -3
- package/gltf-loader/index.mjs +3 -3
- package/line/index.js +3 -3
- package/line/index.mjs +3 -3
- package/package.json +1 -1
- package/{pbmGaussianSplattingObject-B2uXNUOB.cjs → pbmGaussianSplattingObject-C6i7CUTu.cjs} +3 -3
- package/{pbmGaussianSplattingObject-yJQySQfR.js → pbmGaussianSplattingObject-CaE6q4r-.js} +16 -20
- package/plugins/index.js +2 -2
- package/plugins/index.mjs +2 -2
- package/react/index.js +2 -2
- package/react/index.mjs +2 -2
- package/shader-lib/index.js +2 -2
- package/shader-lib/index.mjs +2 -2
- 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 +2 -2
- 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 +151 -80
- package/vfx/index.js +2 -2
- package/vfx/index.mjs +2 -2
- package/vue/index.js +2 -2
- package/vue/index.mjs +2 -2
- package/work-downloader/index.js +2 -2
- package/work-downloader/index.mjs +2 -2
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<p><strong>Definition</strong>: <a href="../../five/application/mode.d.ts">Mode</a>, <a href="../../five/application/fiveInitArgs.d.ts">FiveInitArgs</a></p>
|
|
11
11
|
</blockquote>
|
|
12
12
|
<p><strong>Mode</strong> 类型定义如下:</p>
|
|
13
|
-
<pre><code class="ts"><span class="hl-
|
|
13
|
+
<pre><code class="ts"><span class="hl-8">type</span><span class="hl-1"> </span><span class="hl-9">Mode</span><span class="hl-1"> =</span><br/><span class="hl-1"> | </span><span class="hl-10">"Panorama"</span><span class="hl-1"> </span><span class="hl-7">// 全景图游走模式</span><br/><span class="hl-1"> | </span><span class="hl-10">"Mapview"</span><span class="hl-1"> </span><span class="hl-7">// 模型地图模式</span><br/><span class="hl-1"> | </span><span class="hl-10">"Floorplan"</span><span class="hl-1"> </span><span class="hl-7">// 模型户型图模式</span><br/><span class="hl-1"> | </span><span class="hl-10">"Topview"</span><span class="hl-1"> </span><span class="hl-7">// 模型平面图模式</span><br/><span class="hl-1"> | </span><span class="hl-10">"Model"</span><span class="hl-1"> </span><span class="hl-7">// 模型游走模式</span><br/><span class="hl-1"> | </span><span class="hl-10">"VRPanorama"</span><span class="hl-1"> </span><span class="hl-7">// Cardboard VR 眼镜模式</span><br/><span class="hl-1"> | </span><span class="hl-10">"XRPanorama"</span><span class="hl-1"> </span><span class="hl-7">// WebXR 虚拟现实 VR 眼镜模式</span>
|
|
14
14
|
</code><button type="button">Copy</button></pre>
|
|
15
15
|
|
|
16
16
|
<h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
@@ -49,50 +49,50 @@
|
|
|
49
49
|
<h2 id="configuration" class="tsd-anchor-link">Configuration<a href="#configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
50
50
|
<p>初始化 <code>new Five()</code> 时,可以通过配置参数对各个模式进行个性化定制。</p>
|
|
51
51
|
<h3 id="panorama-全景漫游" class="tsd-anchor-link">Panorama (全景漫游)<a href="#panorama-全景漫游" 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>
|
|
52
|
-
<pre><code class="typescript"><span class="hl-
|
|
52
|
+
<pre><code class="typescript"><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">PanoramaConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认相机俯仰角 (Default: 0) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultLatitude</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认垂直 FOV (Default: 90) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultFov</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 最大垂直 FOV (Default: 120) */</span><br/><span class="hl-1"> </span><span class="hl-5">maxFov</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 最小垂直 FOV (Default: 20) */</span><br/><span class="hl-1"> </span><span class="hl-5">minFov</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 最大俯仰角 */</span><br/><span class="hl-1"> </span><span class="hl-5">maxLatitude</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1"> | ((</span><span class="hl-5">fov</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">) </span><span class="hl-8">=></span><span class="hl-1"> </span><span class="hl-9">number</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-7">/** 最小俯仰角 */</span><br/><span class="hl-1"> </span><span class="hl-5">minLatitude</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1"> | ((</span><span class="hl-5">fov</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">) </span><span class="hl-8">=></span><span class="hl-1"> </span><span class="hl-9">number</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-7">/** 点位间移动速度 (m/s) (Default: 3.6) */</span><br/><span class="hl-1"> </span><span class="hl-5">moveSpeed</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 最远可移动观察点距离 */</span><br/><span class="hl-1"> </span><span class="hl-5">maxAccessibleDistance</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 点击地面判定范围 */</span><br/><span class="hl-1"> </span><span class="hl-5">panoTapTriggerRadius</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 航拍点最小高度 (Default: 5) */</span><br/><span class="hl-1"> </span><span class="hl-5">aerialObserverMinHeight</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 全景进入渐变时长 (s) */</span><br/><span class="hl-1"> </span><span class="hl-5">tileAppearDuration</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 全景瓦片最大并发请求数 */</span><br/><span class="hl-1"> </span><span class="hl-5">tileMaxRequest</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/**</span><br/><span class="hl-7"> * 地面观察点标识自定义创建器</span><br/><span class="hl-7"> * </span><span class="hl-8">@param</span><span class="hl-7"> </span><span class="hl-5">observer</span><span class="hl-7"> - 观察点数据</span><br/><span class="hl-7"> * </span><span class="hl-8">@param</span><span class="hl-7"> </span><span class="hl-5">options</span><span class="hl-7"> - 配置项,如航拍点最小高度</span><br/><span class="hl-7"> * </span><span class="hl-8">@returns</span><span class="hl-7"> PanoCircleMeshInterface 实例 (如 PanoCircleMesh, PanoCircleMeshSolid)</span><br/><span class="hl-7"> */</span><br/><span class="hl-1"> </span><span class="hl-4">panoCircleMeshCreator</span><span class="hl-1">?: (</span><br/><span class="hl-1"> </span><span class="hl-5">observer</span><span class="hl-1">: </span><span class="hl-9">WorkObserver</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">options</span><span class="hl-1">: { </span><span class="hl-5">aerialObserverMinHeight</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1"> }</span><br/><span class="hl-1"> ) </span><span class="hl-8">=></span><span class="hl-1"> </span><span class="hl-9">PanoCircleMeshInterface</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
53
53
|
</code><button type="button">Copy</button></pre>
|
|
54
54
|
|
|
55
55
|
<h3 id="mapview-模型地图" class="tsd-anchor-link">Mapview (模型地图)<a href="#mapview-模型地图" 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>
|
|
56
|
-
<pre><code class="typescript"><span class="hl-
|
|
56
|
+
<pre><code class="typescript"><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">MapviewConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认水平角 (Default: Math.PI / 4) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultLongitude</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认俯仰角 (Default: Math.PI / 4) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultLatitude</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认相机距离 (Default: 150) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultDistance</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 相机类型: 'perspective' | 'orthographic' | 'auto' (Default: 'auto') */</span><br/><span class="hl-1"> </span><span class="hl-5">cameraType</span><span class="hl-1">?: </span><span class="hl-10">"perspective"</span><span class="hl-1"> | </span><span class="hl-10">"orthographic"</span><span class="hl-1"> | </span><span class="hl-10">"auto"</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 相机移动范围限制 */</span><br/><span class="hl-1"> </span><span class="hl-5">cameraFence</span><span class="hl-1">?: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Box3</span><span class="hl-1"> | </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Sphere</span><span class="hl-1"> | </span><span class="hl-9">null</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
57
57
|
</code><button type="button">Copy</button></pre>
|
|
58
58
|
|
|
59
59
|
<h3 id="floorplan-模型户型" class="tsd-anchor-link">Floorplan (模型户型)<a href="#floorplan-模型户型" 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>
|
|
60
|
-
<pre><code class="typescript"><span class="hl-
|
|
60
|
+
<pre><code class="typescript"><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">FloorplanConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认水平角 (Default: Math.PI / 4) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultLongitude</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认俯仰角 (Default: Math.PI / 4) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultLatitude</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认垂直 FOV (Default: 80) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultFov</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
61
61
|
</code><button type="button">Copy</button></pre>
|
|
62
62
|
|
|
63
63
|
<h3 id="topview-模型平面" class="tsd-anchor-link">Topview (模型平面)<a href="#topview-模型平面" 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
|
-
<pre><code class="typescript"><span class="hl-
|
|
64
|
+
<pre><code class="typescript"><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">TopviewConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认水平角 (Default: 0) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultLongitude</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">/** 默认俯仰角 (Default: Math.PI / 2) */</span><br/><span class="hl-1"> </span><span class="hl-5">defaultLatitude</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
65
65
|
</code><button type="button">Copy</button></pre>
|
|
66
66
|
|
|
67
67
|
<h3 id="model-模型漫游" class="tsd-anchor-link">Model (模型漫游)<a href="#model-模型漫游" 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>
|
|
68
68
|
<p>继承自 Panorama 配置,支持 FOV、俯仰角限制及移动速度等参数。</p>
|
|
69
|
-
<pre><code class="typescript"><span class="hl-
|
|
69
|
+
<pre><code class="typescript"><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">ModelConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">moveSpeed</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-5">defaultFov</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-7">// ... 同 Panorama 基础配置</span><br/><span class="hl-1">}</span>
|
|
70
70
|
</code><button type="button">Copy</button></pre>
|
|
71
71
|
|
|
72
72
|
<h3 id="vrpanorama-xrpanorama-vr-模式" class="tsd-anchor-link">VRPanorama / XRPanorama (VR 模式)<a href="#vrpanorama-xrpanorama-vr-模式" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
73
73
|
<p>继承自 Panorama 配置,但移除了俯仰角限制(<code>maxLatitude</code>, <code>minLatitude</code>),因为 VR 模式下视角由设备姿态控制。</p>
|
|
74
|
-
<pre><code class="typescript"><span class="hl-
|
|
74
|
+
<pre><code class="typescript"><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">VRPanoramaConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">// ... 同 Panorama 基础配置</span><br/><span class="hl-1"> </span><span class="hl-7">// 移除: maxLatitude, minLatitude</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">XRPanoramaConfig</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">// ... 同 Panorama 基础配置</span><br/><span class="hl-1"> </span><span class="hl-7">// 移除: maxLatitude, minLatitude</span><br/><span class="hl-1">}</span>
|
|
75
75
|
</code><button type="button">Copy</button></pre>
|
|
76
76
|
|
|
77
77
|
<h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
78
78
|
<h3 id="快速上手-quick-example" class="tsd-anchor-link">快速上手 (Quick Example)<a href="#快速上手-quick-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
79
79
|
<p>使用 <code>setState</code> 切换模式:</p>
|
|
80
|
-
<pre><code class="ts"><span class="hl-
|
|
80
|
+
<pre><code class="ts"><span class="hl-7">// 切换到模型地图模式</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">setState</span><span class="hl-1">({ </span><span class="hl-5">mode:</span><span class="hl-1"> </span><span class="hl-10">'Mapview'</span><span class="hl-1"> });</span>
|
|
81
81
|
</code><button type="button">Copy</button></pre>
|
|
82
82
|
|
|
83
83
|
<h3 id="初始化配置示例-initialization-configuration-example" class="tsd-anchor-link">初始化配置示例 (Initialization Configuration Example)<a href="#初始化配置示例-initialization-configuration-example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
84
84
|
<p>在 <code>new Five()</code> 时配置各个模式的默认参数:</p>
|
|
85
|
-
<pre><code class="typescript"><span class="hl-
|
|
85
|
+
<pre><code class="typescript"><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">Five</span><span class="hl-1">, </span><span class="hl-5">PanoCircleMeshSolid</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">'@realsee/five'</span><span class="hl-1">;</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">Five</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-7">// 全景模式配置</span><br/><span class="hl-1"> </span><span class="hl-5">panorama:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">// 限制垂直视角范围</span><br/><span class="hl-1"> </span><span class="hl-5">minFov:</span><span class="hl-1"> </span><span class="hl-3">40</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">maxFov:</span><span class="hl-1"> </span><span class="hl-3">100</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">// 调整移动速度</span><br/><span class="hl-1"> </span><span class="hl-5">moveSpeed:</span><span class="hl-1"> </span><span class="hl-3">5.0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">// 自定义地面点位样式 (例如:只显示实心点)</span><br/><span class="hl-1"> </span><span class="hl-4">panoCircleMeshCreator</span><span class="hl-5">:</span><span class="hl-1"> (</span><span class="hl-5">observer</span><span class="hl-1">, </span><span class="hl-5">options</span><span class="hl-1">) </span><span class="hl-8">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">// 这里的 options 包含了 aerialObserverMinHeight 等信息</span><br/><span class="hl-1"> </span><span class="hl-11">return</span><span class="hl-1"> </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">PanoCircleMeshSolid</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-5">color:</span><span class="hl-1"> </span><span class="hl-3">0x3366ff</span><span class="hl-1">, </span><span class="hl-7">// 自定义颜色</span><br/><span class="hl-1"> </span><span class="hl-5">scale:</span><span class="hl-1"> </span><span class="hl-3">1.2</span><span class="hl-1"> </span><span class="hl-7">// 自定义大小</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-7">// 模型地图配置</span><br/><span class="hl-1"> </span><span class="hl-5">mapview:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">// 设置默认进入时的视角参数</span><br/><span class="hl-1"> </span><span class="hl-5">defaultLatitude:</span><span class="hl-1"> </span><span class="hl-5">Math</span><span class="hl-1">.</span><span class="hl-6">PI</span><span class="hl-1"> / </span><span class="hl-3">3</span><span class="hl-1">, </span><span class="hl-7">// 60度俯视</span><br/><span class="hl-1"> </span><span class="hl-5">defaultDistance:</span><span class="hl-1"> </span><span class="hl-3">200</span><span class="hl-1">, </span><span class="hl-7">// 相机距离</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-7">// 模型漫游配置</span><br/><span class="hl-1"> </span><span class="hl-5">model:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">moveSpeed:</span><span class="hl-1"> </span><span class="hl-3">10.0</span><span class="hl-1"> </span><span class="hl-7">// 模型模式下移动更快</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
86
86
|
</code><button type="button">Copy</button></pre>
|
|
87
87
|
|
|
88
88
|
<h3 id="动态修改配置-update-configuration" class="tsd-anchor-link">动态修改配置 (Update Configuration)<a href="#动态修改配置-update-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
89
89
|
<p>初始化后,可以使用 <code>five.updateConfiguration()</code> 动态修改各模式的配置参数,无需重新实例化。</p>
|
|
90
|
-
<pre><code class="typescript"><span class="hl-
|
|
90
|
+
<pre><code class="typescript"><span class="hl-7">// 动态修改全景模式的移动速度和最大 FOV</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">updateConfiguration</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-5">panorama:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">moveSpeed:</span><span class="hl-1"> </span><span class="hl-3">10.0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">maxFov:</span><span class="hl-1"> </span><span class="hl-3">140</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 动态修改模型地图模式的相机距离</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">updateConfiguration</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-5">mapview:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">defaultDistance:</span><span class="hl-1"> </span><span class="hl-3">300</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
91
91
|
</code><button type="button">Copy</button></pre>
|
|
92
92
|
|
|
93
93
|
<h3 id="进阶用法-advanced-usage" class="tsd-anchor-link">进阶用法 (Advanced Usage)<a href="#进阶用法-advanced-usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
94
94
|
<p>使用 <code>changeMode</code> 精准控制切换过程,并监听完成时机:</p>
|
|
95
|
-
<pre><code class="ts"><span class="hl-
|
|
95
|
+
<pre><code class="ts"><span class="hl-11">import</span><span class="hl-1"> { </span><span class="hl-5">Five</span><span class="hl-1">, </span><span class="hl-5">Mode</span><span class="hl-1"> } </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">'@realsee/five'</span><span class="hl-1">;</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-4">Five</span><span class="hl-1">();</span><br/><br/><span class="hl-7">// ... 初始化 ...</span><br/><br/><span class="hl-7">// 定义一个切换模式的函数</span><br/><span class="hl-8">async</span><span class="hl-1"> </span><span class="hl-8">function</span><span class="hl-1"> </span><span class="hl-4">switchMode</span><span class="hl-1">(</span><span class="hl-5">targetMode</span><span class="hl-1">: </span><span class="hl-9">Mode</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-11">try</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">// changeMode 返回 Promise,resolve 时表示切换动画结束</span><br/><span class="hl-1"> </span><span class="hl-11">await</span><span class="hl-1"> </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">changeMode</span><span class="hl-1">(</span><span class="hl-5">targetMode</span><span class="hl-1">, </span><span class="hl-8">undefined</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">1000</span><span class="hl-1"> </span><span class="hl-7">// 动画时长 1000ms</span><br/><span class="hl-1"> });</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">`成功切换到 </span><span class="hl-8">${</span><span class="hl-5">targetMode</span><span class="hl-8">}</span><span class="hl-10"> 模式`</span><span class="hl-1">);</span><br/><span class="hl-1"> } </span><span class="hl-11">catch</span><span class="hl-1"> (</span><span class="hl-5">error</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">error</span><span class="hl-1">(</span><span class="hl-10">`切换到 </span><span class="hl-8">${</span><span class="hl-5">targetMode</span><span class="hl-8">}</span><span class="hl-10"> 失败`</span><span class="hl-1">, </span><span class="hl-5">error</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-7">// 绑定按钮事件</span><br/><span class="hl-5">document</span><span class="hl-1">.</span><span class="hl-4">querySelector</span><span class="hl-1">(</span><span class="hl-10">'#btn-map'</span><span class="hl-1">).</span><span class="hl-4">addEventListener</span><span class="hl-1">(</span><span class="hl-10">'click'</span><span class="hl-1">, () </span><span class="hl-8">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">switchMode</span><span class="hl-1">(</span><span class="hl-10">'Mapview'</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
96
96
|
</code><button type="button">Copy</button></pre>
|
|
97
97
|
|
|
98
98
|
<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>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<p><strong>Definition</strong>: <a href="../../five/model/model.d.ts">Model</a></p>
|
|
12
12
|
</blockquote>
|
|
13
13
|
<p>Model 类继承自 <code>THREE.Object3D</code>,是三维场景中的顶级对象。</p>
|
|
14
|
-
<pre><code class="typescript"><span class="hl-
|
|
14
|
+
<pre><code class="typescript"><span class="hl-7">// 简化版定义,完整定义参考 lib/five/model/model.ts</span><br/><span class="hl-8">class</span><span class="hl-1"> </span><span class="hl-9">Model</span><span class="hl-1"> </span><span class="hl-8">extends</span><span class="hl-1"> </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Object3D</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">/** 唯一标识 */</span><br/><span class="hl-1"> </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-5">fiveId</span><span class="hl-1">: </span><span class="hl-9">string</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-7">/** 对应的 Work 数据 */</span><br/><span class="hl-1"> </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-5">work</span><span class="hl-1">: </span><span class="hl-9">Work</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-7">/** 模型参数配置 */</span><br/><span class="hl-1"> </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-5">parameter</span><span class="hl-1">: </span><span class="hl-9">Parameter</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-7">/** 包含的视图层 (如 mesh, point_cloud, gaussian_splatting) */</span><br/><span class="hl-1"> </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-5">viewLayers</span><span class="hl-1">: </span><span class="hl-9">ViewLayer</span><span class="hl-1">[];</span><br/><br/><span class="hl-1"> </span><span class="hl-7">/** 是否加载完成 (初次加载) */</span><br/><span class="hl-1"> </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-5">loaded</span><span class="hl-1">: </span><span class="hl-9">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-7">/** 是否细化完成 (高清纹理/模型加载完毕) */</span><br/><span class="hl-1"> </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-5">refined</span><span class="hl-1">: </span><span class="hl-9">boolean</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-7">/** 细化进度 [当前, 总数] */</span><br/><span class="hl-1"> </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-5">refineProgress</span><span class="hl-1">: [</span><span class="hl-9">number</span><span class="hl-1">, </span><span class="hl-9">number</span><span class="hl-1">];</span><br/><br/><span class="hl-1"> </span><span class="hl-7">/** 外包围盒 */</span><br/><span class="hl-1"> </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-5">boundingBox</span><span class="hl-1">: </span><span class="hl-9">THREE</span><span class="hl-1">.</span><span class="hl-9">Box3</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-7">/** 楼层数量 */</span><br/><span class="hl-1"> </span><span class="hl-8">public</span><span class="hl-1"> </span><span class="hl-5">floorLength</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
15
15
|
</code><button type="button">Copy</button></pre>
|
|
16
16
|
|
|
17
17
|
<blockquote>
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
<li><strong><code>five.model</code></strong>: 这是一个便捷属性,直接返回 <code>five.models[0]</code>。</li>
|
|
30
30
|
</ul>
|
|
31
31
|
<p>通常情况下,如果你只加载了一个 Work,可以直接使用 <code>five.model</code> 来操作当前模型。</p>
|
|
32
|
-
<pre><code class="typescript"><span class="hl-
|
|
32
|
+
<pre><code class="typescript"><span class="hl-7">// 下面两种方式是等价的</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">model1</span><span class="hl-1"> = </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">models</span><span class="hl-1">[</span><span class="hl-3">0</span><span class="hl-1">];</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">model2</span><span class="hl-1"> = </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">model</span><span class="hl-1">;</span>
|
|
33
33
|
</code><button type="button">Copy</button></pre>
|
|
34
34
|
|
|
35
35
|
<h3 id="2-model-vs-work" class="tsd-anchor-link">2. Model vs Work<a href="#2-model-vs-work" 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>
|
|
@@ -115,11 +115,11 @@ Model 加载完成后,会自动根据 Work 数据生成对应的 ViewLayer,
|
|
|
115
115
|
</table>
|
|
116
116
|
<h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
117
117
|
<h3 id="获取并操作当前模型" class="tsd-anchor-link">获取并操作当前模型<a href="#获取并操作当前模型" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
118
|
-
<pre><code class="typescript"><span class="hl-
|
|
118
|
+
<pre><code class="typescript"><span class="hl-7">// 获取当前模型</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">model</span><span class="hl-1"> = </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">models</span><span class="hl-1">[</span><span class="hl-3">0</span><span class="hl-1">];</span><br/><br/><span class="hl-11">if</span><span class="hl-1"> (</span><span class="hl-5">model</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">"模型对应 Work 名称:"</span><span class="hl-1">, </span><span class="hl-5">model</span><span class="hl-1">.</span><span class="hl-5">work</span><span class="hl-1">.</span><span class="hl-5">name</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">"模型是否细化完成:"</span><span class="hl-1">, </span><span class="hl-5">model</span><span class="hl-1">.</span><span class="hl-5">refined</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-7">// 监听模型细化事件</span><br/><span class="hl-1"> </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">on</span><span class="hl-1">(</span><span class="hl-10">"model.refined"</span><span class="hl-1">, () </span><span class="hl-8">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">"模型高清资源加载完毕"</span><span class="hl-1">);</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
|
|
119
119
|
</code><button type="button">Copy</button></pre>
|
|
120
120
|
|
|
121
121
|
<h3 id="遍历-viewlayer" class="tsd-anchor-link">遍历 ViewLayer<a href="#遍历-viewlayer" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
122
|
-
<pre><code class="typescript"><span class="hl-
|
|
122
|
+
<pre><code class="typescript"><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">model</span><span class="hl-1"> = </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">models</span><span class="hl-1">[</span><span class="hl-3">0</span><span class="hl-1">];</span><br/><span class="hl-7">// model.viewLayers 即为 ViewLayer 列表</span><br/><span class="hl-5">model</span><span class="hl-1">.</span><span class="hl-5">viewLayers</span><span class="hl-1">.</span><span class="hl-4">forEach</span><span class="hl-1">((</span><span class="hl-5">layer</span><span class="hl-1">) </span><span class="hl-8">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">`图层名称: </span><span class="hl-8">${</span><span class="hl-5">layer</span><span class="hl-12">.</span><span class="hl-5">name</span><span class="hl-8">}</span><span class="hl-10">, 类型: </span><span class="hl-8">${</span><span class="hl-5">layer</span><span class="hl-12">.</span><span class="hl-5">type</span><span class="hl-8">}</span><span class="hl-10">`</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-11">if</span><span class="hl-1"> (</span><span class="hl-5">layer</span><span class="hl-1">.</span><span class="hl-5">type</span><span class="hl-1"> === </span><span class="hl-10">'mesh'</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-7">// 对网格层做特殊处理</span><br/><span class="hl-1"> </span><span class="hl-5">layer</span><span class="hl-1">.</span><span class="hl-5">visible</span><span class="hl-1"> = </span><span class="hl-8">true</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
123
123
|
</code><button type="button">Copy</button></pre>
|
|
124
124
|
|
|
125
125
|
<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>
|
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
<p><strong>Definition</strong>: <a href="../../five/types/movePanoEffect.d.ts">MovePanoEffect</a></p>
|
|
13
13
|
</blockquote>
|
|
14
14
|
<p><code>effect</code> 参数定义了全景切换的动画模式。</p>
|
|
15
|
-
<pre><code class="typescript"><span class="hl-
|
|
15
|
+
<pre><code class="typescript"><span class="hl-8">type</span><span class="hl-1"> </span><span class="hl-9">MovePanoEffect</span><span class="hl-1"> =</span><br/><span class="hl-1"> | </span><span class="hl-10">"fly"</span><span class="hl-1"> </span><span class="hl-7">// 飞行效果 (默认):模拟相机在空间中的移动</span><br/><span class="hl-1"> | </span><span class="hl-10">"instant"</span><span class="hl-1"> </span><span class="hl-7">// 瞬间切换:无动画,直接跳变</span><br/><span class="hl-1"> | </span><span class="hl-10">"fade"</span><span class="hl-1"> </span><span class="hl-7">// 淡入淡出:原场景渐隐,新场景渐现 (位置保持不变)</span><br/><span class="hl-1"> | </span><span class="hl-10">"montage"</span><span class="hl-1"> </span><span class="hl-7">// 蒙太奇:通过黑屏过渡 (渐变穿插到黑屏再亮起)</span><br/><span class="hl-1"> | </span><span class="hl-10">"spread"</span><span class="hl-1"> </span><span class="hl-7">// 扩散:新场景从中心向四周扩散</span><br/><span class="hl-1"> | </span><span class="hl-10">"zoomin"</span><span class="hl-1"> </span><span class="hl-7">// 放大:新场景从小放大覆盖</span><br/><span class="hl-1"> | </span><span class="hl-10">"zoomout"</span><span class="hl-1"> </span><span class="hl-7">// 缩小:原场景缩小消失</span><br/><span class="hl-1"> | </span><span class="hl-10">"model"</span><span class="hl-1">; </span><span class="hl-7">// 模型过渡:切换过程中展示 3D 模型结构</span>
|
|
16
16
|
</code><button type="button">Copy</button></pre>
|
|
17
17
|
|
|
18
18
|
<h3 id="effecteasing" class="tsd-anchor-link">effectEasing<a href="#effecteasing" 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>
|
|
19
19
|
<p><code>effectEasing</code> 是一个函数,用于控制前后全景图的混合进度。</p>
|
|
20
|
-
<pre><code class="typescript"><span class="hl-
|
|
20
|
+
<pre><code class="typescript"><span class="hl-7">// 输入 0-1 的进度值,返回 0-1 的混合比例</span><br/><span class="hl-8">type</span><span class="hl-1"> </span><span class="hl-9">EffectEasing</span><span class="hl-1"> = (</span><span class="hl-5">progress</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">) </span><span class="hl-8">=></span><span class="hl-1"> </span><span class="hl-9">number</span><span class="hl-1">;</span>
|
|
21
21
|
</code><button type="button">Copy</button></pre>
|
|
22
22
|
|
|
23
23
|
<ul>
|
|
@@ -47,17 +47,17 @@
|
|
|
47
47
|
<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>
|
|
48
48
|
<h3 id="1-基础用法-basic-usage" class="tsd-anchor-link">1. 基础用法 (Basic Usage)<a href="#1-基础用法-basic-usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
49
49
|
<p>使用不同的 <code>effect</code> 进行切换。</p>
|
|
50
|
-
<pre><code class="typescript"><span class="hl-
|
|
50
|
+
<pre><code class="typescript"><span class="hl-7">// 1. 飞行模式 (默认)</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">moveToPano</span><span class="hl-1">(</span><span class="hl-3">1</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-5">effect:</span><span class="hl-1"> </span><span class="hl-10">'fly'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">1500</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 2. 瞬间切换 (无动画)</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">moveToPano</span><span class="hl-1">(</span><span class="hl-3">2</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-5">effect:</span><span class="hl-1"> </span><span class="hl-10">'instant'</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 3. 淡入淡出 (适用于远距离切换)</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">moveToPano</span><span class="hl-1">(</span><span class="hl-3">10</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-5">effect:</span><span class="hl-1"> </span><span class="hl-10">'fade'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">1000</span><br/><span class="hl-1">});</span>
|
|
51
51
|
</code><button type="button">Copy</button></pre>
|
|
52
52
|
|
|
53
53
|
<h3 id="2-自定义缓动-custom-easing" class="tsd-anchor-link">2. 自定义缓动 (Custom Easing)<a href="#2-自定义缓动-custom-easing" 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>
|
|
54
54
|
<p>使用 <code>effectEasing</code> 控制混合节奏。</p>
|
|
55
|
-
<pre><code class="typescript"><span class="hl-
|
|
55
|
+
<pre><code class="typescript"><span class="hl-7">// 示例:Ease-In-Quad (先慢后快)</span><br/><span class="hl-8">function</span><span class="hl-1"> </span><span class="hl-4">easeInQuad</span><span class="hl-1">(</span><span class="hl-5">x</span><span class="hl-1">: </span><span class="hl-9">number</span><span class="hl-1">): </span><span class="hl-9">number</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-11">return</span><span class="hl-1"> </span><span class="hl-5">x</span><span class="hl-1"> * </span><span class="hl-5">x</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">moveToPano</span><span class="hl-1">(</span><span class="hl-3">5</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-5">effect:</span><span class="hl-1"> </span><span class="hl-10">'fly'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">2000</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">// 自定义混合曲线</span><br/><span class="hl-1"> </span><span class="hl-5">effectEasing:</span><span class="hl-1"> </span><span class="hl-5">easeInQuad</span><br/><span class="hl-1">});</span>
|
|
56
56
|
</code><button type="button">Copy</button></pre>
|
|
57
57
|
|
|
58
58
|
<h3 id="3-高级缓动控制-advanced-easing" class="tsd-anchor-link">3. 高级缓动控制 (Advanced Easing)<a href="#3-高级缓动控制-advanced-easing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
59
59
|
<p>在某些特殊场景(如从地面点切换到航拍点),我们可能希望前 80% 的时间都显示地面点,最后 20% 才快速过渡到航拍图。</p>
|
|
60
|
-
<pre><code class="typescript"><span class="hl-
|
|
60
|
+
<pre><code class="typescript"><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">moveToPano</span><span class="hl-1">(</span><span class="hl-5">aerialPanoIndex</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-5">effect:</span><span class="hl-1"> </span><span class="hl-10">'fly'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">duration:</span><span class="hl-1"> </span><span class="hl-3">3000</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">effectEasing</span><span class="hl-5">:</span><span class="hl-1"> (</span><span class="hl-5">progress</span><span class="hl-1">) </span><span class="hl-8">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-7">// 0 - 0.8 期间返回 0 (显示原图)</span><br/><span class="hl-1"> </span><span class="hl-7">// 0.8 - 1.0 期间线性过渡到 1</span><br/><span class="hl-1"> </span><span class="hl-11">if</span><span class="hl-1"> (</span><span class="hl-5">progress</span><span class="hl-1"> < </span><span class="hl-3">0.8</span><span class="hl-1">) </span><span class="hl-11">return</span><span class="hl-1"> </span><span class="hl-3">0</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-11">return</span><span class="hl-1"> (</span><span class="hl-5">progress</span><span class="hl-1"> - </span><span class="hl-3">0.8</span><span class="hl-1">) / </span><span class="hl-3">0.2</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
|
61
61
|
</code><button type="button">Copy</button></pre>
|
|
62
62
|
|
|
63
63
|
<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>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<p><strong>Definition</strong>: <a href="../../five/application/fiveLoadOptions.d.ts">FiveLoadOptions</a>, <a href="../../five/work/looseWorkType.d.ts">LooseWorkWithExtrinsics</a></p>
|
|
12
12
|
</blockquote>
|
|
13
13
|
<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>
|
|
14
|
-
<pre><code class="typescript"><span class="hl-
|
|
14
|
+
<pre><code class="typescript"><span class="hl-7">// 输入数据类型</span><br/><span class="hl-8">type</span><span class="hl-1"> </span><span class="hl-9">FiveLoadInput</span><span class="hl-1"> =</span><br/><span class="hl-1"> | </span><span class="hl-9">Work</span><span class="hl-1">[]</span><br/><span class="hl-1"> | </span><span class="hl-9">LooseWorkWithExtrinsics</span><span class="hl-1">[]</span><br/><span class="hl-1"> | </span><span class="hl-9">string</span><span class="hl-1">[]; </span><span class="hl-7">// JSON Strings</span><br/><br/><span class="hl-7">// 带位姿信息的 LooseWork (用于调整模型在场景中的位置)</span><br/><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">LooseWorkWithExtrinsics</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">work</span><span class="hl-1">: </span><span class="hl-9">LooseWork</span><span class="hl-1">; </span><span class="hl-7">// Work 数据内容</span><br/><span class="hl-1"> </span><span class="hl-5">transform</span><span class="hl-1">?: </span><span class="hl-9">number</span><span class="hl-1">[]; </span><span class="hl-7">// 4x4 变换矩阵 (数组格式), 用于整体偏移/旋转该 Work</span><br/><span class="hl-1"> </span><span class="hl-5">workCode</span><span class="hl-1">?: </span><span class="hl-9">string</span><span class="hl-1">; </span><span class="hl-7">// 强制指定 WorkCode (覆盖数据中的默认值)</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-7">// 加载选项</span><br/><span class="hl-8">interface</span><span class="hl-1"> </span><span class="hl-9">FiveLoadOptions</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">mode</span><span class="hl-1">?: </span><span class="hl-10">"replace"</span><span class="hl-1"> | </span><span class="hl-10">"add"</span><span class="hl-1">; </span><span class="hl-7">// 替换当前场景 vs 追加到当前场景</span><br/><span class="hl-1"> </span><span class="hl-7">// ... 其他常规选项</span><br/><span class="hl-1">}</span>
|
|
15
15
|
</code><button type="button">Copy</button></pre>
|
|
16
16
|
|
|
17
17
|
<h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
@@ -55,22 +55,22 @@
|
|
|
55
55
|
<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>
|
|
56
56
|
<h3 id="1-基础加载-basic-loading" class="tsd-anchor-link">1. 基础加载 (Basic Loading)<a href="#1-基础加载-basic-loading" 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>
|
|
57
57
|
<p>一次性加载两个 Work。</p>
|
|
58
|
-
<pre><code class="typescript"><span class="hl-
|
|
58
|
+
<pre><code class="typescript"><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">works</span><span class="hl-1"> = [</span><span class="hl-5">workDataA</span><span class="hl-1">, </span><span class="hl-5">workDataB</span><span class="hl-1">];</span><br/><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">load</span><span class="hl-1">(</span><span class="hl-5">works</span><span class="hl-1">).</span><span class="hl-4">then</span><span class="hl-1">(() </span><span class="hl-8">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">"所有 Work 加载完成"</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">"当前 Works:"</span><span class="hl-1">, </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">works</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
59
59
|
</code><button type="button">Copy</button></pre>
|
|
60
60
|
|
|
61
61
|
<h3 id="2-沙盘排布-sandbox-layout" class="tsd-anchor-link">2. 沙盘排布 (Sandbox Layout)<a href="#2-沙盘排布-sandbox-layout" 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>
|
|
62
62
|
<p>使用 <code>transform</code> 将两个户型并排摆放。</p>
|
|
63
|
-
<pre><code class="typescript"><span class="hl-
|
|
63
|
+
<pre><code class="typescript"><span class="hl-11">import</span><span class="hl-1"> </span><span class="hl-8">*</span><span class="hl-1"> </span><span class="hl-11">as</span><span class="hl-1"> </span><span class="hl-5">THREE</span><span class="hl-1"> </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-10">"three"</span><span class="hl-1">;</span><br/><br/><span class="hl-7">// 创建变换矩阵:向 X 轴正方向平移 20 米</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">matrixB</span><span class="hl-1"> = </span><span class="hl-8">new</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1">.</span><span class="hl-4">Matrix4</span><span class="hl-1">().</span><span class="hl-4">makeTranslation</span><span class="hl-1">(</span><span class="hl-3">20</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-3">0</span><span class="hl-1">);</span><br/><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">input</span><span class="hl-1"> = [</span><br/><span class="hl-1"> </span><span class="hl-7">// Work A: 保持在原点</span><br/><span class="hl-1"> { </span><span class="hl-5">work:</span><span class="hl-1"> </span><span class="hl-5">workDataA</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-7">// Work B: 偏移位置</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">work:</span><span class="hl-1"> </span><span class="hl-5">workDataB</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">transform:</span><span class="hl-1"> </span><span class="hl-5">matrixB</span><span class="hl-1">.</span><span class="hl-4">toArray</span><span class="hl-1">()</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">load</span><span class="hl-1">(</span><span class="hl-5">input</span><span class="hl-1">);</span>
|
|
64
64
|
</code><button type="button">Copy</button></pre>
|
|
65
65
|
|
|
66
66
|
<h3 id="3-动态添加-dynamic-add" class="tsd-anchor-link">3. 动态添加 (Dynamic Add)<a href="#3-动态添加-dynamic-add" 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>
|
|
67
67
|
<p>在不销毁当前场景的情况下,追加一个新的 Work。</p>
|
|
68
|
-
<pre><code class="typescript"><span class="hl-
|
|
68
|
+
<pre><code class="typescript"><span class="hl-7">// 假设当前已经加载了 Work A</span><br/><span class="hl-7">// 追加 Work C</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">load</span><span class="hl-1">(</span><span class="hl-5">workDataC</span><span class="hl-1">, </span><span class="hl-8">undefined</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-5">mode:</span><span class="hl-1"> </span><span class="hl-10">"add"</span><span class="hl-1"> </span><span class="hl-7">// 关键参数</span><br/><span class="hl-1">}).</span><span class="hl-4">then</span><span class="hl-1">(() </span><span class="hl-8">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-4">log</span><span class="hl-1">(</span><span class="hl-10">"Work C 已加入场景"</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
69
69
|
</code><button type="button">Copy</button></pre>
|
|
70
70
|
|
|
71
71
|
<h3 id="4-work-间切换-switching-works" class="tsd-anchor-link">4. Work 间切换 (Switching Works)<a href="#4-work-间切换-switching-works" 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
72
|
<p>跳转到指定 Work 的特定点位。</p>
|
|
73
|
-
<pre><code class="typescript"><span class="hl-
|
|
73
|
+
<pre><code class="typescript"><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">targetWorkCode</span><span class="hl-1"> = </span><span class="hl-10">"work-id-b"</span><span class="hl-1">;</span><br/><br/><span class="hl-7">// 方式一:指定点位索引</span><br/><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-4">setState</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-5">workCode:</span><span class="hl-1"> </span><span class="hl-5">targetWorkCode</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">panoIndex:</span><span class="hl-1"> </span><span class="hl-3">0</span><span class="hl-1">, </span><span class="hl-7">// 目标 Work 的第 0 个点位</span><br/><span class="hl-1"> </span><span class="hl-5">mode:</span><span class="hl-1"> </span><span class="hl-10">"Panorama"</span><br/><span class="hl-1">});</span><br/><br/><span class="hl-7">// 方式二:查找特定 Work</span><br/><span class="hl-8">const</span><span class="hl-1"> </span><span class="hl-6">targetWork</span><span class="hl-1"> = </span><span class="hl-5">five</span><span class="hl-1">.</span><span class="hl-5">works</span><span class="hl-1">.</span><span class="hl-4">getWork</span><span class="hl-1">(</span><span class="hl-5">targetWorkCode</span><span class="hl-1">);</span><br/><span class="hl-11">if</span><span class="hl-1"> (</span><span class="hl-5">targetWork</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-7">// 你的业务逻辑</span><br/><span class="hl-1">}</span>
|
|
74
74
|
</code><button type="button">Copy</button></pre>
|
|
75
75
|
|
|
76
76
|
<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>
|