BoxGeometry上的位移图只移动边？

Question

我刚刚开始得到我的方位与三个an，我有一个问题，使用位移地图。

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

你的位移图的问题是灰色的阴影(在这里看)变化很小。

最低点应该是黑色的，最高的应该是白色的(或者相反，我忘记了)。

你也需要有足够的眩晕来影响这一点。

不过，我认为这张地图应该分配给凹凸图。

但是..。你可能不想使用凹凸图和普通地图。通常是一个或另一个。

但是，看看您正在加载的普通地图，它没有任何效果，因为它都是相同的颜色。(在这里看)，因此，它只是你需要的凸起地图。

而且，MeshPhongMaterial似乎没有roughnessMap或reflectionMap的制服/属性，所以它们什么也不做。

所以基本上，你只需要加载你的地图和你的位移图，但是把位移图放在凹凸图上。

也许你的粗糙图像把它放在你的specularMap上。

编辑。

由于映像上的CORS，这里的嵌入代码似乎没有运行。

见小提琴在这里

    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
  });

Answer 2

我相信问题是，BoxGeometry每边只包含4个顶点。当你应用一个位移映射时，你实际上移动了顶点的位置，法线映射会在碎片层面上“伪造”这个位置。

为了解决你的问题，我会尝试用一个有更多顶点的几何学。球体的测试效果很好。然后导入/生成一个具有更多顶点的盒子几何。

希望这能有所帮助！