fix: doc playground link

galacean · Feb 10, 2025 · 62bd911 · 62bd911
1 parent c9f7303
commit 62bd911
Show file tree

Hide file tree

Showing 91 changed files with 145 additions and 145 deletions.
diff --git a/docs/en/UI/quickStart/button.mdx b/docs/en/UI/quickStart/button.mdx
@@ -41,4 +41,4 @@ In the editor, you can easily set the button's transition effects for different
 
 ## Script Development
 
-<playground src="ui-Button.ts"></playground>
+<Playground href="/embed/ui-Button" />
diff --git a/docs/en/UI/quickStart/event.mdx b/docs/en/UI/quickStart/event.mdx
@@ -37,4 +37,4 @@ stateDiagram
 
 ## Script Development
 
-<playground src="ui-Event.ts"></playground>
+<Playground href="/embed/ui-Event" />
diff --git a/docs/en/UI/quickStart/group.mdx b/docs/en/UI/quickStart/group.mdx
@@ -25,4 +25,4 @@ Select the node, then in the **[Inspector Panel](/docs/interface/inspector)**, c
 
 ## Script Development
 
-<playground src="xr-ar-simple.ts"></playground>
+<Playground href="/embed/xr-ar-simple" />
diff --git a/docs/en/UI/quickStart/image.mdx b/docs/en/UI/quickStart/image.mdx
@@ -45,4 +45,4 @@ For adjusting the size of UI elements, refer to [Quickly Adjust UI Element Size]
 
 ## Script Development
 
-<playground src="ui-Image.ts"></playground>
+<Playground href="/embed/ui-Image" />
diff --git a/docs/en/UI/quickStart/text.mdx b/docs/en/UI/quickStart/text.mdx
@@ -57,4 +57,4 @@ The `Text` component can modify the rendering size by adjusting the `FontSize`.
 
 ## Script Development
 
