我在 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
最佳答案
A-Frame 的内置组件仅支持非常基本的覆盖(您可能可以使用例如 material="color: red"
设置模型的颜色,我不确定)。对于更高级的内容,您将需要使用 A-Frame 本身使用的 THREE.js API。我建议您查看 THREE.js 文档 - 其中有很多关于如何自定义 Material 和几何实例的详细信息 - 但这里有一个非常基本的示例:
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 建模程序。 :)
关于javascript - 从 A-Frame 或 JS 更新 Collada (.dae ) 文件代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40585192/