Skip to main content

Asset

Asset​

The Asset component is the entry to Threekit embeds.

The simplest embed (requires ThreekitSource).

import { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import { Asset, ThreekitSource } from '@threekit/lignin';

<Canvas>
  <Suspense fallback={null}>
    <ThreekitSource env="main" token={authToken}>
      <Asset id={id} />
    </ThreekitSource>
  </Suspense>
</Canvas>;

Embed Multiple copies, inside a three.js null:

  <group position={[-2, 0, 0]}>
    <Asset id={id} />
  </group>
  <group position={[2, 0, 0]}>
    <Asset id={id} />
  </group>

Pass in a configuration object:

<Asset configuration={{ Color: '0xff00ff' }} />

Or, put the attribute properties directly in props:

<Asset Color="0xff00ff" />

Assets can be embedded via uuid, or with a query:

<Asset id={{ name: 'Horse' }} />

Props​

id: String​

withStage: Boolean | string​

Render the asset in a stage. If you pass { withStage: true } it will render the default stage, or provide a custom stage via uuid.