ThreeJS计算工具

出处

ThreeJS计算工具

three-utils.js

1、获取任意深度的可见视野

这两个功能将为您提供距PerspectiveCamera给定距离的场景中可见的高度和宽度。

// 获取任意深度的可见视野
// from https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-given-z-depth-from-a-perspective-camera/269
export function visibleHeightAtZDepth(depth, camera) {
  // compensate for cameras not positioned at z=0
  const cameraOffset = camera.position.z
  if (depth < cameraOffset) {
    depth -= cameraOffset
  } else {
    depth += cameraOffset
  }

  // vertical fov in radians
  const vFOV = (camera.fov * Math.PI) / 180

  // Math.abs to ensure the result is always positive
  return 2 * Math.tan(vFOV / 2) * Math.abs(depth)
}

export function visibleWidthAtZDepth(depth, camera) {
  const height = visibleHeightAtZDepth(depth, camera)
  return height * camera.aspect
}

2、定位到曲线

// from https://stackoverflow.com/questions/11179327/orient-objects-rotation-to-a-spline-point-tangent-in-three-js
export function alignOnCurve(object, curve, percentage) {
  // set the object position
  const point = curve.getPoint(percentage)
  object.position.copy(point)

  // get the tangent to the curve
  const tangent = curve.getTangent(percentage).normalize()

  // calculate the axis to rotate around
  const up = new THREE.Vector3(0, 1, 0)
  const axis = new THREE.Vector3().crossVectors(up, tangent).normalize()

  // calcluate the angle between the up vector and the tangent
  const radians = Math.acos(up.dot(tangent))

  // set the quaternion
  object.quaternion.setFromAxisAngle(axis, radians)
}

3、鼠标X，Y到Three.js世界X，Y，Z

// from https://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z
export function mouseToCoordinates({ x, y, targetZ = 0, camera, width, height }) {
  const vec = new THREE.Vector3()
  const pos = new THREE.Vector3()
  vec.set((x / width) * 2 - 1, -(y / height) * 2 + 1, 0.5)
  vec.unproject(camera)
  vec.sub(camera.position).normalize()
  const distance = (targetZ - camera.position.z) / vec.z
  pos.copy(camera.position).add(vec.multiplyScalar(distance))
  return pos
}

<全文结束>