Update Collada (.dae) Datei-Code von A-Frame oder JS

Question

Ich lade Collada (. Dae) Datei in A-Frame. Es ist gut geladen. Aber jetzt muss ich diese Datei aktualisieren aus Benutzereingaben wie Farbe, etc .. Wie Sie den Code in der Datei .dae von html aktualisieren, js oder A-Frame

Dies ist die A Frame Code geladen wird:

<a-scene> 
    <a-assets> 
     <a-asset-item id="box" src="box.dae"></a-asset-item> 
    </a-assets> 
    <a-entity id="collada" collada-model="#box"></a-entity> 
     <a-entity id="cmr" position="0 1 5" rotation="0 0 0"> 
     <a-camera> 
      <a-cursor color="#2E3A87" > 
     </a-camera> 
     </a-entity> 
</a-scene> 

So wie kann ich den Code in der .dae-Datei vom Benutzerende aktualisieren, mit HTML, Js, A-Frame oder anderen?

Dies ist Collada Datei: box.dae

Answer 1

A-Frame der eingebauten Komponenten nur sehr grundlegende Überschreibungen unterstützen (Sie können die Farbe eines Modells setzen beispielsweise unter Verwendung material="color: red" der Lage sein, ich bin nicht sicher). Für etwas Fortgeschritteneres müssen Sie die THREE.js-APIs verwenden, die A-Frame selbst verwendet. Ich würde empfehlen, durch die Three.js Dokumentation suchen - es gibt viele Details darüber, wie Material und Geometrie Instanzen anpassen - aber ein sehr einfaches Beispiel hier:

AFRAME.registerComponent('model-overrider', { 
    init: function() { 
    this.el.addEventListener('model-loaded', function(e) { 
     var model = e.detail.model; 
     model.traverse(function(o) { 
     if (o instanceof THREE.Mesh) { 
      // modify o.material or o.geometry here. 
     } 
     }); 
    }); 
    } 
}); 

Verbrauch:

<a-entity collada-model="..." model-overrider> </a-entity> 

Dokumentation für THREE.Material:

Für ein komplizierteres Beispiel, Verformen einzelner Scheitelpunkte, siehe .

---

Und natürlich, wenn Sie eine ernsthafte manuelle Bearbeitung tun wollen, sollten Sie stattdessen Blender, Maya oder eine andere 3D-Modellierungsprogramm zu verwenden. :)