更新Collada(.从A-Frame或JS中获取文件代码

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

本文关键字：获取 文件 代码 JS Collada A-Frame 更新      更新时间：2023-09-26

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

这是加载的A帧代码:

<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>

那么我如何从用户端更新。dae文件内的代码，使用html, js, A-Frame或任何?

这是Collada File: 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) {
           // modify o.material or o.geometry here.
         }
       });
     });
   }
 });

用法:

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

3的文档。材料:材料

对于一个更复杂的例子，变形单个顶点，参见<a-ocean/>。

当然，如果你想做任何严肃的手工编辑，你会想要使用Blender, Maya或其他3D建模程序代替。:)

相关文章：