Javascript 传递属性变量：黑屏

我试图将一个带有3.js的属性变量传递给顶点着色器，然后顶点着色器应该通过

variable

变量将其传递给片段着色器

顶点着色器：

attribute vec4 color;
varying vec4 outColor;

void main() 
{
    outColor= color;
    gl_Position= projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

varying vec4 outColor;

void main() {
    gl_FragColor = outColor;
}

片段着色器：

attribute vec4 color;
varying vec4 outColor;

void main() 
{
    outColor= color;
    gl_Position= projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

varying vec4 outColor;

void main() {
    gl_FragColor = outColor;
}

这样，我有8个顶点的立方体：如果每个顶点都有不同的颜色，那么立方体应该通过插值每个顶点的颜色来绘制，而在中间的脸上应该有一个混合的颜色。这是我初始化属性的javascript代码段：

var colors= [];
for(var i=0; i<geometry.vertices.length; i++) {
    colors.push(new THREE.Vector4(0.0,1.0,0.0,1.0));
}

var attributes = {
    color: {type:"v4", value: colors}
};

var material= new THREE.ShaderMaterial({
    uniforms: uniforms,
    attributes: {},
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent
});

var colors=[]；
对于（var i=0；i尝试将
属性
而不是
{}
传递给
THREE.ShaderMaterial
构造函数。
这确实是个问题。另外，outColor或color可能是预定义的变量，因此我必须更改变量名。