Showcase and examples lab for TresJS
Live at Lab
Make sure to install the dependencies:
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install
Start the development server on http://localhost:3000
npm run dev
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Check out the deployment documentation for more information.
You can easily add new TresJS examples into the playground by creating a branch from main
with the following structure feature/name-of-your-demo
.
This playground uses nuxt/content
First, add yourself as an author so your name figures on the demos you create
your-name.md
file under content/authors
directory.---
name: Alvaro Saburido
slug: alvarosabu
email: hola@alvarosaburido.dev
twitter: alvarosabu
github: alvarosabu
website: https://alvarosaburido.dev
avatar: https://avatars.githubusercontent.com/u/4699008?s=96&v=4
---
Every demo or experiment consist on two parts
content/experiments/
components/content
your-awesome-demo.md
file under content/experiments
directory.slug
of your author
to the correspondant field.---
thumbnail: /lowpoly-planet.png
title: Low Poly Planet
slug: lowpoly-planet
author: alvarosabu
description: Low Poly Planet exported from Blender
tags: ['basic', 'cientos', 'useGLTF', 'blender']
---
components/content
to hold your scene. If your scene contains async features
, you can create it like this and Nuxt will auto-import it.βββ components/content/
βββ lowpoly-planet/
βββ index.vue // This will be the `root` cmponent containing the `TresCanvas`
βββ model.vue // Component with async operation
---
thumbnail: /lowpoly-planet.png
title: Low Poly Planet
slug: lowpoly-planet
author: alvarosabu
description: Low Poly Planet exported from Blender
tags: ['basic', 'cientos', 'useGLTF', 'blender']
---
<LowpolyPlanet />
public
directory.Note that the system will automatically add a link to your demo's source code on Github, so that visitors can see how you made your demo.
The link will be broken until your demo is merged into the main Lab branch.
Be the first to support this project here βΊοΈ