Three.js-顶点着色器UV变量仅返回0,0

我用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>

这里有一个完整的例子

这是我想用作纹理的图像

有人知道为什么会这样吗

---

非常感谢。

您的代码工作正常，但您的

*.obj

文件不包含任何纹理坐标。文件（.obj文件）是一个文本文件，纹理坐标是带有键

vt

的条目，如果缺少这些条目，则网格没有任何纹理坐标

您的代码运行良好，请参见示例，其中我将您的原始代码用于一个简单的模型：

var main=新函数（）{
this.init=函数（）{
这个.init三（）；
}
this.initThree=函数（）{
main.scene=new THREE.scene（）；
main.scene.background=新的三种颜色（0xCCCC）；
var aspectRatio=window.innerWidth/window.innerHeight；
main.camera=新的三视角相机（75，aspectRatio，0.11000）；
//main.camera.position.set（-40,0512）；
主摄像机位置设置（1,2,0）；
main.renderer=new THREE.WebGLRenderer（{antialas:true}）；
main.renderer.setPixelRatio（window.devicePixelRatio）；
main.renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（main.renderer.doElement）；
main.controls=新的三个轨道控件（main.camera、main.renderer.doElement）；
main.controls.enableDamping=真；
main.controls.dampingFactor=0.1；
main.controls.screenSpacePanning=false；
var helper=new THREE.GridHelper（2000100）；
helper.material.opacity=0.25；
helper.material.transparent=true；
main.scene.add（helper）；
var axis=新的三个.AxesHelper（）；
main.scene.add（轴）；
makeTextFile=函数（文本）{
var data=newblob（[text]，{type:'text/plain'}）；
var textFile=window.URL.createObjectURL（数据）；
返回文本文件；
}
var textbox_obj=document.getElementById（'plane_obj'）；
var obj_url=makeTextFile（textbox_obj.value）；
var loader=new THREE.OBJLoader（）；
装载机(
obj_url，
功能（对象）{
main.man=对象；
//主.人.位.组（0，-600400）；
主.人.位.集（0,0,0）；
main.texture=new THREE.TextureLoader（）.load（'https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/Gominolas.png' );
main.texture_needsUpdate=true；
变量={
u_时间：{类型：'f'，值：0.0}，
鼠标：{type:'v2'，value:new THREE.Vector2（）}，
u_分辨率：{type:'v2'，值：{x:2048,y:1024.}，
纹理：{type:'t'，value:main.texture}
}
main.material=新的三个.ShaderMaterial（{
制服：制服，
vertexShader:document.getElementById（'vertex-shader'）.textContent，
fragmentShader:document.getElementById（'fragment-shader'）.textContent，
透明：正确
});
main.material.needsUpdate=true；
main.material.side=3.DoubleSide；
//main.material=新的三个.MeshNormalMaterial（）；
main.man.transverse（函数（子函数）{
if（三个.Mesh的子实例）{
child.material=main.material；
child.material.needsUpdate=true；
child.geometry=新的三个.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=3.SmoothShading；
} 
});
main.scene.add（main.man）；
},
函数（xhr）{
log（（xhr.loaded/xhr.total*100）+'%loaded'）；
},
函数（错误）{
log（错误，“发生错误”）；
}
);
window.onresize=main.onresize；
这个。render（）；
}
this.render=函数（）{
var time=Date.now（）；
main.controls.update（）；
requestAnimationFrame（main.render）；
main.renderer.render（main.scene，main.camera）；
}
this.onResize=函数（事件）{
main.renderer.setSize（window.innerWidth、window.innerHeight）；
main.camera.aspect=window.innerWidth/window.innerHeight；
main.camera.updateProjectMatrix（）；
}
}
main.init（）

v-1.0000000.0000001.000000
v 1.0000000.0000001.000000
v-1.0000000.000000-1.000000
v 1.0000000.000000-1.000000
瓦特0.0000000.000000
1.0000000.000000瓦特
瓦特0.000000 1.000000
1.0000001.000000瓦特
越南盾0.0000 1.0000 0.0000
f 1/1/12/2/14/4/13/3/1
均匀浮动u_时间；
可变vec2 vUv；
void main（）{
vUv=紫外线；
vec4 pos=投影矩阵*modelViewMatrix*vec4（位置，1.0）；
gl_位置=位置；
}
高精度浮点；
均匀浮动u_时间；
均匀vec2u_分辨率；
二维纹理均匀；
可变vec2 vUv；
void main（）{
vec2st=vUv；
vec4 tex=纹理2d（纹理，st）；
gl_FragColor=tex；
}
对象是否有纹理坐标？如何检查？文件（.obj文件）是文本文件。它有
vt
条目吗？我用一个简单的模型测试了你的代码，它对我来说很好。使用一个简单的模型来测试你的代码，就像这个问题中的一个：。否。它没有。感谢
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');
    }
);