Skip to main content
Built-in Elements

<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>
)
3D Circuit Preview

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>
)
3D Circuit Preview

Importing local GLB models​

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

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

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!

Supported File Formats​

The following model file formats are supported:

  • GLB
  • GLTF
  • OBJ
  • STEP
  • STL