JavaScript Projects

Triplex works best with TypeScript as the rich type information is used to populate the editor controls, however if you're not yet using TypeScript you're still able to use Triplex.

Set up config file

Create a config file and populate it.

touch .triplex/config.json

{
  "components": ["../src/components/**/*.jsx"],
  "files": ["../src/**/*.jsx"]
}

Where "components" is a glob pointing to custom components that can be added to other components, and "files" is a glob pointing to any files you want to open with Triplex.

Add type packages

Make sure to add types to your project, even if you're not using TypeScript!

This will make your experience in Triplex that much better as all Three.js primitives will have their types picked up by the editor to display as controls.

npm install @types/react @types/three

Open your project

You're now able to open your project with Triplex! When you do Triplex will add a .tsconfig.json file to the root of your project.

Get the most out of controls

You can still get some inference for your own components by giving some hints. For declared props if you add default props to them the editor can infer the primitive type (string, number, or boolean).

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