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

Question

我在 A-Frame 中加载 collada (.dae) 文件。它装得很好。但现在我必须根据颜色等用户输入更新该文件。如何从 html、js 或 A-Frame

更新 .dae 文件内的代码

这是加载的框架代码：

<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

Answer 1

A-Frame 的内置组件仅支持非常基本的覆盖（您也许可以使用 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>

THREE.Material 的文档：Material

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

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

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

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

html

javascript

collada

three.js

aframe