-<playground src="ui-Text.ts"></playground>
+<Playground href="/embed/ui-Text" />
diff --git a/docs/en/assets/custom.mdx b/docs/en/assets/custom.mdx
@@ -25,4 +25,4 @@ export class FBXLoader extends Loader<FBXResource> {
 
 ## Reference
 
-<playground src="obj-loader.ts"></playground>
+<Playground href="/embed/obj-loader" />
diff --git a/docs/en/assets/gc.mdx b/docs/en/assets/gc.mdx
@@ -25,7 +25,7 @@ engine.resourceManager.gc();
 
 If you need to verify whether assets have been successfully released, you can follow the steps below and open the following example on a blank page:
 
-<playground src="assets-gc.ts"></playground>
+<Playground href="/embed/assets-gc" />
 
 In this example, `Texture2D` and `Sprite` are created to render 2D sprites during initialization. When you click the GC button in the upper right corner, the `root` node is destroyed, and the reference counts of the texture and sprite assets are cleared. At this point, these assets will be truly destroyed. Taking memory snapshots before and after `gc` can give a more intuitive understanding of this process.
 

diff --git a/docs/en/core/scene.mdx b/docs/en/core/scene.mdx
@@ -94,7 +94,7 @@ engine.sceneManager.removeScene(scene2);
 
 The example of multi-scene rendering is as follows:
 
-<playground src="multi-scene.ts"></playground>
+<Playground href="/embed/multi-scene" />
 
 ### Merging Scenes
 

diff --git a/docs/en/core/transform.mdx b/docs/en/core/transform.mdx
@@ -11,7 +11,7 @@ label: Core
 
 > For a deeper understanding, refer to Galacean's **[Coordinate System](/docs/core/space)**.
 
-<playground src="transform-basic.ts"></playground>
+<Playground href="/embed/transform-basic" />
 
 ## Editor Usage
 

diff --git a/docs/en/graphics/2D/lottie.mdx b/docs/en/graphics/2D/lottie.mdx
@@ -74,7 +74,7 @@ await lottie.play();
 
 The editor provides an animation slicing function, allowing you to cut the entire segment provided by the designer into multiple segments. Each segment needs to define three fields: segment name, start frame, and end frame.
 
-<playground src="lottie-clips.ts"></playground>
+<Playground href="/embed/lottie-clips" />
 
 <Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*skjbSZjSpYoAAAAAAAAAAAAADjCHAQ/original" />
 
@@ -129,7 +129,7 @@ engine.resourceManager.load({
 });
 ```
 
-<playground src="lottie.ts"></playground>
+<Playground href="/embed/lottie" />
 
 ### 3D Transform
 
@@ -139,7 +139,7 @@ In business scenarios, there is often a need for 3D transformations, such as ent
 
 Thanks to the unified architecture of the Galacean Engine 2D/3D engine, 3D transformation functions can be easily implemented.
 
-<playground src="lottie-3d-rotation.ts"></playground>
+<Playground href="/embed/lottie-3d-rotation" />
 
 ### Version Dependencies
 | Engine Version |  Lottie Version |

diff --git a/docs/en/graphics/2D/spine/example.mdx b/docs/en/graphics/2D/spine/example.mdx
@@ -36,31 +36,31 @@ This template showcases the ability to dynamically switch partial skins. You can
 **Animation Control**
 
 This example demonstrates how to orchestrate a Spine animation queue using the `setAnimation` and `addAnimation` APIs:
-<playground src="spine-animation.ts"></playground>
+<Playground href="/embed/spine-animation" />
 
 **Follow Shooting**
 
 This example shows how to achieve an aiming and shooting effect by modifying the IK bone position:
-<playground src="spine-follow-shoot.ts"></playground>
+<Playground href="/embed/spine-follow-shoot" />
 
 **Partial Skin Switching**
 
 This example demonstrates how to achieve a partial outfit change by modifying attachments in slots:
-<playground src="spine-change-attachment.ts"></playground>
+<Playground href="/embed/spine-change-attachment" />
 
 **Full Skin Switching**
 
 This example demonstrates how to achieve full skin switching using the `setSkin` method:
-<playground src="spine-full-skin-change.ts"></playground>
+<Playground href="/embed/spine-full-skin-change" />
 
 **Skin Mixing**
 
 This example demonstrates how to achieve mix-and-match effects at runtime by combining new skins:
-<playground src="spine-mix-and-match.ts"></playground>
+<Playground href="/embed/spine-mix-and-match" />
 
 **Physics**
 
 This example showcases the physics-based animation effects in Spine 4.2:
-<playground src="spine-physics.ts"></playground>
+<Playground href="/embed/spine-physics" />
 
 The next chapter: [Versions and Performance](/docs/graphics/2D/spine/other)
diff --git a/docs/en/graphics/2D/spriteAtlas.mdx b/docs/en/graphics/2D/spriteAtlas.mdx
@@ -14,7 +14,7 @@ label: Graphics/2D
 
 In the example of the sprite atlas below, only one draw call is made per frame:
 
-<playground src="sprite-atlas.ts"></playground>
+<Playground href="/embed/sprite-atlas" />
 
 ## Editor Usage
 

diff --git a/docs/en/graphics/2D/spriteMask.mdx b/docs/en/graphics/2D/spriteMask.mdx
@@ -8,7 +8,7 @@ label: Graphics/2D
 
 The Sprite Mask component is used to apply masking effects to [Sprite Renderer](/en/docs/graphics/2D/spriteRenderer/) and [Text Renderer](/en/docs/graphics/2D/text/) in 3D/2D scenes.
 
-<playground src="sprite-mask.ts"></playground>
+<Playground href="/embed/sprite-mask" />
 
 Control the interaction with [Sprite](/en/docs/graphics/2D/sprite/) using parameters provided by [SpriteMask](/apis/core/#SpriteMask).
 

diff --git a/docs/en/graphics/2D/spriteRenderer.mdx b/docs/en/graphics/2D/spriteRenderer.mdx
@@ -63,7 +63,7 @@ When displaying an image, first add a sprite component to an entity and then set
 
 Setting the `width` and `height` of `SpriteRenderer` can explicitly specify the size of the sprite in 3D space. If not set, the size of the `Sprite` will be used as the default value.
 
-<playground src="sprite-size.ts"></playground>
+<Playground href="/embed/sprite-size" />
 
 ### Set Color
 
@@ -77,13 +77,13 @@ In addition to basic image display, `SpriteRenderer` also supports image flippin
 
 <Image src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*sK6tTJELnP0AAAAAAAAAAAAADjCHAQ/original" alt="avatar"  />
 
-<playground src="sprite-flip.ts"></playground>
+<Playground href="/embed/sprite-flip" />
 
 ### Drawing Modes
 
 The sprite renderer currently provides three drawing modes: normal, nine-slice, and tiled drawing (default is normal drawing). By modifying the drawing width and height in different drawing modes, you can visually perceive the rendering differences between the modes, as shown below:
 
-<playground src="sprite-drawMode.ts"></playground>
+<Playground href="/embed/sprite-drawMode" />
 
 ### Masking
 
@@ -93,5 +93,5 @@ Please refer to the [Sprite Mask](/en/docs/graphics/2D/spriteMask) documentation
 
 Please refer to the [Custom Shader](/en/docs/graphics-shader-custom) documentation.
 
-<playground src="sprite-material-blur.ts"></playground>
+<Playground href="/embed/sprite-material-blur" />
 
diff --git a/docs/en/graphics/2D/text.mdx b/docs/en/graphics/2D/text.mdx
@@ -54,7 +54,7 @@ To make the text display more diverse, developers can upload their own font file
 
 ## Script Usage
 
-<playground src="text-renderer.ts"></playground>
+<Playground href="/embed/text-renderer" />
 
 1. Create a [TextRenderer](/apis/core/#TextRenderer) component to display text  
 2. Set the [Font](/apis/core/#Font) object through the font property  
@@ -160,7 +160,7 @@ textRenderer.fontStyle = FontStyle.Bold | FontStyle.Italic;
 
 ### Multi-line Text
 
-<playground src="text-wrap-alignment.ts"></playground>
+<Playground href="/embed/text-wrap-alignment" />
 
 ### Custom Fonts
 
@@ -182,5 +182,5 @@ const font = await engine.resourceManager.load({
 });
 ```
 
-<playground src="text-renderer-font.ts"></playground>
+<Playground href="/embed/text-renderer-font" />
 ```
diff --git a/docs/en/graphics/background/background.mdx b/docs/en/graphics/background/background.mdx
@@ -14,9 +14,9 @@ Developers can customize the background for scenes, which will be rendered befor
 
 Developers can set different backgrounds according to their needs:
 
-<playground src="background.ts"></playground>
+<Playground href="/embed/background" />
 
 In [Skybox](/en/docs/graphics-background-sky}) mode, by setting specific meshes and materials, various custom backgrounds can be achieved, such as `video background`:
 
-<playground src="video-background.ts"></playground>
+<Playground href="/embed/video-background" />
 
diff --git a/docs/en/graphics/light/light.mdx b/docs/en/graphics/light/light.mdx
@@ -24,13 +24,13 @@ Proper use of lighting can provide realistic rendering effects. This section inc
 
 Direct light usually shines from an area or in a specific direction, entering the eye (camera) directly after one reflection, as shown in the following example:
 
-<playground src="light-type.ts"></playground>
+<Playground href="/embed/light-type" />
 
 ## Indirect Light
 
 Ambient light is emitted from all around and enters the eye, as shown in the following example:
 
-<playground src="ambient-light.ts"></playground>
+<Playground href="/embed/ambient-light" />
 
 ## Real-time Lighting and Baked Lighting
 

diff --git a/docs/en/graphics/mesh/bufferMesh.mdx b/docs/en/graphics/mesh/bufferMesh.mdx
@@ -30,7 +30,7 @@ Here are some common use cases of [MeshRenderer](/apis/core/#MeshRenderer) and [
 
 ### Interleaved Vertex Buffer
 
-<playground src="buffer-mesh-interleaved.ts"></playground>
+<Playground href="/embed/buffer-mesh-interleaved" />
 
 A common method, such as custom Mesh, Particle implementation, has the advantages of compact video memory and fewer CPU data uploads to the GPU per frame. The main feature of this case is that multiple [VertexElement](/apis/core/#VertexElement) correspond to one *VertexBuffer* ([Buffer](/apis/core/#Buffer)), and only one *VertexBuffer* is used to associate different vertex elements with the Shader.
 
@@ -65,7 +65,7 @@ renderer.mesh = mesh;
 
 ### Independent Vertex Buffer
 
-<playground src="buffer-mesh-independent.ts"></playground>
+<Playground href="/embed/buffer-mesh-independent" />
 
 It has advantages when mixing dynamic vertex buffers and static vertex buffers, such as _position_ being static but _color_ being dynamic. Independent vertex buffers can update only the color data to the GPU. The main feature of this case is that one [VertexElement](/apis/core/#VertexElement) corresponds to one _VertexBuffer_, and the [setData](/apis/core/#Buffer-setData) method of the [Buffer](/apis/core/#Buffer) object can be called separately to update the data independently.
 
@@ -109,7 +109,7 @@ renderer.mesh = mesh;
 
 ### Instance Rendering
 
-<playground src="buffer-mesh-instance.ts"></playground>
+<Playground href="/embed/buffer-mesh-instance" />
 
 GPU Instance rendering is a common technique in 3D engines. For example, it allows rendering objects with the same geometric shape at different positions in one go, significantly improving rendering performance. The main feature of this example is the use of the instance functionality of [VertexElement](/apis/core/#VertexElement). The last parameter of its constructor indicates the instance step rate (the number of instances drawn per vertex advance in the buffer, non-instance elements must be 0). The [instanceCount](/apis/core/#BufferMesh-instanceCount) of [BufferMesh](/apis/core/#BufferMesh) indicates the number of instances.
 

diff --git a/docs/en/graphics/mesh/modelMesh.mdx b/docs/en/graphics/mesh/modelMesh.mdx
@@ -8,7 +8,7 @@ label: Graphics/Mesh
 
 [ModelMesh](/apis/core/#ModelMesh) is a mesh rendering data class used to describe the geometric outline, mainly including vertex data (such as position, normal, and UV), indices, and blend shapes. It can not only be created and exported in glTF format using modeling software for engine parsing and restoration but also be conveniently written directly into data creation using scripts.
 
-<playground src="obj-loader.ts"></playground>
+<Playground href="/embed/obj-loader" />
 
 ## Code Example
 
@@ -134,7 +134,7 @@ If you need to continuously modify the `ModelMesh` data, set the `releaseData` p
 modelMesh.uploadData(false);
 ```
 
-<playground src="model-mesh.ts"></playground>
+<Playground href="/embed/model-mesh" />
 
 ### **Reading Advanced Data**
 
@@ -173,10 +173,10 @@ const result = mesh.getPositions();
 `BlendShape` is commonly used to create highly detailed animations, such as facial expressions. The principle is quite simple, mainly blending the mesh data of base shape and target shape with weights to achieve smooth transition between shapes.
 
 **glTF Import BlendShape Animation Example:**
-<playground src="skeleton-animation-blendShape.ts"></playground>
+<Playground href="/embed/skeleton-animation-blendShape" />
 
 **Custom BlendShape Animation in Script Example:**
-<playground src="skeleton-animation-customBlendShape.ts"></playground>
+<Playground href="/embed/skeleton-animation-customBlendShape" />
 
 ### Detailed Steps
 

diff --git a/docs/en/graphics/mesh/primitiveMesh.mdx b/docs/en/graphics/mesh/primitiveMesh.mdx
@@ -24,7 +24,7 @@ Built-in geometries not meeting your needs? You can create a `Mesh` asset in the
 
 ## Script Usage
 
-<playground src="primitive-mesh.ts"></playground>
+<Playground href="/embed/primitive-mesh" />
 
 The currently provided geometries are as follows:
 

diff --git a/docs/en/graphics/model/glTF.mdx b/docs/en/graphics/model/glTF.mdx
@@ -35,7 +35,7 @@ Both types of products are supported in Galacean. The choice of export type can
 
 glTF has many features, and the official website provides a large number of [examples](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0) for reference. Galacean also provides a replicated version for quick browsing. You can switch between different glTF models through the following **glTF List**.
 
-<playground src="gltf-loader.ts"></playground>
+<Playground href="/embed/gltf-loader" />
 
 ### Plugin Support
 

diff --git a/docs/en/graphics/model/use.mdx b/docs/en/graphics/model/use.mdx
@@ -69,7 +69,7 @@ this.engine.resourceManager
 
 The loaded model object will return a root node containing rendering information and animation information. Its usage is no different from ordinary nodes.
 
-<playground src="gltf-basic.ts"></playground>
+<Playground href="/embed/gltf-basic" />
 
 ### 1. Select Scene Root Node
 

diff --git a/docs/en/graphics/particle/renderer-main-module.mdx b/docs/en/graphics/particle/renderer-main-module.mdx
@@ -12,7 +12,7 @@ label: Graphics/Particle
 
 ## Properties
 
-<playground src="particle-mainModule.ts"></playground>
+<Playground href="/embed/particle-mainModule" />
 
 You can debug each property one by one in the provided example to help you better understand and control the main particle module, thereby achieving various complex and beautiful visual effects.
 

diff --git a/docs/en/graphics/renderer/meshRenderer.mdx b/docs/en/graphics/renderer/meshRenderer.mdx
@@ -8,7 +8,7 @@ label: Graphics/Renderer
 
 [MeshRenderer](/apis/core/#MeshRenderer) is a mesh renderer component that uses mesh objects (such as cubes) as the data source for geometric outlines. When an entity is mounted with a mesh renderer component, you only need to set its `mesh` and `material` to render the object.
 
-<playground src="scene-basic.ts"></playground>
+<Playground href="/embed/scene-basic" />
 
 ## Usage
 

diff --git a/docs/en/graphics/renderer/renderer.mdx b/docs/en/graphics/renderer/renderer.mdx
@@ -50,7 +50,7 @@ console.log("isCulled", renderer.isCulled);
 
 Below shows how to get the overall bounding box of multiple `Renderers`:
 
-<playground src="bounding-box.ts"></playground>
+<Playground href="/embed/bounding-box" />
 
 ## Methods
 

diff --git a/docs/en/graphics/renderer/skinnedMeshRenderer.mdx b/docs/en/graphics/renderer/skinnedMeshRenderer.mdx
@@ -23,9 +23,9 @@ In models exported from the art workflow, all bone and BlendShape information is
 
 ## Skeletal Animation
 
-<playground src="skeleton-animation-play.ts"></playground>
+<Playground href="/embed/skeleton-animation-play" />
 
 ## BlendShape
 
-<playground src="skeleton-animation-blendShape.ts"></playground>
+<Playground href="/embed/skeleton-animation-blendShape" />
 
diff --git a/docs/en/graphics/shader/builtins/blinnPhong.mdx b/docs/en/graphics/shader/builtins/blinnPhong.mdx
@@ -4,7 +4,7 @@ title: Blinn Phong
 
 [BlinnPhongMaterial](/apis/core/#BlinnPhongMaterial) material is one of the classic materials. Although it is not based on physical rendering, its efficient rendering algorithm and comprehensive optical components make it still applicable to many scenarios today.
 
-<playground src="blinn-phong.ts"></playground>
+<Playground href="/embed/blinn-phong" />
 
 ## Editor Usage
 

diff --git a/docs/en/graphics/shader/builtins/unlit.mdx b/docs/en/graphics/shader/builtins/unlit.mdx
@@ -4,7 +4,7 @@ title: Unlit
 
 In some simple scenes, you might not want to calculate lighting. The engine provides [UnlitMaterial](/apis/core/#UnlitMaterial), which uses the most streamlined shader code and only requires color or texture to render. Unlit material is suitable for rendering baked models. It only needs a basic texture or color to display the high-quality rendering results obtained from offline rendering. However, the downside is that it cannot display real-time light and shadow interactions because Unlit is determined by the texture and is not affected by any lighting.
 
-<playground src="unlit-material.ts"></playground>
+<Playground href="/embed/unlit-material" />
 
 ## Editor Usage
 

diff --git a/docs/en/graphics/shader/custom.mdx b/docs/en/graphics/shader/custom.mdx
@@ -4,7 +4,7 @@ title: Custom Shaders
 
 There may be some special rendering requirements in the business, such as water flow effects, which need to be implemented through **custom shaders** (Shader).
 
-<playground src="shader-water.ts"></playground>
+<Playground href="/embed/shader-water" />
 
 ## Creating Shaders
 

diff --git a/docs/en/graphics/shader/shaderLab/intro.mdx b/docs/en/graphics/shader/shaderLab/intro.mdx
@@ -15,4 +15,4 @@ flowchart LR
 
 Below is a simple example of using ShaderLab, which includes two Shaders. The `normal` Shader defines a vertex shader that only implements MVP transformation and a fragment shader that specifies the pixel color through a Uniform variable. Additionally, the `lines` Shader is a [shadertoy](https://www.shadertoy.com/view/DtXfDr) example modified using ShaderLab.
 
-<playground src="shader-lab-simple.ts"></playground>
+<Playground href="/embed/shader-lab-simple" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,4 +41,4 @@ In the editor, you can easily set the button's transition effects for different

		## Script Development

		<playground src="ui-Button.ts"></playground>
		<Playground href="/embed/ui-Button" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,4 +37,4 @@ stateDiagram

		## Script Development

		<playground src="ui-Event.ts"></playground>
		<Playground href="/embed/ui-Event" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,4 +25,4 @@ Select the node, then in the [Inspector Panel](/docs/interface/inspector), c

		## Script Development

		<playground src="xr-ar-simple.ts"></playground>
		<Playground href="/embed/xr-ar-simple" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -45,4 +45,4 @@ For adjusting the size of UI elements, refer to [Quickly Adjust UI Element Size]

		## Script Development

		<playground src="ui-Image.ts"></playground>
		<Playground href="/embed/ui-Image" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -57,4 +57,4 @@ The `Text` component can modify the rendering size by adjusting the `FontSize`.

		## Script Development

		<playground src="ui-Text.ts"></playground>
		<Playground href="/embed/ui-Text" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,4 +25,4 @@ export class FBXLoader extends Loader<FBXResource> {

		## Reference

		<playground src="obj-loader.ts"></playground>
		<Playground href="/embed/obj-loader" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,4 +15,4 @@ flowchart LR

		Below is a simple example of using ShaderLab, which includes two Shaders. The `normal` Shader defines a vertex shader that only implements MVP transformation and a fragment shader that specifies the pixel color through a Uniform variable. Additionally, the `lines` Shader is a [shadertoy](https://www.shadertoy.com/view/DtXfDr) example modified using ShaderLab.

		<playground src="shader-lab-simple.ts"></playground>
		<Playground href="/embed/shader-lab-simple" />