Project Settings

Your Triplex project can be configured through the .triplex/config.json file.

Options

Files

The files option is a glob array of relative paths used to tell Triplex what files it can open. You can define multiple roots. These found files will be displayed in the File > Open menu.

Example

{
  "files": ["../src/**/*.tsx"]
}

Components

The components option is a glob array of relative paths used to tell Triplex what files should be available to add. You can define multiple roots.

Defaults to [].

Example

{
  "components": ["../src/components/**/*.tsx"]
}

Public directory

The public directory can be used to expose files through the local dev server, such as images, videos, and GLTF files. For example if the public directory includes a public/image.png image it will be made available at http://localhost:3333/image.png.

Defaults to "../public".

Example

{
  "publicDir": ["../public"]
}

Assets directory

Folder inside the public directory folder where Triplex maintains static assets such as GLTF and GLB files, made available to be added to the open component as a GLTF element.

Defaults to "assets".

Example

{
  "assetsDir": "mesh"
}

Provider

Use the provider property to declare a global component that is rendered in for every scene. It can render Context providers such as an XR component, a router, and even custom ones. Props your provider takes can be set through the editor, learn more.

The provider component must be the default export and render the children prop.

{
  "provider": "./provider.tsx"
}

// ./provider.tsx
import { XR } from "@react-three/xr";
 
function Provider({ children }) {
  return <XR>{children}</XR>;
}
 
export default Provider;

Define

The define option is used to replace hardcoded variables in your source code with values from the config file. Works exactly the same as the define option in Vite.

{
  "define": {
    "__DEV__": true
  }
}

Renderer attributes

The rendererAttributes option is used to configure the renderer. Currently only the gl property is supported that sets top level attributes of the WebGLRenderer.

{
  "rendererAttributes": {
    "gl": {
      "antialias": true
    }
  }
}