从A-Frame或JS更新Collada（.dae）文件代码 [英] Update Collada (.dae ) file code from A-Frame or JS

问题描述

我在A-Frame中加载collada（.dae）文件。它的装载很好。但现在我必须从用户输入更新该文件，如颜色等。如何更新.dae文件中的代码从html，js或A-Frame

这是Loaded A Frame代码：

 < a-scene> 
< a-assets> 
< a-asset-item id =boxsrc =box.dae>< / a-asset-item> 
< / a-assets> 
< a-entity id =colladacollada-model =＃box>< / a-entity> 
< a-entity id =cmrposition =0 1 5rotation =0 0 0> 
< a-camera> 
< a-cursor color =＃2E3A87> 
< / a-camera> 
< / a-entity> 
< / a-scene> 
  

那么我如何从用户端更新.dae文件中的代码，使用html，js， A-Frame或任何？

这是Collada文件： box.dae

解决方案

A-Frame的内置组件只支持非常基本的覆盖能够使用例如 material =color：red来设置模型的颜色，我不确定）。对于任何更高级的内容，您都需要使用A-Frame自身使用的THREE.js API。我建议您浏览一下THREE.js文档 - 关于如何自定义材质和几何实例的详细信息 - 这里是一个非常基本的例子：

  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）{
 //修改o.material或o .geometry here。
} 
}）; 
}）; 
} 
}）; 
  

用法：

 < a-entity collada-model =...model-overrider> < / A-实体GT; 
  

THREE.Material的文档： https://threejs.org/docs/index.html?q=material#Reference/Materials/Material

有关更复杂的示例，请参阅 < a-ocean /> 。

---

当然，如果您想进行任何严肃的手动编辑，您将需要使用Blender，Maya或其他3D建模程序。 ：）

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

解决方案

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

这篇关于从A-Frame或JS更新Collada（.dae）文件代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！