从A-Frame或JS更新Collada（.dae）文件代码

Question

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

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

这是Collada文件： box.dae

Answer 1

A-Frame的内置组件仅支持非常基本的替代（您可以使用例如material="color: red"来设置模型的material="color: red" ，我不确定）。 对于更高级的内容，您将需要使用A-Frame本身使用的THREE.js API。 我建议您浏览THREE.js文档-有关如何自定义Material和Geometry实例的详细信息-但这里有一个非常基本的示例：

 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>

三， 材料文件： 材料

有关使单个顶点变形的更复杂的示例，请参见<a-ocean/> 。

---

当然，如果要进行任何认真的手动编辑，则将要使用Blender，Maya或其他3D建模程序。 :)