Boundaries and raycaster problem

Questions
, ,
1

Hi everyone! I made a table and it looks like this:

image
image1097×755 92.3 KB

Table simple made from planes which I created from my own method createPlane

 createPlane(data) {
        let geometry = new THREE.PlaneGeometry( 1, 1 );
        let material = new THREE.MeshLambertMaterial( {color: new THREE.Color(data.color), side: THREE.DoubleSide} );
        let plane = new THREE.Mesh( geometry, material)
        plane.scale.set(data.width, data.height, 1)
        scene.add(plane)
}

I was looking for information about how to create boundary in three.js documentation. Found OutlinePass in post-processing and EdgesGeometry.

I tried to use EdgesGeometry. Method where I used EdgesGeometry to create boundaries of plane:

addEdgeBorder(mesh) {
    const edges = new EdgesGeometry( mesh.geometry );
    const line = new LineSegments( edges, new LineBasicMaterial( { color: 0x000000 } ) );
    mesh.add(line)
}

The table began to look like this:

image
image1111×757 54.1 KB

I liked this result, but I had a problem with raycaster, since now only the boundaries of the plane are highlighted, but not the plane itself.

What am I doing wrong? I need to select only planes. How can this be fixed? Can I somehow force to ignore raycaster boundaries? I spent a lot of time on this case and I haven’t any idea to solve it…

2

You have several options. Pick the one that suits you best:

  • Set the raycaster.params to use 0 threshold for lines.
  • When you get an array of intersections, do not pick the first one, but the first one that is not a line (the array has data for objects and you can check them)
  • Split the table from its borders (i.e. the border is not a child of the mesh). Then use intersectObjects with a list of the tables elements only (i.e. without the borders).
2 Likes
3

Hello, sorry for the late response, was very busy.

I have read your offer. Your answer helped me a lot.

I ended up solving this problem simply by specifying the threshold parameter for the line inside the raycaster.

raycaster.params.Line.threshold = 0

I will explain why I did not try the other two approaches. In the second case, raycaster produces a huge number of intersections, so it will be very unreliable to sort through the intersected mesh every time you call raycaster.

In the third approach, three js allows me to automatically set the position, rotation and scale parameters for boundaries that are a child of the plane.

1 Like