Using Triplex Standalone

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 Triplex Standalone open:

1. Find the New File action in the Tab Bar and click it. A new file called untitled.tsx is opened that contains a box.

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

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

Before continuing let's save the file to the file system using the ⌘ + SSave action, name it anything you want.

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

1. Click the Add Element action in the scene panel. The Assets Panel will open. Search for Mesh and click it. Nothing will appear in the scene yet.

2. Hover over the added mesh and click the Add Child Element action then search for Sphere Geometry and click it. A sphere will appear in the scene.

3. Hover over the mesh and click the Add Child Element action again then search for Mesh Standard Material and click it. The sphere is now shaded.

4. 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 in code instead of the UI. Jump to code quickly by clicking the "View source" link in the scene panel.

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. Click the Add Element action in the scene panel then search for Point Light and click it. A point light will appear in the scene.

3. With the point light selected, go to the context area 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 "Backlight" then move it to the back of the scene.

Before continuing try adjusting the lights Intensity and Color props in the context area. 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 by updating code.

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 Standalone. A camera will appear in the scene.

   new-scene.tsx

   import { PerspectiveCamera } from "@react-three/drei";
    
   export function Untitled() {
     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, 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 Make Default 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 context area. 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. Click the "View source" link in the scene panel to jump to code.

2. 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 Untitled({
     backlight = true,
     backlightColor,
   }: {
     backlight?: boolean;
     backlightColor?: string;
   }) {
     // ...
   }

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

   new-scene.tsx

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

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

   new-scene.tsx

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

5. 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!

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