A-Frame .obj modèle affichant mais cassé

Total débutant à un cadre ici, ont été à travers les scènes de tutoriel et je suis maintenant en train de configurer ma première utilisation de modèles .obj. À l'aide d'un serveur distant, donnez l'impression que c'est une information importante.A-Frame .obj modèle affichant mais cassé

J'ai vu des questions sur les modèles qui n'apparaissent pas mais le mien est cassé et je ne sais pas par où commencer à le réparer.

C'est à quoi il ressemble dans les fenêtres constructeur 3D:

Et voici à quoi il ressemble dans mon projet (soutenu sur le plan rose pour le contraste):

Voici le code html:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Pokemon Stadium</title> 
    <link href="css/main.css" rel="stylesheet"> 
    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script> 
    <script src="js/main.js"></script> 
</head> 
<body> 


<!-- Scene --> 
<a-scene onLoad=""> 
    <!------------------------------------------------ Assets ---------------------------------------------------------> 
    <a-assets> 
     <a-asset-item id="stadium-obj" src="assets/models/stadium/Pokemon+Stadium.obj"></a-asset-item> 
     <a-asset-item id="stadium-mtl" src="assets/models/stadium/Pokemon+Stadium.mtl"></a-asset-item> 
     <a-asset-item id="ivy-obj" src="assets/models/ivysaur/Pokemon.obj"></a-asset-item> 
     <a-asset-item id="ivy-mtl" src="assets/models/ivysaur/Pokemon.mtl"></a-asset-item> 
    </a-assets> 


    <!------------------------------------------------- Scene ---------------------------------------------------------> 
    <!-- Skybox --> 
    <a-sky color="#279DF4"></a-sky> 


    <!-- Abyss --> 
    <a-plane scale="1000 1000" position="0 -10 0" color="#212121" rotation="-90 0 0" material="shader: flat"></a-plane> 


    <!-- Stadium --> 
    <a-entity obj-model="obj: #stadium-obj; mtl: #stadium-mtl" position="0 0 -30" scale="0.05 0.05 0.05" material="side: double"></a-entity> 

    <!-- Bulbasaur --> 
    <a-entity obj-model="obj: #ivy-obj; mtl: #ivy-mtl" position="15 10 0" scale="1 1 1" rotation="0 90 0"></a-entity> 


    <!-- Camera + cursor --> 
    <a-entity camera look-controls position="10 12 0" rotation="-23 -90 0"> 
     <a-cursor id="cursor" 
        animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" 
        animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" 
        event-set__1="_event: mouseenter; color: springgreen" 
        event-set__2="_event: mouseleave; color: black" 
        fuse="true" 
        raycaster="objects: .link"></a-cursor> 
    </a-entity> 
</a-scene> 
</body> 
</html>

Source

2017-05-10 JDorman

Vous devez probablement définir le type de côté du matériau sur THREE.DoubleSide. Avec A-Frame, vous devriez être en mesure de changer le type en utilisant l'attribut DOM suivant sur un AEntity: material="side: double". Si ce n'est pas le cas, vous devriez mettre à jour votre message avec un extrait de vos éléments de scène.

EDIT:

Comme le montre l'image, des parties de mon modèle sont rendus de manière incorrecte. Le modelloader dans THREEjs lit toutes les maillages dans un modèle et les lie à un objet groupé. Pour résoudre ce problème, vous devez définir le côté du matériau des maillages sur DoubleSided. Heureusement dans A-Frame, le composant obj-model émet un événement lorsque le modèle a été chargé avec succès, nous ajoutons un écouteur pour l'événement émis model-loaded sur l'élément DOM et ajoutons un rappel qui renvoie un customevent. Le customevent envoie une référence au groupe de modèles. Requête pour l'AEntity, j'ai ajouté un identifiant modelEl au mien. Après l'exécution du script ci-dessus, mon modèle et une partie du chargement de la texture ont été corrigés. Quelque chose à considérer serait de creuser dans la création de composants personnalisés et de modifier ou d'étendre le composant obj-modèle pour éviter d'avoir à interroger pour chaque modèle qui pourrait avoir le même problème. Si rien de tout cela ne fonctionnait, je crois que quelque chose pourrait mal se passer avec vos paramètres d'exportation d'obj wavefront.

EDIT2:

En ce qui concerne mon commentaire, voici un résultat du fichier obj fixe A-Frame:

Pour des raisons de commodité, vous pouvez trouver le MTL et le fichier OBJ ici:

obj file

mtl file

Source

2017-05-10 13:06:56

Merci pour la réponse Shane, que n'a pas fonctionné donc j'ai mis en place le html – JDorman

@JDorman Ah désolé, j'ai précipité cette réponse dans le train.Vous devrez peut-être définir le type de côté du matériau sur les mailles ** enfant **. Si vous êtes nouveau à THREEjs, cela peut être déroutant au début. Le modelloader encapsule toutes les mailles dans un élément de groupe. Ce groupe est utilisé pour stocker toutes les maillages d'un modèle. J'ai mis à jour mon exemple ci-dessus. THREEjs est le framework webgl utilisé par A-Frame. –

Cela a l'air génial, je vais essayer demain! Merci beaucoup! – JDorman

A-Frame .obj modèle affichant mais cassé

Répondre

Questions connexes