<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, rotationOffset, and zOffsetFromSurface 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>
)

Z-Offset from Surface

Use zOffsetFromSurface to control the vertical distance of the model from the PCB surface. This is useful for components that need to be positioned above or below the board surface.

export default () => (
  <board>
    <chip
      name="U1"
      footprint="soic8"
      cadModel={
        <cadmodel
          zOffsetFromSurface="2mm"
          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>
)

Supported File Formats

The following model file formats are supported:

• GLB
• GLTF
• OBJ
• STEP
• STL
• WRL

Properties

Property	Type	Description
modelUrl	string	URL to the 3D model file (GLB, GLTF, OBJ, STL, STEP, WRL)
stepUrl	string	URL to a STEP model file for export purposes
positionOffset	{x: number, y: number, z: number}	Offset the model position from the component center
rotationOffset	number | {x: number, y: number, z: number}	Rotate the model (number = Z-axis rotation in degrees)
zOffsetFromSurface	Distance	Vertical offset from the PCB surface (e.g., "2mm", "0.1in")
size	{x: number, y: number, z: number}	Scale the model size
modelUnitToMmScale	Distance	Scale factor to convert model units to millimeters