0

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

Sunil gauswami
  • 3
  • 3

1 Answers1

1

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: 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. :)

xxx
  • 1,153
  • 1
  • 11
  • 23
Don McCurdy
  • 10,975
  • 2
  • 37
  • 75
  • Can we change a .dae file component like color. This is the code in dae file. ` 0 0.64 0.64 1 ` . So we can change or update this code using this code? – Sunil gauswami Nov 15 '16 at 05:22
  • @Sunilgauswami yes, as shown in the code above you can get `o.material`, and then set `o.material.color`. Example: http://stackoverflow.com/questions/12564156/three-js-change-material-on-runtime – Don McCurdy Nov 15 '16 at 17:01
  • if we want to change some other properties of the dae model like hair color, cloths, body size, weight, and etc then how we can do that. all properties of dae file. This is the dae file : [body.dae](https://drive.google.com/open?id=0B4zkSgVE4wsAYWl5dTZVVXpUbEU). – Sunil gauswami Nov 16 '16 at 06:12
  • We have to do something like this thing [**Link**](https://threejs.org/examples/#webgl_morphtargets_human) using A-Frame. how we will do that using A-Frame ? – Sunil gauswami Nov 16 '16 at 11:34
  • You would use the `traverse()` method shown above to go through all parts of the model, and check `o.name` to see which part it is. You can then use THREE.js APIs to change colors, scale, and so on. This will involve a non-trivial amount of THREE.js code, so it's not something I can write for you in Stack Overflow. IMO, in your position I would probably prefer to do these customizations in Blender unless you 100% must have the model be edited live within the browser. – Don McCurdy Nov 16 '16 at 18:19
  • Thank you for your response. Now i get idea about this things. But we are developing website so there we need customization in browser we can not use blender in website. Because our plan is generate 3D model using user input and requirements. – Sunil gauswami Nov 17 '16 at 05:28