three.js中的位移贴图

Question

我正在使用黑白图像作为模型的凹凸贴图。该模型是一个.obj文件，其中包含关联的.mtl文件，用于UV映射。这是我使用的代码：

  // 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贴图或纹理作为凹凸贴图工作，但与位移？

Answer 1

我没有看到你的代码有什么问题。你确定它不工作？
尝试增加displacementScale的值。
虽然bumpScale是从0 - 1. DisplacementScale可以是任何事情，因为它是...... umm ......场景比例。下面
是既用帆布作为纹理（划在盒子看）一起工作的一个例子，请点击 “运行代码段”

var camera, scene, renderer, mesh, material, stats; 
 
var drawStartPos = {x:0, y:0}; 
 

 
init(); 
 
setupCanvasDrawing(); 
 
animate(); 
 

 
function init() { 
 
    // Renderer. 
 
    renderer = new THREE.WebGLRenderer(); 
 
    //renderer.setPixelRatio(window.devicePixelRatio); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    // Add renderer to page 
 
    document.getElementById('threejs-container').appendChild(renderer.domElement); 
 

 
    // Create camera. 
 
    camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
 
    camera.position.z = 400; 
 

 
    // Create scene. 
 
    scene = new THREE.Scene(); 
 

 
    // Create material 
 
    material = new THREE.MeshPhongMaterial(); 
 

 
    // Create cube and add to scene. 
 
    var geometry = new THREE.BoxGeometry(200, 200, 200, 50, 50, 50); 
 
    mesh = new THREE.Mesh(geometry, material); 
 
    scene.add(mesh); 
 

 
    // Create ambient light and add to scene. 
 
    var light = new THREE.AmbientLight(0x404040); // soft white light 
 
    scene.add(light); 
 

 
    // Create directional light and add to scene. 
 
    var directionalLight = new THREE.DirectionalLight(0xffffff); 
 
    directionalLight.position.set(1, 1, 1).normalize(); 
 
    scene.add(directionalLight); 
 

 
    // Add listener for window resize. 
 
    window.addEventListener('resize', onWindowResize, false); 
 

 
    // Add stats to page. 
 
    stats = new Stats(); 
 
    document.body.appendChild(stats.dom); 
 
} 
 

 
function setupCanvasDrawing() { 
 
\t \t // get canvas and context 
 
\t \t var drawingCanvas = document.getElementById('drawing-canvas'); 
 
    var drawingCanvas2 = document.getElementById('drawing-canvas-2'); 
 
    var drawingContext = drawingCanvas.getContext('2d'); 
 
    var drawingContext2 = drawingCanvas2.getContext('2d'); 
 
    
 
    // draw white background 
 
    drawingContext.fillStyle = "#FFFFFF"; 
 
    drawingContext.fillRect(0,0,128,128); 
 
    drawingContext2.fillStyle = "#000000"; 
 
    drawingContext2.fillRect(0,0,128,128); 
 
    
 
    // set canvas as bumpmap 
 
    material.bumpMap = new THREE.Texture(drawingCanvas); 
 
    material.displacementMap = new THREE.Texture(drawingCanvas2); 
 
    material.displacementScale = 30; 
 
    
 
    // set the variable to keep track of when to draw 
 
    var paint = false; 
 
    var paint2 = false; 
 
    
 
    // add canvas event listeners 
 
    drawingCanvas.addEventListener('mousedown', function(e){ 
 
     paint = true 
 
     drawStartPos = {x:e.offsetX, y:e.offsetY}; 
 
    }); 
 
    drawingCanvas.addEventListener('mousemove', function(e){ 
 
    \t if(paint){ 
 
     \t draw(drawingContext, 0, e.offsetX, e.offsetY); 
 
     } 
 
    }); 
 
    drawingCanvas.addEventListener('mouseup', function(e){ 
 
     paint = false; 
 
    }); 
 
    drawingCanvas.addEventListener('mouseleave', function(e){ 
 
     paint = false; 
 
    }); 
 
    
 
    drawingCanvas2.addEventListener('mousedown', function(e){ 
 
     paint2 = true 
 
     drawStartPos = {x:e.offsetX, y:e.offsetY}; 
 
    }); 
 
    drawingCanvas2.addEventListener('mousemove', function(e){ 
 
    \t if(paint2){ 
 
     \t draw(drawingContext2, 1, e.offsetX, e.offsetY); 
 
     } 
 
    }); 
 
    drawingCanvas2.addEventListener('mouseup', function(e){ 
 
     paint2 = false; 
 
    }); 
 
    drawingCanvas2.addEventListener('mouseleave', function(e){ 
 
     paint2 = false; 
 
    }); 
 
} 
 

 
// Draw function 
 
function draw(drawContext, type, x, y) { 
 
    drawContext.moveTo(drawStartPos.x, drawStartPos.y); 
 
    if(type){ 
 
    \t // is displacement 
 
    drawContext.strokeStyle = '#ffffff'; 
 
    }else{ 
 
    \t // is bump 
 
    drawContext.strokeStyle = '#000000'; 
 
    } 
 
\t drawContext.lineTo(x,y); 
 
\t drawContext.stroke(); 
 
    drawStartPos = {x:x, y:y}; 
 
    material.bumpMap.needsUpdate = true; 
 
    material.displacementMap.needsUpdate = true; 
 
} 
 

 
function animate() { 
 
    requestAnimationFrame(animate); 
 
    mesh.rotation.x += 0.005; 
 
    mesh.rotation.y += 0.01; 
 
    renderer.render(scene, camera); 
 
    stats.update(); 
 
} 
 

 
function onWindowResize() { 
 
    camera.aspect = window.innerWidth/window.innerHeight; 
 
    camera.updateProjectionMatrix(); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
}

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#drawing-canvas { 
 
    position: absolute; 
 
    background-color: #000; 
 
    top: 0px; 
 
    right: 0px; 
 
    z-index: 3; 
 
} 
 
#drawing-canvas-2 { 
 
    position: absolute; 
 
    background-color: #000; 
 
    top: 128px; 
 
    right: 0px; 
 
    z-index: 3; 
 
    border: solid 1px #ffffff; 
 
} 
 

 
#threejs-container { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
}

<script src="https://rawgit.com/mrdoob/three.js/r83/build/three.min.js"></script> 
 
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script> 
 
<canvas id="drawing-canvas" height="128" width="128"></canvas> 
 
<canvas id="drawing-canvas-2" height="128" width="128"></canvas> 
 
<div id="threejs-container"></div>