从 A-Frame 或 JS 更新 Collada (.dae) 文件代码

Posted 2023-03-23

【中文标题】从 A-Frame 或 JS 更新 Collada (.dae) 文件代码

【英文标题】：Update Collada (.dae ) file code from A-Frame or JS

【发布时间】：2017-03-27 21:08:07

【问题描述】：

我在 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 文件：box.dae

【参考方案1】：

A-Frame 的内置组件仅支持非常基本的覆盖（您可能可以使用例如material="color: red" 设置模型的颜色，我不确定）。对于更高级的内容，您将需要使用 A-Frame 本身使用的三个.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>

THREE.Material 的文档：Material

对于更复杂的示例，使单个顶点变形，请参阅<a-ocean/>。

---

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

【讨论】：

我们可以更改 .dae 文件组件，例如颜色。这是 dae 文件中的代码。 <diffuse> <color sid="diffuse">0 0.64 0.64 1</color> </diffuse> 。那么我们可以使用这段代码来更改或更新这段代码吗？

@Sunilgauswami 是的，如上代码所示可以得到o.material，然后设置o.material.color。示例：***.com/questions/12564156/…

如果我们想改变 dae 模型的一些其他属性，比如头发颜色、衣服、体型、体重等，那么我们应该怎么做。 dae 文件的所有属性。这是 dae 文件：body.dae.

我们必须使用 A-Frame 做类似 Link 的事情。我们将如何使用 A-Frame 来做到这一点？

您将使用上面显示的traverse() 方法遍历模型的所有部分，并检查o.name 以查看它是哪个部分。然后，您可以使用 THREE.js API 来更改颜色、比例等。这将涉及大量的 THREE.js 代码，因此我无法在 Stack Overflow 中为您编写。 IMO，在您的位置上，我可能更愿意在 Blender 中进行这些自定义，除非您 100% 必须在浏览器中实时编辑模型。