three.js raycaster 射线与物体相交基本用法

目标

场景里创建一个立方体和一个起始点，从起始点发出沿X轴负方向的向量，使其与立方体相交，得到的交点与起始点相连。

步骤

1.创建立方体

    //创建一个带边框的立方体
    function cubeWithOutline() {
      let cubeGeo = new THREE.CubeGeometry(2, 20, 15)
      let material = new THREE.MeshBasicMaterial({
        color: 0x8d8dcf,
        transparent: true,
        opacity: 0.5
      })
      let cube = new THREE.Mesh(cubeGeo, material)

      let outLineMtl = new THREE.LineBasicMaterial({
        color: 0xff666666,
        linewidth: 1
      })

      let outlineGeo = new THREE.EdgesGeometry(cubeGeo)
      let outline = new THREE.LineSegments(outlineGeo, outLineMtl)

      let cubeGroup = new THREE.Group()

      cubeGroup.add(cube)
      cubeGroup.add(outline)
      cubeGroup.position.setX(-20) // 立方体向X轴负方向移动
      return cubeGroup
    }
    var cube = cubeWithOutline()
    scene.add(cube);

2.创建起始点

// 创建起始点
var basicP = new THREE.Vector3(10, 0, 0)

3.获取交点

function getIntersectPoint() {
  let ray = new THREE.Raycaster(basicP, new THREE.Vector3(-1, 0, 0).normalize())
  let points = ray.intersectObjects(cube.children) //或 let points = ray.intersectObjects(cube,true)
  let intersectP = points[0].point //取得第一个交点
}

4.交点与起始点相连

function createIntersectLine(intersectP) {
  let lineMtl = new THREE.LineBasicMaterial({
    color: 0xdf5676,
    linewidth: 1
  })
  let geometry = new THREE.Geometry()
  geometry.vertices.push(basicP, intersectP)
  let line = new THREE.Line(geometry, lineMtl)
  scene.add(line)
}

注意点

此时你会得到下图的结果，和我们预想的不一样，这是因为创建立方体的时候，我们改变过立方体的位置 cubeGroup.position.setX(-20) // 立方体向X轴负方向移动

因此在把立方体加入场景前需要做以下动作才能得到正确结果

cube.updateMatrix()
cube.updateMatrixWorld()

完整代码见： github.com/0814kongguy…