【发布时间】：2019-05-09 21:48:48
【问题描述】：
我用 OBJLoader 加载了一个对象。我想使用带有纹理的着色器材质。我将纹理传递给材质的制服参数。 我将 UV 变量从顶点着色器传递到片段着色器。
但是当我使用 uv 坐标来映射我的纹理时，我总是得到 0,0，或者至少它看起来是这样的。整个对象用纹理左下角的像素着色。
这是我的着色器：
<script type='x-shader/x-vertex' id='vertex-shader'>
uniform float u_time;
varying vec2 vUv;
void main() {
vUv = uv;
vec4 pos = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
gl_Position = pos;
}
</script>
<script type='x-shader/x-fragment' id='fragment-shader'>
precision highp float;
uniform float u_time;
uniform vec2 u_resolution;
uniform sampler2D texture;
varying vec2 vUv;
void main(){
vec2 st = vUv;
vec4 tex = texture2D(texture, st);
gl_FragColor = tex;
}
</script>
这是我加载对象和分配材质的方式
var loader = new THREE.OBJLoader();
loader.load(
'assets/standing.obj',
function (object){
main.man = object;
main.man.position.set(0,-600,400);
main.texture = new THREE.TextureLoader().load( 'assets/na_00004c.jpg' );
main.texture_needsUpdate = true;
var uniforms = {
u_time:{type:'f', value:0.0},
u_mouse:{type:'v2', value: new THREE.Vector2()},
u_resolution: {type: 'v2', value: {x:2048.,y:1024.}},
texture: {type: 't', value: main.texture}
}
main.material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent,
transparent: true
});
main.material.needsUpdate = true;
main.material.side = THREE.DoubleSide;
main.man.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material = main.material;
child.material.needsUpdate = true;
child.geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
child.geometry.computeVertexNormals();
child.geometry.elementsNeedUpdate = true;
child.geometry.mergeVertices();
child.verticesNeedUpdate = true;
child.normalsNeedUpdate = true;
child.uvsNeedUpdate = true;
child.material.flatShading = THREE.SmoothShading;
}
});
main.scene.add(main.man);
},
function (xhr){
console.log((xhr.loaded/xhr.total*100)+'% loaded');
},
function (error){
console.log(error,'An error happened');
}
);
这里有完整的例子 http://cmt.re/dev/na/
这是我想用作纹理的图像 http://cmt.re/dev/na/assets/na_00004c.jpg
有人知道为什么会这样吗？
非常感谢。
【问题讨论】：
-
物体是否还有纹理坐标？
-
如何查看？
-
Wavefront OBJ 文件（.obj 文件）是一个文本文件。它有
vt条目吗？ -
我用一个简单的模型测试了你的代码，它对我来说很好用。使用类似以下问题之一的简单模型：
Map not applying to loaded Obj，来测试您的代码。 -
没有。它没有。谢谢。
标签： three.js webgl fragment-shader vertex-shader uv-mapping