1
使用three.js r71。我无法弄清楚为什么我的纹理没有被ShaderMaterial读取。这架飞机是黑色的。我需要一双新鲜的眼睛来帮助我找出错误。ThreeJS ShaderMaterial Texture Issue
非常感谢！
这里的HTML：
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="three.min.js"></script>
<script src="testshdr.js"></script>
</head>
<body>
<!-- Shaders -->
<script id="vertexShader"
type="x-shader/x-vertex" >
varying vec2 vUv;
void main(){
vUv = uv;
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position, 1.0);
}
</script>
<script name="no_effect"
id="fragmentShader_0"
type="x-shader/x-fragment" >
varying vec2 vUv;
uniform sampler2D editImg;
void main(){
vec4 myTexture = texture2D(editImg, vUv);
gl_FragColor = vec4 (myTexture.r,
myTexture.g,
myTexture.b,
1.0);
}
</script>
<script type="text/javascript">
var tst = new TestShdr();
</script>
</body>
</html>而这里的JS：
var TestShdr = function() {
'use strict';
var
SCENE,
RENDERER,
CAMERA,
GEO,
MAT,
OBJ,
TEX,
UNIFS,
VS,
FS;
SCENE = new THREE.Scene();
RENDERER = new THREE.WebGLRenderer();
RENDERER.setSize(256, 256);
CAMERA = new THREE.PerspectiveCamera(56, 1, 0.1, 1000);
SCENE.add(CAMERA);
CAMERA.position.z = 5;
TEX = THREE.ImageUtils.loadTexture('1107.jpg');
UNIFS = {
editImg: { type: 't', value: TEX}
};
VS = $('#vertexShader').html();
FS = $('#fragmentShader_0').html();
GEO = new THREE.PlaneBufferGeometry(1, 1, 1, 1);
MAT = new THREE.ShaderMaterial({uniforms: UNIFS,
vertexShader: VS,
fragmentShader: FS
});
OBJ = new THREE.Mesh(GEO, MAT);
SCENE.add(OBJ);
document.body.appendChild(RENDERER.domElement);
RENDERER.render(SCENE, CAMERA);
};
那么你不等待纹理加载。纹理异步加载。在您上面提供您的代码时，它将不可用。 – gman