Skip to content

Playground for TresJS experiments and R3F usingAstro

Notifications You must be signed in to change notification settings

JaimeTorrealba/playground

 
 

Repository files navigation

repository-banner.png

npm package discord chat


TresJS Playground

Playground for TresJS experiments and R3F using Astro

Live at Playground

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

Authoring experiments

  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: [email protected]
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
---
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']
---
  1. 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
  1. Add it to the file created on steps 1 and .
---
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 />
  1. Take a screenshot of your scene ot the public directory.

License

MIT

Sponsors

Be the first to support this project here ☺️

About

Playground for TresJS experiments and R3F usingAstro

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 71.5%
  • Vue 23.2%
  • GLSL 4.1%
  • TypeScript 1.2%