Sunil gauswami Sunil gauswami - 17 days ago 7
HTML Question

Update Collada (.dae ) file code from A-Frame or JS

I load collada (.dae) file in A-Frame. Its loaded fine. But now i have to update that file from user input like color, etc.. How to update the code inside the .dae file from html, js or A-Frame

This is the Loaded A Frame code :

<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 How can i Update the code inside the .dae file from user end, using html, js, A-Frame or any?

This is Collada File : box.dae

Answer

A-Frame's builtin components only support very basic overrides (you might be able to set the color of a model using e.g. material="color: red", I'm not sure). For anything more advanced, you will need to use the THREE.js APIs that A-Frame itself uses. I'd recommend looking through the THREE.js documentation — there's a lot of detail about how to customize Material and Geometry instances — but a very basic example here:

 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.
         }
       });
     });
   }
 });

Usage:

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

Documentation for THREE.Material: https://threejs.org/docs/index.html?q=material#Reference/Materials/Material

For a more complicated example, deforming individual vertices, see <a-ocean/>.


And of course, if you want to do any serious manual editing, you will want to be using Blender, Maya, or another 3D modeling program instead. :)

Comments