Using Triplex for VS Code

Let's create your first component with Triplex! No experience is needed to follow along however it's assumed you have a project set up after following a page under Starting a Project.

First we are going to make a new file to build our scene in. With Visual Studio Code open:

1. Create a new file and save it in the src directory of your project, we've called it new-scene.tsx.

2. Copy the following code into the file.

   src/new-scene.tsx

   export function Scene() {
     return null;
   }

3. Click the Open in Triplex CodeLens action above the Scene component. Nothing will appear in the scene yet.

   

4. Copy the highlighted code into your component. A box will appear in the scene.

   src/new-scene.tsx

   export function Scene() {
     return (
       <>
         <mesh>
           <boxGeometry />
           <meshStandardMaterial />
         </mesh>
       </>
     );
   }

5. Click & drag over the scene to rotate the camera around.

6. Click the box in the scene to focus it. When focused press the F key to zoom the camera to it.

   

Now let's add some more shapes to fill the scene out.

1. Copy the highlighted code into your component. A sphere will appear in the scene.

   src/new-scene.tsx

   export function Scene() {
     return (
       <>
         ...
         <mesh>
           <sphereGeometry />
         </mesh>
       </>
     );
   }

2. Copy the highlighted code into your component. The sphere is now shaded.

   src/new-scene.tsx

   export function Scene() {
     return (
       <>
         ...
         <mesh>
           <sphereGeometry />
           <meshStandardMaterial />
         </mesh>
       </>
     );
   }

3. Click the sphere in the scene, then click the Translate action in the Scene Controls, then finally move the sphere off the box.

   

Before continuing try adding a cylinder mesh yourself. Make sure to save changes using the ⌘ + SSave action!

Now let's add three-point lighting to the scene.

1. When no lights are present in the scene default lights are turned on. Click the Turn Off Default Lights action in the Scene Controls to turn them off. Click it again to turn it back on.

2. Copy the highlighted code into your component. A point light will appear in the scene.

   src/new-scene.tsx

   export function Scene() {
     return (
       <>
         ...
         <pointLight />
       </>
     );
   }

3. With the point light selected, go to the scene panel and update its name prop to "Key light".

4. Position the key light in front and to the side of the scene.

   

5. Duplicate the key light by selecting it then using the ⌘ + DDuplicate Element action. Name the duplicated light "Fill light" and move it to the opposite side of the scene.

6. Create the last light by adding another point light named "Back light" then move it to the back of the scene.

   

Before continuing try adjusting the lights intensity and color props in the scene panel. The key light should have the highest intensity, then about half as much for the fill light, and then the backlight about the same.

Now let's add a camera to the scene.

1. Install Drei — a companion library for Three Fiber.

   Terminal

   npm i @react-three/drei

2. Copy the highlighted code into your component then jump back into Triplex for VS Code. A camera will appear in the scene.

   new-scene.tsx

   import { PerspectiveCamera } from "@react-three/drei";
    
   export function Scene() {
     return (
       <>
         ...
         <PerspectiveCamera />
       </>
     );
   }

3. Position and rotate the camera at an angle in-front of the scene. We're operating on vibes here so do what feels good!

   

4. Click the Set Local Transform action in the Scene Controls. Transforms now operate in local space, for example when translating the camera it will move in the direction it's facing. Click again to move back to global space.

5. On the camera set the makeDefault prop to be checked. When playing your scene this camera will now be used.

6. Click the Play action in the Scene Controls to run the scene through your camera.

   

7. Click the Settings action next to the Play action to switch to other cameras.

Before continuing try adjusting the camera fov, near and far props in the scene panel. They control the field of view and where objects are rendered in relation to the camera.

Finally we're going to add some props to your component.

1. Add two props to your component, the backlight prop should be a boolean that defaults to true and the backlightColor prop should be a string.

   new-scene.tsx

   export function Scene({
     backlight = true,
     backlightColor,
   }: {
     backlight?: boolean;
     backlightColor?: string;
   }) {
     // ...
   }

2. Conditionally render the backlight element using the backlight prop.

   new-scene.tsx

   export function Scene({
     backlight = true,
     backlightColor,
   }: {
     backlight?: boolean;
     backlightColor?: string;
   }) {
     return (
       <>
         ...
         {backlight && <pointLight name="Back light" />}
       </>
     );
   }

3. Pass the backlightColor prop to the backlight point light.

   new-scene.tsx

   export function Scene({
     backlight = true,
     backlightColor,
   }: {
     backlight?: boolean;
     backlightColor?: string;
   }) {
     return (
       <>
         ...
         {backlight && <pointLight color={backlightColor} name="Back light" />}
       </>
     );
   }

4. Click the Component Controls action in the ScenePanel. The controls shown in the scene panel are the props the component accepts which can be changed as you build!

   

5. Toggle the backlight prop on and off, then set the backlightColor prop to a color you like. Red is always a great choice!

Congratulations on building your first 3D component! From here you can learn more about the features of Triplex and join our community to build amazing things together.