位移图中的三个

Question

我目前正在使用黑白映像作为我的模型的凸起图。该模型是一个.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;

使用相同的纹理施加了位移，根本没有应用。我需要在紫外线映射或纹理上更改任何东西以作为凸幅地图工作，但具有位移？

Answer 1

我对您的代码没有任何错误。您确定它不起作用吗？
尝试提高displacementScale的值。
虽然Bumpscale来自0-1。位移尺度可以是任何事物。.嗯...场景比例。
以下是两个与画布一起工作的示例

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() {
		// get canvas and context
		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){
    	if(paint){
      	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){
    	if(paint2){
      	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){
  	// is displacement
    drawContext.strokeStyle = '#ffffff';
  }else{
  	// is bump
    drawContext.strokeStyle = '#000000';
  }
	drawContext.lineTo(x,y);
	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>