Zum Hauptinhalt springen

3D Models

Studio provides support for incorporating 3D objects into your projects using the Mesh component, allowing you to create immersive and interactive experiences. 3D models today cover Primitives/Geometries that come included as options in Studio, or GLB/GLTF models that can be created externally and imported into Studio. 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 3D Model can be added to the entity via the Studio interface via the Mesh component, or in code. Adding them in Studio is done via the (+) button on the Hierarchy or adding a "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
RingGeometryinnerRadius, outerRadius

GLTF & GLB 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.
reverseBooleanfalseIf set, the animation will play in reverse when it finishes playing forward (together counts as one loop iteration)
repetitionsNumberfalseIf set along with loop, the number of times the loop will be repeated (-1 means loop forever).
crossFadeDurationNumberfalseThe time in seconds that will be spent blending between animations when a new animation is started (and an existing animation is playing)

FBX to GLB conversion

Studio supports native FBX to GLB conversion via Facebook-developed FBX2glTF CLI conversion tool. However, Studio does not support FBX conversion with separate texture sources. In your modeling tool's FBX export settings, be sure to embed textures before converting to GLB in Niantic Studio.

FBXtoGLB

Materials

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

MeshMaterialsNewComponent

The following material types are supported:

  • Material (the standard type)
  • ShadowMaterial
  • UnlitMaterial*
  • HiderMaterial*
hinweis

* Unlit and Hider Materials can only be applied to Primitives.

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. The HiderMaterial (for Primitives) lets you easily obscure or "hide" objects within a scene, within or behind the material. The UnlitMaterial ensures that certain objects remain clear and readable, unaffected by light sources, shadows, or shading effects.

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})

You can also set a texture, and unless you want it to be tinted, make sure the r/g/b are set to 255:

ecs.Material.set(world, eid, {
r: 255,
g: 255,
b: 255,
textureSrc: 'https://placehold.co/800?text=Hello+World&font=roboto'
})

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.