Static Assets

In this tutorial you learn the basics of combining multiple models into one geometry and reusing 2D and 3D assets from other software. You build a metallic beam with a parametric length and fixed end caps.

You complete this in five steps:

1. Create component
2. Create sketch
3. Create models
4. Create geometry
5. Add materials

1. Create Component

Create a component container as usual or by clicking on Create > Component Container at the right, and name it BEAM.

2. Create Sketch

For the profile beam:

1. Download this beam profile (.dxf).
2. At the top of the editor, click Create > From file... > Choose File PROFILE_75X75.dxf > Create.
3. Rename function to getProfileSketch through the sidebar, so that you have the following:

export function getProfileSketch() {
  const sketch = ASSETS.STATIC_SKETCHES.PROFILE_75X75
  return sketch
}

note

See that the DXF shows up under ASSETS at the top of the sidebar. You can keep creating more sketches from the same assets but see that the popup gives you now the option to reuse an existing one:

3. Create Models

A. Beam

Create an extrusion from the sketch:

1. Click Model > Extrude > Sketch, select getProfileSketch, then Create.
2. Rename the function to getProfileModel through the left sidebar:

tip

You could also do it via Model > Extrude > File... and select the DXF sketch directly. However it's good practice to create a GEOM2D function (i.e. getProfileSketch) for the 2D asset to doublecheck that it looks good.

Adjust the profile so it accounts for the end cap thickness and orientation:

3. Add the constant:

   const endCapThickness = 5

4. Set the plane on the x-axis with the offset:

   const plane = new SKYCAD.Plane(1, 0, 0, endCapThickness)

5. Adjust the extrusion length:

   model.addExtrude(sketch, plane, extrudeLength - 2 * endCapThickness)

6. Remove size from the function (only extrudeLength is used).
7. Click Save & Run with this finished version:

export function getProfileModel(extrudeLength: number) {
  const model = new SKYCAD.ParametricModel()

  const endCapThickness = 5
  const sketch = GEOM2D.getProfileSketch()
  const plane = new SKYCAD.Plane(1, 0, 0, endCapThickness)
  model.addExtrude(sketch, plane, extrudeLength - 2 * endCapThickness)

  return model
}

B. End Cap

1. Download this end cap (.glb).
2. Click Model > From file... > Choose File profile_end_cap.glb > Create.
3. Remove the rotation completely since the GLB file is already prepared for the profile.
4. Rename the function to getEndCapModel, so that it looks like:

   export function getEndCapModel() {
     const geometryGroup = new SKYCAD.GeometryGroup()
     geometryGroup.addGeometry(ASSETS.STATIC_MODELS.PROFILE_END_CAP)
     return geometryGroup
   }

note

This model comes with a texture already, thanks to the GLB format supporting textures.

4. Create Geometry

Assemble both models into a single geometry.

info

Two or more models can be assembled via a 3D container or geometry group:

const geometryGroup = new SKYCAD.GeometryGroup()
geometryGroup.addGeometry(model1, { position: P1, rotation: R1 })
geometryGroup.addGeometry(model2, { position: P2, rotation: R2, scale: 3 }) // "scale: 3" means 3 times bigger

Optional arguments position and rotation, as 3D vectors, define placement in 3D world:

const P1 = new SKYMATH.Vector3D(150, 0, 0) // translated 150 mm in x-direction
const R1 = new SKYMATH.Vector3D(0, 0, Math.PI / 2) // rotated 90 degrees in radians around z-axis

Build the geometry group:

1. Create a function generateGeometryGroup that returns a geometry group and takes beamLength:

export function generateGeometryGroup(beamLength: number) {}

2. Inside it, create the geometry group:

const geometryGroup = new SKYCAD.GeometryGroup()

3. Get the profile model and add it:

const profileModel = getProfileModel(beamLength)
geometryGroup.addGeometry(profileModel)

4. Get the end cap model:

const endCapModel = getEndCapModel()

5. Add the first end cap:

geometryGroup.addGeometry(endCapModel, {
  position: new SKYMATH.Vector3D(0, 0, 0),
})

6. Add the second end cap with translated position and 180 degree rotation:

geometryGroup.addGeometry(endCapModel, {
  position: new SKYMATH.Vector3D(beamLength, 0, 0),
  rotation: new SKYMATH.Vector3D(0, 0, Math.PI),
})

7. Return the geometry group, to end up with this finished function:

export function generateGeometryGroup(beamLength: number) {
  const geometryGroup = new SKYCAD.GeometryGroup()

  const profileModel = getProfileModel(beamLength)
  geometryGroup.addGeometry(profileModel)

  const endCapModel = getEndCapModel()
  geometryGroup.addGeometry(endCapModel, {
    position: new SKYMATH.Vector3D(0, 0, 0),
  })
  geometryGroup.addGeometry(endCapModel, {
    position: new SKYMATH.Vector3D(beamLength, 0, 0), // moves "beamLength" in x-direction
    rotation: new SKYMATH.Vector3D(0, 0, Math.PI), // rotates 180 degrees in radians around z-axis
  })

  return geometryGroup
}

5. Add Materials

Customize the appearance by giving the profile a metallic material. A material can be added only when adding a model to a geometry group. Inside generateGeometryGroup:

1. Create the material:

   const metalMaterial = new SKYCAD.Material({ color: 0xcccccc, metalness: 1, roughness: 0 })

2. Create a list (you can have more than one material):

   const beamMaterials = [metalMaterial]

3. Assign the material when adding the profile model:

   geometryGroup.addGeometry(profileModel, { materials: beamMaterials })

4. Final function with material:

   export function generateGeometryGroup(beamLength: number) {
     const geometryGroup = new SKYCAD.GeometryGroup()
   
     const profileModel = getProfileModel(beamLength)
     const metalMaterial = new SKYCAD.Material({
       color: 0xcccccc, // grey in hexadecimal
       metalness: 1, // value ranges from 0 (non-metal) to 1 (metal)
       roughness: 0, // value ranges from 0 (smooth/glossy) to 1 (rough/matte)
     })
     const beamMaterials = [metalMaterial]
     geometryGroup.addGeometry(profileModel, { materials: beamMaterials })
   
     const endCapModel = getEndCapModel()
     geometryGroup.addGeometry(endCapModel, {
       position: new SKYMATH.Vector3D(0, 0, 0),
     })
     geometryGroup.addGeometry(endCapModel, {
       position: new SKYMATH.Vector3D(beamLength, 0, 0),
       rotation: new SKYMATH.Vector3D(0, 0, Math.PI),
     })
   
     return geometryGroup
   }

---

You have learned the basics of modeling. Turn your models into a component with customizable properties in the next tutorial: Parts.