Your first scene
This guide will help you to create your first Tres scene. 🍩
Setting up the experience Canvas
Before we can create a Scene, we need somewhere to display it. Using plain ThreeJS we would need to create a canvas
HTML element to mount the WebglRenderer
and initialize the scene
With TresJS you only need to add the default component <TresCanvas />
to the template of your Vue component.
<template>
<TresCanvas>
<!-- Your scene goes here -->
</TresCanvas>
</template>
WARNING
It's important that all components related to the scene live between the <TresCanvas />
component. Otherwise, they will be not rendered.
The TresCanvas
component is going to do some setup work behind the scene:
- It creates a WebGLRenderer that automatically updates every frame.
- It sets the render loop to be called on every frame based on the browser refresh rate.
Creating a scene
We need 4 core elements to create a 3D experience:
- An Scene to hold the camera and the object(s) together.
- An Renderer to render the scene into the DOM.
- A Camera
- An Object
With TresJS you only need to add the <TresCanvas />
component to the template of your Vue component and it will automatically create a Renderer
(canvas
DOM Element) and Scene
for you.
<template>
<TresCanvas>
<!-- Your scene goes here -->
</TresCanvas>
</template>
Then you can add a PerspectiveCamera using the <TresPerspectiveCamera />
component.
<template>
<TresCanvas>
<TresPerspectiveCamera />
</TresCanvas>
</template>
Adding a 🍩
That scene looks a little empty, let's add a basic object. If we where using plain ThreeJS we would need to create a Mesh object and attach to it a Material and a Geometry like this:
const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
const material = new THREE.MeshBasicMaterial({ color: 'orange' })
const donut = new THREE.Mesh(geometry, material)
scene.add(donut)
A Mesh is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.
Now let's see how we can easily achieve the same with TresJS. To do that we are going to use <TresMesh />
component, and between the default slots, we are going to pass a <TresTorusGeometry />
and a <TresMeshBasicMaterial />
.
<template>
<TresCanvas>
<TresPerspectiveCamera />
<TresMesh>
<TresTorusGeometry />
<TresMeshBasicMaterial color="orange" />
</TresMesh>
</TresCanvas>
</template>
INFO
Notice that we don't need to import anything, that's because TresJS automatically generate a Vue Component based on the Three Object you want to use in CamelCase with a Tres prefix. For example, if you want to use an AmbientLight
you would use <TresAmbientLight />
component.
From here onwards you can start adding more objects to your scene and start playing with the properties of the components to see how they affect the scene.