<cadmodel />

The <cadmodel /> element is used to display a 3D model of a component, it is usually part of a <cadassembly /> or <chip />.

export default () => (
  <board>
    <chip
      name="U1"
      footprint="soic8"
      cadModel={
        <cadmodel
          modelUrl="https://modelcdn.tscircuit.com/jscad_models/soic8.glb"
        />
      }
    />
  </board>
)

Repositioning the Model

You can use positionOffset and rotationOffset to reposition the model.

export default () => (
  <board>
    <chip
      name="U1"
      footprint="soic8"
      cadModel={
        <cadmodel
          positionOffset={{ x: -2, y: 0, z: 0 }}
          rotationOffset={{ x: 0, y: 0, z: 45 }}
          modelUrl="https://modelcdn.tscircuit.com/jscad_models/soic8.glb"
        />
      }
    />
  </board>
)

Importing local GLB models

import dip4ModelUrl from "./models/dip4.glb"

export default () => (
<board>
  <chip
    name="U1"
    footprint="dip4"
    cadModel={<cadmodel modelUrl={dip4ModelUrl} />}
  />
</board>
)

Providing a STEP model

You can provide a STEP model to the <cadmodel /> element by setting the stepFileUrl. When providing a STEP model, the STEP model will be used when exporting to STEP to preserve the exact geometry of the model.

Example coming soon!

Translucent Models

You can render a component as translucent (semi-transparent) by setting showAsTranslucentModel on the component.

export default () => (
  <board>
    <chip
      name="U2"
      footprint="soic8"
      showAsTranslucentModel
      cadModel={
        <cadmodel
          modelUrl="https://modelcdn.tscircuit.com/jscad_models/soic8.glb"
        />
      }
    />
  </board>
)