我无法将纹理加载到我的着色器材质,只有我看到的只是黑点。这是我的shader.js
THREE.ShaderLib['cloud'] = {
uniforms: {
texture: { type: "t", value: THREE.ImageUtils.loadTexture("img/cloud.png") }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_PointSize = 8.0;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
"}",
].join("\n"),
fragmentShader: [
"varying vec2 vUv;",
"uniform sampler2D texture;",
"void main() {",
"gl_FragColor = texture2D(texture, vUv);",
"}",
].join("\n")
};
这就是我尝试加载和使用它的方式:
var cloudShader = THREE.ShaderLib["cloud"];
var uniforms = THREE.UniformsUtils.clone(cloudShader.uniforms);
var texture = THREE.ImageUtils.loadTexture("img/cloud.png", undefined, function () {
uniforms.texture.value = texture;
texture.needsUpdate = true;
var _material = new THREE.ShaderMaterial({
fragmentShader: cloudShader.fragmentShader,
vertexShader: cloudShader.vertexShader,
uniforms: uniforms
});
_material.uniforms.texture.value.needsUpdate = true;
var _geometry = new THREE.Geometry();
_geometry.vertices.push(new THREE.Vector3(0, 0, 0));
var _mesh = new THREE.Points(_geometry, _material);
scene.add(_mesh);
});
正如您所看到的,我正在尝试在创建材质之前和之后设置两次更新纹理值。这是一个非常简单的例子,但我不知道它为什么不能以我使用它的方式工作。调试控制台中没有错误。
我正在使用THREE.Points类,因为我用它来生成云作为粒子组。
提前感谢您的帮助。
答案 0 :(得分:2)
所以,过了一段时间后,我找到了解决这个特定问题的方法。我需要将我的制服从shader.js直接移动到我正在创建着色器材料的地方。这足以解决我的纹理问题,但我仍然不知道为什么以前的代码不起作用。工作着色器材质如下所示:
var _material = new THREE.ShaderMaterial({
fragmentShader: cloudShader.fragmentShader,
vertexShader: cloudShader.vertexShader,
uniforms: uniforms: {
texture: { type: "t", value: THREE.ImageUtils.loadTexture("img/cloud.png") }
},
});