TresJS Lab

Showcase and examples lab for TresJS

Live at Lab

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Check out the deployment documentation for more information.

Add an experiment 🧪

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

Add yourself as an author

First, add yourself as an author so your name figures on the demos you create

1. Create a your-name.md file under content/authors directory.
2. Add Frontmatter to provide your meta-data

---
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
---

Add a demo

Every demo or experiment consist on two parts

• A markdown file under content/experiments/
• A vue component containing the scene under components/content

1. Create a your-awesome-demo.md file under content/experiments directory.
2. Add Frontmatter to provide the meta-data of your experiment, this is crucial to get the cards on the home page nice and pretty. Remember to add the slug of your author to the correspondant field. Be sure to add status: published, otherwise the thumbnail won't show up during your tests.

---
thumbnail: /lowpoly-planet.png
title: Low Poly Planet
slug: lowpoly-planet
author: alvarosabu
status: published
description: Low Poly Planet exported from Blender
tags: ['basic', 'cientos', 'useGLTF', 'blender']
---

3. Create a component under 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

4. Add it to the file created on steps 1 and .

---
thumbnail: /lowpoly-planet.png
title: Low Poly Planet
slug: lowpoly-planet
author: alvarosabu
status: published
description: Low Poly Planet exported from Blender
tags: ['basic', 'cientos', 'useGLTF', 'blender']
---

<LowpolyPlanet />

5. Take a screenshot of your scene ot the public directory.

License

MIT

Sponsors

Be the first to support this project here ☺️