three.js:在着色器材质中使用纹理,该材质添加到由对象加载器加载的对象中

three.js: use texture in shader material added to object loaded by object loader

本文关键字:对象 加载 添加 js three 纹理      更新时间:2023-09-26

当我试图在对象加载器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创建的对象的着色器材质中使用纹理的正确方法是什么。当我将此着色器应用于其他对象时,它的工作方式与应该的完全相同。请提前回答。

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

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