TresJS create 3D experiences declaratively with Vue Components
From Author:
- Intro 3D
- Intro WebGL
- ThreeJS
- Why TresJS
- Installation or Stackblitz setup
- Core Basics
- Setting up the Canvas
- Scene
- Camera
- Adding an object
- Geometries
- Arguments
- Props
- Slots
- The Loop
- UseRenderLoop composable
- Before and After rendering callbacks
- Basic Animations
- Materials
- Basic Material
- Normal Material
- Toon Material
- Lambert Material
- Standard and Physical Material
- Metalness, roughness
- Lights
- AmbientLight
- DirectionalLight
- PointLights
- Shadows
- Textures
- Loading textures with useTextures
- Tips and tricks
- Misc
- Orbit Controls
- Loading models with Cientos
- Debugging your scene
- Performance
This workshop has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.
FAQ
Trace.js is a library for creating 3D scenes using view components, allowing users to build from basic to advanced projects like galaxies and animated models.
For coding with Trace.js, VS Code is recommended, but any preferred IDE can be used. Also, terminal applications like iTermApp can be utilized for executing commands.
To start a new project, use the command 'NPXDigit' in your terminal. This command clones a GitHub template for setting up a Trace.js project.
To set up a Trace.js environment, you need Node.js installed on your machine, and it's recommended to use package managers like npm, yarn, or pnpm for managing dependencies.
Yes, the exercises from the Trace.js workshop are available in a repository which can be cloned from GitHub. This allows participants to download and review the exercises at any time.
The 'UseRenderLoop' in Trace.js is used for animating scenes. It ensures that the scene updates consistently in real-time by redrawing the scene at the refresh rate of the browser, which is crucial for animations and interactive elements.
Contributions to Trace.js can be made through its GitHub repository. Potential contributors can work on open issues, propose new features, or help with documentation and localization efforts.
Comments