Javascript triple.js中的置换贴图

我目前正在使用黑白图像作为模型的凹凸贴图。该模型是一个

.obj

文件，具有用于UV映射的关联

.mtl

文件。这是我使用的代码：

            // Load material file
            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;  
                    model = new THREE.Mesh(geometry, otherModel.material.clone());
                    scene.add(model);

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

稍后，我会在需要时添加凹凸贴图：

            model.material.bumpMap = new THREE.Texture(canvas);
            model.material.bumpScale = 0.8;
            model.material.bumpMap.format = THREE.RGBFormat;
            model.material.bumpMap.wrapS = mapRingModel.material.bumpMap.wrapT = THREE.RepeatWrapping;
            model.material.bumpMap.minFilter = THREE.LinearFilter;

            model.material.bumpMap.needsUpdate = true;
            model.material.needsUpdate = true;

这与预期一样有效，但现在我想将纹理用作置换贴图，而不是凹凸贴图，因此我将代码更改为：

            model.material.displacementMap = new THREE.Texture(canvas);
            model.material.displacementScale = 0.8;
            model.material.displacementMap.format = THREE.RGBFormat;
            model.material.displacementMap.wrapS = model.material.displacementMap.wrapT = THREE.RepeatWrapping;
            model.material.displacementMap.minFilter = THREE.LinearFilter;

            model.material.displacementMap.needsUpdate = true;
            model.material.needsUpdate = true;

---

应用相同的纹理时，根本不应用置换。是否需要更改UV贴图或纹理以用作凹凸贴图但使用置换？

我看不出您的代码有任何错误。你确定它不起作用吗？
尝试增大

displacementScale

的值
而凹凸比例是从0到1。置换比例可以是任何形式。。嗯……场景比例。
下面是两者结合使用画布作为纹理的示例（请在框中绘制以查看），单击“运行代码片段”

var摄影机、场景、渲染器、网格、材质、统计信息；
var drawStartPos={x:0，y:0}；
init（）；
设置画布绘制（）；
制作动画（）；
函数init（）{
//渲染器。
renderer=new THREE.WebGLRenderer（）；
//renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//将渲染器添加到页面
document.getElementById（'threejs-container'）.appendChild（renderer.doElement）；
//创建相机。
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=400；
//创建场景。
场景=新的三个。场景（）；
//创造材料
材质=新的三个。MeshPhongMaterial（）；
//创建立方体并添加到场景中。
var geometry=新的三个.BoxGeometry（20020020050）；
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
//创建环境光并添加到场景中。
var light=新的三个。环境光（0x404040）；//柔和的白光
场景。添加（灯光）；
//创建平行光并添加到场景中。
var方向灯=新的三个方向灯（0xffffff）；
directionalLight.position.set（1,1,1）.normalize（）；
场景。添加（方向光）；
//添加用于调整窗口大小的侦听器。
addEventListener（'resize'，onWindowResize，false）；
//向页面添加统计信息。
统计数据=新统计数据（）；
document.body.appendChild（stats.dom）；
}
函数设置CanvasDrawing（）{
//获取画布和上下文
var drawingCanvas=document.getElementById（'drawing-canvas'）；
var drawingCanvas2=document.getElementById（'drawing-canvas-2'）；
var drawingContext=drawingCanvas.getContext（'2d'）；
var drawingContext2=drawingCanvas2.getContext（'2d'）；
//绘制白色背景
drawingContext.fillStyle=“#FFFFFF”；
drawingContext.fillRect（0,0128128）；
drawingContext2.fillStyle=“#000000”；
drawingContext2.fillRect（0,0128128）；
//将画布设置为凹凸贴图
material.bumpMap=新的三点纹理（drawingCanvas）；
material.displacementMap=新的三个纹理（drawingCanvas2）；
材料.位移标度=30；
//设置变量以跟踪何时绘制
var-paint=false；
var paint2=假；
//添加画布事件侦听器
drawingCanvas.addEventListener（'mousedown'，函数（e）{
油漆=真
drawStartPos={x:e.offsetX，y:e.offsetY}；
});
drawingCanvas.addEventListener（'mousemove'，函数（e）{
如果（油漆）{
绘制（drawingContext，0，e.offsetX，e.offsetY）；
}
});
drawingCanvas.addEventListener（'mouseup'，函数（e）{
油漆=假；
});
drawingCanvas.addEventListener（'mouseleave'，函数（e）{
油漆=假；
});
drawingCanvas2.addEventListener（'mousedown'，函数（e）{
paint2=真
drawStartPos={x:e.offsetX，y:e.offsetY}；
});
drawingCanvas2.addEventListener（'mousemove'，函数（e）{
如有需要（2）{
draw（drawingContext2，1，e.offsetX，e.offsetY）；
}
});
drawingCanvas2.addEventListener（'mouseup'，函数（e）{
paint2=假；
});
drawingCanvas2.addEventListener（'mouseleave'，函数（e）{
paint2=假；
});
}
//绘图函数
函数绘制（drawContext，类型，x，y）{
moveTo（drawStartPos.x，drawStartPos.y）；
如果（类型）{
//是位移
drawContext.strokeStyle='#ffffff'；
}否则{
//是肿块
drawContext.strokeStyle='#000000'；
}
drawContext.lineTo（x，y）；
drawContext.stroke（）；
drawStartPos={x:x，y:y}；
material.bumpMap.needsUpdate=true；
material.displacementMap.needsUpdate=true；
}
函数animate（）{
请求动画帧（动画）；
网格旋转.x+=0.005；
网格旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
stats.update（）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}

正文{
填充：0；
保证金：0；
}
#绘画画布{
位置：绝对位置；
背景色：#000；
顶部：0px；
右：0px；
z指数：3；
}
#图纸-1-2{
位置：绝对位置；
背景色：#000；
顶部：128px；
右：0px；
z指数：3；
边框：实心1px#ffffff；
}
#threejs容器{
位置：绝对位置；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
z指数：1；
}

---

示例将

.displacementMap

与

.normalMap

结合使用。其他。要在置换的零件上进行着色，您还需要应用

.normalMap

，再次感谢您提供了令人惊讶的答案。我改变了位移比例，现在可以工作了（有点）我的UV贴图肯定有问题，谢谢！