三.js：在着色器材质中使用纹理添加到由对象加载器加载的对象答案

【问题标题】：three.js: use texture in shader material added to object loaded by object loader三.js：在着色器材质中使用纹理添加到由对象加载器加载的对象
【发布时间】：2016-03-25 04:32:50
【问题描述】：

当我尝试在由对象加载器 THREE.OBJLoader 加载的搅拌器对象中使用的着色器材质中使用纹理时遇到问题。

这个简单的代码运行良好，它正在加载纹理并将其应用于加载的对象。

    var manager = new THREE.LoadingManager();
    var texture = new THREE.Texture();
    var imageLoader = new THREE.ImageLoader(manager);
    var objLoader = new THREE.OBJLoader(manager);

    imageLoader.load("texture.png", function (image) {
       texture.image = image;
       texture.needsUpdate = true;
    });
    var material = new THREE.MeshBasicMaterial({ map: texture});
    objLoader.load("blenderObject.obj", function (object) {
       object.traverse(function (child) {
       if (child instanceof THREE.Mesh) {
          child.material = material;
       }    
    });                
    scene.add(object);

但我想使用我的ShaderMaterial 而不是MeshBasicMaterial。此着色器材质适用于我在项目中使用的其他对象。这是我的着色器材质的初始化：

        var uniforms = {
          texture: { type: "t", value: THREE.ImageUtils.loadTexture("texture.png") },                 
        }

        var shader = THREE.ShaderLib["shader"];

        var material = new THREE.ShaderMaterial({
            uniforms: uniforms,
            vertexShader: shader.vertexShader,
            fragmentShader: shader.fragmentShader,
            depthTest: true,    
        });

所以当我使用这种材料而不是MeshBasicMaterial 时，我没有错误，但对象只是全黑。我想知道在着色器材质中使用由THREE.OBJLoader 创建的对象的纹理的正确方法是什么。当我将此着色器应用于其他对象时，它的工作方式与它应该完全一样。提前谢谢任何答案。

【问题讨论】：

标签： javascript three.js shader

【解决方案1】：

所有纹理都是一样的。创建对象的方式没有区别。

您的代码的问题在于，当您分配uniforms 变量时，您的纹理值将为空，因为THREE.ImageUtils.loadTexture() 是异步的。使用THREE.TextureLoader() 的正确方法记录在：http://threejs.org/docs/#Reference/Loaders/TextureLoader

【讨论】：

嗨，谢谢你的回答，加载纹理在我使用它的方式上效果很好，至少在我使用的对象上，但THREE.TextureLoader() 是更好的方式，因为现在我绝对可以肯定一切都会好起来的。看来我的问题中的问题是由我的着色器造成的，我设计它作为一个顶点与一个纹理一起工作，这就是为什么它没有为整个对象正确加载纹理。