Pre-Existing Project

Your pre-existing React project can be used with Triplex without needing upfront configuration, however to have a complete experience some set up is needed if you're not using TypeScript.

Component props are inferred by TypeScript and displayed in the Scene Panel as controls. Installing these types enables host elements such as mesh and group to have their props available as controls.

npm install @types/react @types/three

Yes. Aliases defined in your tsconfig.json are honored by Triplex. For example the following config lets you import modules from the src/components folder through the @components/ module prefix.

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

If you've used Next.js module path aliases it's exactly the same.

Triplex renders components in a isolated sandbox taking control of rendering your component. If your component was not built to be self-contained it may error, common with components that rely on Context or global state.

To fix this you could:

• Refactor your component to be self contained
• Use a Global Provider to provide the missing React context
• Declare the required Context / state inside another component and open that one instead
• Set default props

If your project doesn't use TypeScript there is less type information available to populate the editor. You can get some inference for your components by declaring default props.

export function Component({ color = "red", x = 0, visible = true }) {
  return (
    <mesh visible={visible}>
      <meshBasicMaterial color={color} position={[x, 0, 0]} />
    </mesh>
  );
}

We recommend building with TypeScript for the best experience.

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