Starting From Scratch

This guide walks you through the minimum amount of steps to open a component inside Triplex. If you haven't already make sure to install Node.js and initialize a new project with npm init and follow the prompts.

This installs the required packages to your project and places them in its package.json file.

npm install @types/react @types/react-dom @types/three @react-three/fiber react react-dom three

This can be anything you want, here we create a box.

export default function Scene() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="red" />
    </mesh>
  );
}

Continue building with either Triplex for VS Code or Triplex Standalone.

The Scene Panel is populated by your component props sourced by the TypeScript compiler which needs this file.