From d1e1ce1db0e90af3a232b729ddacba606a04481b Mon Sep 17 00:00:00 2001 From: Marcin Jerzak Date: Mon, 4 Mar 2024 09:13:35 +0100 Subject: [PATCH] added demo links --- apps/docs/src/content/docs/index.mdx | 2 ++ .../instancedSprite/01-instanced-sprite-mesh.mdx | 13 +++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/apps/docs/src/content/docs/index.mdx b/apps/docs/src/content/docs/index.mdx index 0629673..6a816b7 100644 --- 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) + 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 index afb9327..3396fd5 100644 --- 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 = new Insta for example, the above will allow for autocompletion of animation names -shows how glint material looks like \ No newline at end of file +shows how glint material looks like