Three.js 凹凸贴图未更新答案

【问题标题】：Three.js bump map not updatingThree.js 凹凸贴图未更新
【发布时间】：2017-03-12 00:06:15
【问题描述】：

我有一个.obj 模型，并在我的场景中加载了相应的.mtl 文件。我在加载后对其应用bumpMap：

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.setPath('/models/');
        mtlLoader.load('model.mtl', function (materials) {
            materials.preload();

            // Load obj file
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath('/models/');
            objLoader.load('model.obj', function (group) {

                var geometry = group.children[0].geometry;
                geometry.center();

                model = new THREE.Mesh(geometry, otherMesh.material.clone());
                model.material.bumpMap = new THREE.ImageUtils.loadTexture('images/bump.png');
                model.name = "obj model";
                scene.add(model);

                render();
                callback();
            });
        });

这按预期工作。 map 纹理只是一个黑白的.png 图像。但是，如果我在添加模型之前应用bumpMap，则不会应用它。例如，使用此代码时，bumpMap 不会应用于模型：

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.setPath('/models/');
        mtlLoader.load('model.mtl', function (materials) {
            materials.preload();

            // Load obj file
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath('/models/');
            objLoader.load('model.obj', function (group) {

                var geometry = group.children[0].geometry;
                geometry.center();

                model = new THREE.Mesh(geometry, otherMesh.material.clone());
                setTimeout(function(){
                    model.material.bumpMap = new THREE.ImageUtils.loadTexture('images/bump.png');
                }, 0);

                model.name = "obj model";
                scene.add(model);

                render();
                callback();
            });
        });

只需添加一个超时，bumpMap 就不再适用了。在应用bumpMap 之后添加model.bumpMap.needsUpdate = true; 不会改变任何内容。

【问题讨论】：

标签： javascript three.js bump-mapping

【解决方案1】：

至少渲染一次材质后，添加以前不存在的纹理需要构建新的着色器程序。要强制这样做，您需要设置

mesh.material.needsUpdate = true;

请参阅three.js 文档How to Update Things。

three.js r.85

【讨论】：