Question

我刚刚开始使用threejs，我遇到了使用Displacement Maps的问题。

http://codepen.io/jpschwinghamer/pen/BWPebJ

我有一个简单的BoxGeometry，我正在尝试将纹理应用到phong材质。除了置换贴图之外，所有似乎都能正常工作。我确保将段添加到BoxGeometry实例中。为了让我的置换贴图正常工作，我是否缺少一些魔法？

考虑以下代码：

  var animate, camera, displacement, geometry, light, light1, map, material, mesh, normal, reflection, renderer, roughness, textureLoader;

  renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('canvas'),
    antialiased: true
  });

  renderer.setClearColor(0xfff000);

  renderer.setSize(window.innerWidth, window.innerHeight);

  renderer.setPixelRatio(window.devicePixelRatio);

  camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);

  window.scene = new THREE.Scene();

  light = new THREE.AmbientLight(0xffffff, 0.5);

  scene.add(light);

  light1 = new THREE.PointLight(0xffffff, 0.6);

  scene.add(light1);

  textureLoader = new THREE.TextureLoader();

  textureLoader.setCrossOrigin("anonymous");

  map = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_COL_2K.jpg");
  normal = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_NRM_2K.jpg");
  roughness = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_GLOSS_2K.jpg");
  reflection = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_REFL_2K.jpg");
  displacement = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_DISP_2K.jpg");

  geometry = new THREE.BoxGeometry(100, 100, 100, 10, 10, 10);

  material = new THREE.MeshPhongMaterial({
    map: map,
    normalMap: normal,
    normalScale: new THREE.Vector2(30, -1),
    roughnessMap: roughness,
    reflectionMap: reflection,
    displacementMap: displacement,
    displacementScale: 1,
    displacementBias: 0
  });

  mesh = new THREE.Mesh(geometry, material);

  mesh.position.set(0, 0, -700);

  scene.add(mesh);

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

  animate();

Answer 1

我认为问题在于BoxGeometry每边只包含4个顶点。当您应用置换贴图时，实际上移动了法线贴图所在顶点的位置。这是片段级别的。

要解决您的问题，我会尝试使用具有更多顶点数的几何体。球体可以很好地进行测试。然后导入/生成具有更多顶点的框几何体。

希望这有帮助！

Answer 2

置换贴图的问题在于灰色阴影（see it here）的变化非常小。
最低点应该是黑色，最高点应该是白色（或者相反，我会忘记）您还需要有足够的顶点才能影响它。

我认为应该将此地图指定给凹凸贴图但是......你可能不想使用凹凸贴图和法线贴图。它通常是一个或另一个但是，看看你正在加载的法线贴图，它没有任何效果，因为它是完全相同的颜色。（see it here），因此，它只是您需要的凹凸贴图。

此外，MeshPhongMaterial似乎没有roughnessMap或reflectionMap制服/属性，因此这些都无能为力。

基本上，您只需要加载地图和置换贴图，而是将置换贴图放在凹凸贴图上。
也许你的粗糙度图像将它放在你的specularMap上。

EDIT。
由于图像上的CORS，此处嵌入代码似乎不会运行查看FIDDLE HERE

    textureLoader = new THREE.TextureLoader();

  textureLoader.setCrossOrigin("anonymous");

  map = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_COL_2K.jpg");
  //normal = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_NRM_2K.jpg");
  roughness = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_GLOSS_2K.jpg");
  //reflection = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_REFL_2K.jpg");
  displacement = textureLoader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/65874/WoodFlooring044_DISP_2K.jpg");

    // Create material
material = new THREE.MeshPhongMaterial({
    map: map,
    //normalMap: normal,
    //normalScale: new THREE.Vector2(30, -1),
    //roughnessMap: roughness,
    //reflectionMap: reflection,
    bumpMap: displacement,
    bumpScale: 100,
    //displacementBias: 0
    specularMap: roughness
  });

BoxGeometry上的位移贴图只移动边缘？

2 个答案: