Question

我正在尝试为a框架编写一个向模型的“侧面”添加不同材质的组件。因此，将geometry和groups设置为允许在不同侧面具有不同属性的不同材料。

我希望组件的用户能够在每种材料可以使用一种材料的范围内操纵每种材料的所有属性（即，可以声明性地更改所有默认属性，并能够在检查器中进行调整）等）

考虑到我希望所有材质都像默认材质一样工作，而不是通过重写材质组件的所有逻辑来重新发明轮子（例如，弄清楚“ src”是用于图像还是视频）纹理和相应的行为等。）我想知道是否可以将默认material组件的多个实例作为我的组件的一部分。

可以理解，这似乎是不可能的，因为我希望能够在一个框架中添加多个组件（通过在组件名称后附加带有双下划线的ID）。

例如，如果我将此写为我的init函数的一部分；

AFRAME.registerComponent('multimaterial', {

    init: function(){

        this.el.setAttribute('material__one', '')
        this.el.setAttribute('material__two', '')

    },

})

我收到以下错误

Uncaught (in promise) Error: Trying to initialize multiple components of type `material`. There can only be one component of this type per entity.

我想我能理解为什么为什么要在现成的几何/材料组合之外进行定义，但是有一种方法可以将材料组件设置为“ multiple：true”，然后在我的组件中使用它？

还是我需要分支那部分代码？如果是这样，那么在上述用例的情况下，谁能向我解释最简单的方法，那么似乎在代码的不同部分中定义了物料组件（我的意思是说，存在一个核心组件{{1} }会拉出单独的material等。

任何建议都值得赞赏。

Answer 1

material组件只是在给定的几何图形上设置了THREE.MeshBasicMaterial。

如果需要更多，则需要深入研究THREE.js-您可以制作一系列材料，然后在自定义组件中将其应用于几何体：

var materials = [new THREE.MeshBasicMaterial({
    color: 0xFF0000
}), new THREE.MeshBasicMaterial({
    color: 0x00FF00
})]

this.el.getObject3D('mesh').material = materials;

查看实际情况here。

如果您想检查您正在处理的是哪种来源，src/utils/src-loader.js具有简洁的功能，可以帮助您检查来源是视频还是图像：

validateSrc(src, loadImageCallback, loadVideoCallback)

有什么方法可以在框架中向实体添加多个材料成分？

1 个答案: