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:

Type	Attributes
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, 8th Wall Studio requires models to be converted to GLB after upload. Ensure that textures are embedded in the FBX file before converting to GLB.

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