How to draw a line between points in world space

Questions
1

HI,
in my scene, I have a ground plane with a displacement map. A mouse click sets markers on the ground plane, although incorrectly on the y axis currently.

I need to be able to draw a path or line between these markers. I have tried and can’t figure this one out or find much info on how to do this.

Any help on ways to do this would really help.
Thanks

2

I got an error message in the console:
ReferenceError: event is not defined nca-map:222:3

Which points to the line 222 in your source code, and it’s inside a function for an event listener of the mouse:

//on doc mouseup
window.addEventListener('mouseup', function (ev){
	if (ev.target == renderer.domElement) {
		var x = ev.clientX;
		var y = ev.clientY;
		if( x != clientClickX || y != clientClickY )
			return;
		mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
		mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
		raycaster.setFromCamera( mouse, camera );
		var intersects = raycaster.intersectObject( plane );
		if (intersects.length > 0) {
            pvt.position.copy( intersects[ 0 ].point );
            console.log(intersects[ 0 ].point)
            xu = Math.floor(intersects[0].uv.x*128);
            xv = -(Math.floor(intersects[0].uv.y*128)-127);
            posx = intersects[ 0 ].point.x;
            posz = intersects[ 0 ].point.z;
            var index = (Math.floor(xv) * 128 + Math.floor(xu)) * 4
            var r = texData.data[index];
            checkarea(r);
        } 
    }
}, false);

So you try to access undefined object/variable event here:

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
3

Thanks. Fixed it.

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
5

Yes, I’m slowly realising this height value might not be available.
I might be able to make it by putting the displacement map into a canvas, then checking the red rgb value, then using that number as a Y value for the marker point. Lets see…

6

@dr-okra Just changed my previous reply in several minutes after your last post :wink:

7

Thanks. That example has all the missing bits I need to do this.

8

Thanks for the help. I got it working quite well.

9

You’re welcome :wink: