Download

Manual Setup

This guide walks you through the same steps Triplex takes when bootstrapping an existing project.

Install dependencies

Install react, @types/react, three, @types/three, and @react-three/fiber in your project.

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

Alternatively you can use your package manager of choice such as pnpm, yarn, or bun.

Configure TypeScript

Open or create a tsconfig.json and add the following:

{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "es2022"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "types": ["@react-three/fiber"]
  },
  "include": ["."],
  "exclude": ["node_modules"]
}

Configure Triplex

Create a config file and populate it.

touch .triplex/config.json
{
  "components": ["../src/components/**/*.tsx"],
  "files": ["../src/**/*.tsx"]
}

Add an example

Create an example file src/scene.tsx and add the following:

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

After set up is complete:

  • Run the Triplex executable to start and open the editor
  • Edit the component in src/scene.tsx and see it updated in the editor
  • Edit the component in the editor and see it updated in your code

Next steps

Once you have set up your project for Triplex, these topics will help you get up to speed: