Modèles
Introduction
Studio comprend plusieurs primitives intégrées, telles que des sphères, des boîtes et des plans, qui peuvent être rapidement personnalisées et positionnées dans l'éditeur. Pour les conceptions plus complexes, Studio prend en charge les modèles 3D externes aux formats GLTF/GLB, idéaux pour le contenu 3D sur le web, et les fichiers FBX, qui peuvent être convertis en GLB après le téléchargement. Cette configuration permet d'utiliser une large gamme d'éléments 3D, qu'il s'agisse de créer des scènes virtuelles épurées ou très détaillées.
Primitives
Les primitives intégrées suivantes sont disponibles :
Type | Attributs |
---|---|
SphereGeometry | {radius} |
BoxGeometry | {width, height, depth} |
PlaneGeometry | {width, height} |
CapsuleGéométrie | {radius, height} |
ConeGeometry | {radius, height} |
CylinderGeometry | {radius, height} |
PolyhedronGeometry | {radius} |
CercleGéométrie | {radius} |
RingGeometry | {innerRadius, outerRadius} |
Ajouter une primitive
Un modèle 3D peut être ajouté à l'entité via l'interface Studio, par l'intermédiaire du composant Mesh, ou dans le code. Leur ajout dans Studio s'effectue via le bouton (+) de la hiérarchie ou en ajoutant la géométrie à un composant personnalisé sur l'entité.
Exemple
ecs.SphereGeometry.set(world, eid, {radius: 5})
Composante GLTF
Formats pris en charge
GLTF et GLB
Les modèles GLTF et GLB sont pris en charge et sont idéaux pour travailler en 3D sur le web.
FBX
Le téléchargement FBX est pris en charge, mais Niantic Studio exige que les modèles soient convertis en GLB après le téléchargement. **Assurez-vous que les textures sont intégrées dans le fichier FBX avant de le convertir en GLB.
Établissement d'un modèle
L'exemple suivant montre comment définir un GLTF ou un GLB sur une entité au moment de l'exécution.
Cette méthode exige que vous sélectionniez votre modèle personnalisé dans les propriétés du composant, une fois que le composant est appliqué à votre entité.
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,
})
}
})
Définition des propriétés du modèle
Propriétés du modèle
Voir les propriétés ici.
Exemple
L'exemple suivant montre comment définir un modèle sur une entité au moment de l'exécution.
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,
})
}
})
Définition des propriétés des matériaux
Les matériaux peuvent être configurés soit par le biais du code, soit directement dans le composant Mesh de l'éditeur.
Types de matériaux
Matériau
Un matériau standard PBR.
Non éclairéMatériel
Le matériau n'est pas affecté par l'éclairage ou les ombres.
Matériau d'ombre
Matériau qui ne réagit qu'aux ombres.
HiderMaterial
Matériau spécialisé qui cache les objets situés derrière lui.
Propriétés des matériaux
Voir les propriétés ici.
Exemple
L'exemple suivant montre comment définir un matériau sur une entité au moment de l'exécution.
// Réglage du matériau standard
ecs.Material.set(world, component.eid, {r : 255, g : 0, b : 100, roughness : 1})
// Réglage du matériau de l'ombre
ecs.ShadowMaterial.set(world, component.eid, {r: 255, g: 0, b: 100})