Skip to main content

Models

Introduction​

Studio includes several built-in primitives—such as spheres, boxes, and planes—that can be quickly customized and positioned within the editor. For more intricate designs, Studio supports external 3D models in GLTF/GLB formats, ideal for web-based 3D content, and FBX files, which can be converted to GLB after upload. This setup allows for a rich range of 3D elements, whether creating streamlined or highly detailed virtual scenes.

Primitives​

The following built-in Primitives are available:

TypeAttributes
SphereGeometry{radius}
BoxGeometry{width, height, depth}
PlaneGeometry{width, height}
CapsuleGeometry{radius, height}
ConeGeometry{radius, height}
CylinderGeometry{radius, height}
PolyhedronGeometry{radius}
CircleGeometry{radius}
RingGeometry{innerRadius, outerRadius}

Adding a Primitive​

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 by adding geometry to a Custom Component on the entity.

Example​

ecs.SphereGeometry.set(world, eid, {radius: 5})

GLTF Component​

Supported Formats​

GLTF and GLB​

GLTF and GLB models are supported and ideal when working with 3D on the web.

FBX​

FBX upload is supported however, Niantic Studio requires models to be converted to GLB after upload. Ensure that textures are embedded in the FBX file before converting to GLB.

fbx-to-glb-converter.png

Setting a Model​

The following example shows how to set a GLTF or GLB on a entity at runtime.

info

This method requires that you select your custom model from the component properties, once the component is applied to your entity

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
    name: 'loaded-model',
    schema: {
        // @asset
        model: ecs.string,
    },
    add: (world, component) => {
        ecs.GltfModel.set(world, eid, {
            url: component.schema.model,
        })
    }
})

Setting Model Properties​

Model Properties​

View properties here.

Example​

The following example shows how to set a Model on an entity at runtime.

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
    name: 'loaded-model',
    schema: {
        // @asset
        model: ecs.string,
    },
    add: (world, component) => {
        ecs.GltfModel.set(world, eid, {
            url: component.schema.model,
            animationClip: 'clip1',
            loop: true,
            paused: false,
            time: 0,
            timeScale: 1,
        })
    }
})

Setting Material Properties​

Materials can be configured either through code or directly within the Mesh component in the editor.

Material Types​

Material​

A standard PBR material.

UnlitMaterial​

Material unaffected by lighting or shadows.

ShadowMaterial​

Material that only responds to shadows.

HiderMaterial​

Specialty Material that hides any objects behind it.

Material Properties​

View properties here.

Example​

The following example shows how to set a Material on an entity at runtime.

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

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