How to draw a line between points in world space

Questions
4

If I’m correct with my suggestion. Raycaster works on the javascript side, whereas displacementMap is used at the GPU side. So javascript knows nothing about how vertices changed on GPU.

There’s an example, showing the difference between using of displacement map in a material and displacing vertices in javascript, also based on the same displacement map. Note, how the marker behaves on meshes with different approaches (green - using .displacementMap, aqua - displacement in js):

JSDisplacement

https://jsfiddle.net/prisoner849/bahxxyp9/

Code of displacement in javascript:

var planeJSGeom = new THREE.PlaneGeometry(10, 10, 100, 100);
planeJSGeom.rotateX(Math.PI * -0.5);
var planeJS = new THREE.Mesh(planeJSGeom, new THREE.MeshStandardMaterial({
  color: "aqua",
  alphaMap: texture,
  transparent: true,
  wireframe: true
}));
planeJS.position.x = 6;
scene.add(planeJS);

textureLoader.load("https://threejs.org/examples/models/obj/ninja/displacement.jpg", function(t) {

  var canvas = document.createElement("canvas");
  canvas.width = t.image.width;
  canvas.height = t.image.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(t.image, 0, 0, t.image.width, t.image.height);

  var wdth = planeJSGeom.parameters.widthSegments + 1;
  var hght = planeJSGeom.parameters.heightSegments + 1;
  var widthStep = t.image.width / wdth;
  var heightStep = t.image.height / hght;
  console.log(wdth, hght, widthStep, heightStep);

  for (var h = 0; h < hght; h++) {
    for (var w = 0; w < wdth; w++) {
      var imgData = ctx.getImageData(Math.round(w * widthStep), Math.round(h * heightStep), 1, 1).data;
      var displacementVal = imgData[0] / 255.0;
      displacementVal *= 2;
      var idx = (h * wdth) + w;
      var vert = planeJSGeom.vertices[idx];
      vert.y = displacementVal;
    }
  }
  planeJSGeom.verticesNeedUpdate = true;
  planeJSGeom.computeFaceNormals();

  console.log("done");

});
1 Like