三J简单着色器无法正常工作

Question

我正在尝试使用three.js

运行以下简单着色器

mat = new THREE.ShaderMaterial({
  uniforms: {
    color: { type: 'v3', value: new THREE.Color(0xcccccc) }
  },
  vertexShader: 'attribute vec3 vert;\n'
              + 'void main() {\n' 
              + '  gl_Position = vec4(vert, 1.0);\n'
              + '}',
  fragmentShader: 'uniform vec3 color;\n'
                + 'void main() {\n'
                + '  gl_FragColor = vec4(color,1);\n'
                + '}'
})

着色器编译但具有此材质的对象不可见。

这应该以恒定的浅灰色显示对象。

当我使用kick.js shader editor运行时 它按预期工作。

预定义的材料都很有用。

我错过了什么吗？

Answer 1

你的顶点着色器应该是：

// Multiply each vertex by the model-view matrix and the projection matrix
// (both provided by Three.js) to get a final vertex position. 
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );