无法在 A-Frame/THREE.js 中的对象上设置着色器答案

【问题标题】：Cannot set shader on object in A-Frame/THREE.js无法在 A-Frame/THREE.js 中的对象上设置着色器
【发布时间】：2021-07-07 06:32:58
【问题描述】：

我正在尝试创建一个着色器，为了对其进行测试，我正在尝试使用以下代码将其分配给加载时的对象

AFRAME.registerShader('my-simple-shader', {
    schema: {
        color: {type: 'color', is: 'uniform', default: 'red'}
    },
    raw: false,
    fragmentShader: `
        uniform vec3 color;

        void main(){
            gl_FragColor = vec4(color, 1.0);
        }
    `
});

AFRAME.registerSystem('shader-preview-loader', {
    init: function(){
        this.el.sceneEl.addEventListener("scene-loaded", ()=>{
            let perry = document.querySelector('.perry-the-planeglb');
            perry.setAttribute('material', {shader: 'my-simple-shader'});
        })
    }
})

scene-loaded 事件是自定义的并且工作正常，它只是确保在对场景对象执行任何操作之前加载场景对象。

我是 Aframe 的新手，文档告诉您将其添加到 HTML 标记中，但我使用的是 Mozilla Hubs，所以这不是一个真正的选择。

有谁知道通过 Javascript 分配新着色器材质的正确方法

【问题讨论】：

我建议与glitch.com/~aframe分享完整的可运行代码，这样对你有帮助会容易得多。
它实际上是 Mozilla Hubs 源代码，包含我公司的数百行自定义修改代码。我是一名 3D 艺术家，在编程方面非常有经验，想加入开发团队，但在 A-frame 方面我完全迷失了方向，因为我所做的一切似乎都崩溃了，而且文档也没有帮助跨度>
@zachThePerson 是原始对象还是加载的 3D 模型？
@zachThePerson 我建议永远不要在完整的项目代码库中调试此类问题。总是尝试minimize and isolate the issue

标签： javascript three.js aframe

【解决方案1】：

我认为你做的一切都是正确的，除了在线：

perry.setAttribute('material', {shader: 'my-simple-shader'});

您将对象作为参数传递，其中只接受字符串。

它的格式应该是： perry.setAttribute('material', 'shader: my-simple-shader');

还要确认着色器在初始化之前确实已注册。根据您的代码，应该是这样的，但只是为了验证。

https://aframe.io/docs/1.2.0/components/material.html#register-a-custom-shader-material

【讨论】：

我按照您的建议更改了代码，但没有任何效果。我如何检查它是否已注册？
仅供参考，将对象传递给 A-Frame 中的 setAttribute 应该可以工作。 aframe.io/docs/1.2.0/introduction/…