Modelos

Introducción

Studio incluye varias primitivas integradas, como esferas, cajas y planos, que pueden personalizarse y colocarse rápidamente en el editor. Para diseños más complejos, Studio admite modelos 3D externos en formatos GLTF/GLB, ideales para contenidos 3D basados en web, y archivos FBX, que se pueden convertir a GLB después de cargarlos. Esta configuración permite una rica gama de elementos 3D, ya sea para crear escenas virtuales aerodinámicas o muy detalladas.

Primitivos

Están disponibles las siguientes primitivas incorporadas:

Tipo	Atributos
EsferaGeometría	{radius}
BoxGeometry	{width, height, depth}
PlaneGeometry	{width, height}
CápsulaGeometría	{radius, height}
ConoGeometría	{radius, height}
CilindroGeometría	{radius, height}
PoliedroGeometría	{radius}
CircleGeometry	{radius}
RingGeometry	{innerRadius, outerRadius}

Añadir una primitiva

Se puede añadir un Modelo 3D a la entidad a través de la interfaz de Studio mediante el componente Malla, o en código. Añadirlos en Studio se hace a través del botón (+) en la Jerarquía o añadiendo geometría a un Componente Personalizado en la entidad.

Ejemplo

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

Componente GLTF

Formatos admitidos

GLTF y GLB

Los modelos GLTF y GLB son compatibles y resultan ideales cuando se trabaja con 3D en la web.

FBX

Sin embargo, 8th Wall Studio requiere que los modelos se conviertan a GLB después de cargarlos. Asegúrate de que las texturas están incrustadas en el archivo FBX antes de convertirlo a GLB.

Establecer un modelo

El siguiente ejemplo muestra cómo establecer un GLTF o GLB en una entidad en tiempo de ejecución.

información

Este método requiere que seleccione su modelo personalizado de las propiedades del componente, una vez que el componente se aplica a su entidad

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

Configuración de las propiedades del modelo

Propiedades del modelo

Ver propiedades aquí.

Ejemplo

El siguiente ejemplo muestra cómo establecer un Modelo en una entidad en tiempo de ejecución.

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