Skip to main content

Mesh

This section provides guidance on setting up a Mesh (or 3D object) in your project. Studio provides support for incorporating 3D objects into your projects, allowing you to create immersive and interactive experiences. To learn more about using and optimizing 3D Models in GLB/GLTF format please see Your 3D Models on the Web. When you click on a 3D model in the left menu, it will open into the 3D Model viewer. This viewer is a great tool for checking if your model is set up correctly.

A Mesh can be added to the entity via the Studio interface or in code. Adding them in Studio is done via the (+) button on the Hierarchy or adding "New Component" via the Inspector for a selected entity. The Mesh component features various Geometry, Materials, and GLTF Animations settings.

MeshNewComponent

Primitives

The following geometries (aka Primitives) are supported. For custom objects, GLTF models are a good option. Otherwise it’s technically possible to use raw THREE.js code to do things like custom geometries if you really need to.

They can all be configured the same as any other component, for example:

ecs.SphereGeometry.set(world, eid, {radius: 5})
GeometryAttributes
SphereGeometryradius
BoxGeometrywidth, height, depth
PlaneGeometrywidth, height
CapsuleGeometryradius, height
ConeGeometryradius, height
CylinderGeometryradius, height
TetrahedronGeometryradius
CircleGeometryradius

3D Models

Studio supports GLTF and GLB files types.

Set a model source

ecs.GltfModel.set(world, eid, {url: 'https://some.example/my-model.gltf'})

Setting model properties

ecs.GltfModel.set(world, eid, {
url: 'https://some.example/my-model.gltf',
animationClip: 'clip1',
loop: true,
paused: false,
time: 0,
timeScale: 1,
})

Notes:

  • DRACO compression is supported
  • As with other supported components, model assets in the project can be used (for more, see Assets)

Model properties

PropertyDataRequiredDescription
urlstringtrueThe source url.
animationClipstringfalseThe name of the animationClip attached to the model to play
loopBooleanfalseWhether the animation clip restarts after it finishes playing or not
pausedBooleanfalseWhether the animation clip is paused
timenumberfalseTime in seconds of animationClip to jump to
timeScalenumberfalseScaling factor for the time. 0 causes the animation to pause. Negative values cause the animation to play backwards.

Materials

Materials can be configured either in code or as part of the Mesh component in the editor:

MeshMaterialsNewComponent

There are currently two types of materials:

  • Material (the standard type)
  • ShadowMaterial

The standard material supports a wide variety of configurations (roughness, metalness, and emissive textures for example). The shadow material makes transparent objects that can still have visible shadows projected on them (if set to receive them). This is useful for AR situations where we want objects to appear to have shadows in the real world.

Materials can be set in code:

// Setting the standard material 
ecs.Material.set(world, eid, {r: 255, g: 0, b: 100, roughness: 1})

// Setting the shadow material
ecs.ShadowMaterial.set(world, eid, {r: 255, g: 0, b: 100})

Material properties

Displayed PropertyECS PropertyiesDataComponentDescription
Colorr, g, b Number (uint8), [0...255]AllColor of the material
TexturetextureSrcString (URL)MaterialThe color map, modulated by color (if set)
RoughnessroughnessNumber (float) [0...1]MaterialHow rough the material appears
Roughness TextureroughnessMapString (URL)MaterialGreen channel of this texture maps the roughness, multiplied by the roughness number.
MetalnessmetalnessNumber (float), [0...1]Material How metallic the material appears
Metalness TexturemetalnessMapString (URL)MaterialBlue channel of this texture affects how metal the material appears.
NormalnormalScaleNumber (float) [0...1]MaterialHow much the normal map (if set) affects the material.
Normal TexturenormalMapString (URL)MaterialNormal map of the texture.
OpacityopacityNumber (float) [0...1]AllOverall alpha/transparency of the material.
Opacity TextureopacityMapString (URL)MaterialAlpha/transparency mapped via a texture.
EmissiveemissiveIntensityNumber (float) [0...1]MaterialOverall intensity of the emissive map.
Emissive TextureemissiveMapString (URL)MaterialEmissiveness mapped as a texture. Modulated by emissive color and intensity.
Emissive ColoremissiveR, emissiveG, emissiveBNumber (uint8) [0...255]MaterialOverall emissive color of the material.
SidesideString (“front”, “back”, “double”)AllWhich sides of faces will be rendered.
BlendingblendingString (“no”, “normal”, “additive”, “subtractive”, “multiply”)MaterialBlending to use when displaying objects with this material.
Repeat (X, Y)repeatX, repeatYNumber (float)MaterialHow many times a texture is repeated across a material.
Offset (X, Y)offsetX, offsetYNumber (float)MaterialHow much a texture is offset across a material.
Depth TestdepthTestBooleanAllWhether to test depth when rendering this material (true by default)
Depth WritedepthWriteBooleanAllWhether rendering this material impacts the depth buffer (true by default)
WireframewireframeBooleanMaterialRender geometry as wireframe.