Add raycast support - This closes #8

[kappys1]

I add the raycast function from THREE.js Library. working with v91 THREE.js solution mentionated in issue #8 Thanks @inDigiNeous and @spite

[kappys1]

Last Push (merge) for remove conflicts about the last update

[gvdlangenberg]

@spitea any idea if this will be merged some day?

[zachzeyuwang]

@spite Hey would this be merged someday?

[spite]

Merged, thank you!

[gvdlangenberg]

Any README update on how to use raycasting? My raycasting setup is still ignoring the Mesh added to the scene.

[ylzon]

@spite Can you tell me how to use it? Use directly raycaster.intersectObjects Unable to capture

[sjlynch]

@spite @gvdlangenberg @mgss Any of you figure out how to get raycasting working? I have it working for other threejs objects but not THREE.MeshLines. Using three v106dev

I tried playing with raycaster.linePrecision but no dice.

[gvdlangenberg]

No, I figured I could use a CylinderGeometry as well in my case.

[sjlynch]

@gvdlangenberg yeah i'm thinking of just using cubes or cylinders for lines but that's not as flexible as this library :/

[zachzeyuwang]

@sjlynch If you read the source code in line 83: https://github.com/spite/THREE.MeshLine/blob/master/src/THREE.MeshLine.js#L83, the correct way to call this function is your_meshline.raycast(three_raycaster, returned_intersects).

[yhdjyyzk]

@spite It will be better if there is an example about raycast. Thx.

[djy2017]

@sjlynch If you read the source code in line 83: https://github.com/spite/THREE.MeshLine/blob/master/src/THREE.MeshLine.js#L83, the correct way to call this function is your_meshline.raycast(three_raycaster, returned_intersects).

I have tried , but it did not work.

function Test() {
      scene.traverse((o) => {
        if (o && o.type != 'Scene') {
          let arr = []
          o.raycast(raycaster, arr)
          if(arr.length > 0) {
            o.material.color = new THREE.Color('red')
          } else {
            o.material.color = new THREE.Color('green')
          }
        }
      })
    }

[Jtfinlay]

@sjlynch If you read the source code in line 83: https://github.com/spite/THREE.MeshLine/blob/master/src/THREE.MeshLine.js#L83, the correct way to call this function is your_meshline.raycast(three_raycaster, returned_intersects).

I have tried , but it did not work.

function Test() {
      scene.traverse((o) => {
        if (o && o.type != 'Scene') {
          let arr = []
          o.raycast(raycaster, arr)
          if(arr.length > 0) {
            o.material.color = new THREE.Color('red')
          } else {
            o.material.color = new THREE.Color('green')
          }
        }
      })
    }

Hey dij2017, I've been working through the same issue as you. The problem is that the PR adds support directly on the MeshLine object, while traversing the scene only acts on the Mesh object. You could either hold the created MeshLine objects, or recreate them from the mesh data during traversal.

I did the latter and it worked for me,

function Test() {
      scene.traverse((o) => {
        if (o && o.type != 'Scene') {
          let arr = []
          o.raycast(raycaster, arr)
          if (o.material && o.material.isMeshLineMaterial) {
              const line = new MeshLine()
              // Converting to Geometry shouldn't be needed, but I hit an issue..
              line.setGeometry(
                  new Geometry().fromBufferGeometry(o.geometry)
              )
              line.raycast(raycaster, arr);
          }
          if(arr.length > 0) {
            o.material.color = new THREE.Color('red')
          } else {
            o.material.color = new THREE.Color('green')
          }
        }
      })
    }