added demo links

jerzakm · Mar 4, 2024 · d1e1ce1 · d1e1ce1
1 parent e98dbb5
commit d1e1ce1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/apps/docs/src/content/docs/index.mdx b/apps/docs/src/content/docs/index.mdx
@@ -24,6 +24,8 @@ hero:
 
     [Get started](/instancedsprite/01-instanced-sprite-mesh/)
 
+		[Demo](https://threejs-kit-playground.vercel.app/instanced-sprite-ts)
+
   </div>
 
 

diff --git a/apps/docs/src/content/docs/instancedSprite/01-instanced-sprite-mesh.mdx b/apps/docs/src/content/docs/instancedSprite/01-instanced-sprite-mesh.mdx
@@ -8,6 +8,7 @@ import { Image } from "astro:assets";
 
 `InstancedSpriteMesh` was created to enabled high performant instancing of animated sprites in threejs. Current solutions do not fare well with very high instance counts. This package aims to resolve that, boasting the capability to render tens of thousands individually animated sprites even on low/medium power devices.
 
+**Example**: [Live](https://threejs-kit-playground.vercel.app/instanced-sprite-ts) [Code](https://github.com/jerzakm/threejs-kit/tree/main/apps/playground/src/routes/instanced-sprite-ts)
 
 ## Installation
 
@@ -57,22 +58,22 @@ mesh.spritesheet = spritesheet;
 ```js
   // set global FPS for updating
   mesh.fps = 15
-  
+
   // play animation on instance id 0 - loops by defualt
   mesh.play('IdleBackward').at(0)
   // play animation without looping
   mesh.play('RunLeft', false).at(1);
   // play animation backwards with looping
   mesh.play('RunLeft', true, 'REVERSE').at(2);
-
 
-  // mesh.play is a utility that combines the use of these functions:  
+
+  // mesh.play is a utility that combines the use of these functions:
 
   // animation by name
-  mesh.animation.setAt(0, 'RunBackward');  
+  mesh.animation.setAt(0, 'RunBackward');
   // looping y/n
   mesh.loop.setAt(0, false);
-  // animation direction - FORWARD (default) / REVERSE / PAUSE 
+  // animation direction - FORWARD (default) / REVERSE / PAUSE
   mesh.playmode.setAt(0, 'REVERSE')
 
   // billboarding
@@ -118,4 +119,4 @@ const mesh: InstancedSpriteMesh<MeshBasicMaterial, SpriteAnimations> = new Insta
 
 for example, the above will allow for autocompletion of animation names
 
-<Image src={materialPreview} alt="shows how glint material looks like" />
+<Image src={materialPreview} alt="shows how glint material looks like" />