THREEJs 關於對稱軸映象翻轉

undefined發表於2022-04-10
JS

點對於某個對稱軸映象翻轉，這裡用二維演示，思路及核心方法都是一致的，二維能較好說明。

找到在對稱軸上與點最近的點

 // 將對稱軸整成線段
 const line = new THREE.Line3(axis, new THREE.Vector3(0, 0, 0))
 const linePoint = new THREE.Vector3()
 line.closestPointToPoint(arr[i], false, linePoint)
 // linePOint就是arr[i]點線上段上最近的點

得出點與線段上的點的距離S1

// linePoint是線段上的點  vec3是需要翻轉的點
const distance = linePoint.distanceTo(vec3)

按方向延長S1的距離至S點

 // 簡單的勾股定理
 const p = Math.sqrt(2) * 0.5
 x = linePoint.x + p * distance
 y = linePoint.y - p * distance

需要進行判斷

對於上方的結果只是點在對稱軸左側才成立, 需要判斷點的方位

  /**
   * 判斷是否在左側
   * 因為資料是否在左右側關係到xy的符號問題, 距離是沒有負數的，而座標是存在正負的
   */
  function leftORRight() {
    let left = true;
    const line = new THREE.Line3(axis, new THREE.Vector3(0, 0, 0))
    const linePoint = new THREE.Vector3()
    for (let i = 0; i < arr.length; i++) {
      line.closestPointToPoint(arr[i], false, linePoint)
      if (linePoint.x < arr[i].x) {
        // 右側
        left = false;
        break;
      }
    }
    return left;
  }

All Code

import * as THREE from 'three'
/**
 * 實現點繞制定對稱軸映象轉換的功能
 */
function axisRound(scene) {
  // const arr = [
  //   new THREE.Vector3(-1, 1, 0),
  //   new THREE.Vector3(-2, -1, 0),
  //   new THREE.Vector3(-1, -1, 0),
  //   new THREE.Vector3(-1, 2, 0),
  // ]
  // 提供測試的資料
  const arr = [
    new THREE.Vector3(1, -1, 0),
    new THREE.Vector3(2, -1, 0),
    new THREE.Vector3(1, 1, 0),
    new THREE.Vector3(1, -2, 0),
  ]
  const material = new THREE.MeshBasicMaterial({ color: 'red', side: THREE.DoubleSide });
  
  arr.forEach(row => {
    const geometry = new THREE.PlaneGeometry(0.5, 0.5);
    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);
    plane.position.set(row.x, row.y, row.z)
  })
  const axis = new THREE.Vector3(1, 1, 0)
  {
    const points = [];
    points.push(axis);
    points.push(new THREE.Vector3(-10, -10, 0))
    points.push(new THREE.Vector3(10, 10, 0))
    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    const line = new THREE.Line(geometry, material);
    scene.add(line);
  }
  arr.forEach(row => {
    const geometry = new THREE.PlaneGeometry(0.5, 0.5);
    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);
    const n = t(row, axis)
    console.log(n);
    plane.position.set(n.x, n.y, n.z)
  })
  // 正式開始計算
  function t(vec3, axis) {
    const line = new THREE.Line3(axis, new THREE.Vector3(0, 0, 0))
    const linePoint = new THREE.Vector3()
    line.closestPointToPoint(vec3, false, linePoint)
    // 得出2的算術平方根的1/2
    const p = Math.sqrt(2) * 0.5
    const distance = linePoint.distanceTo(vec3)
    let x, y;
    if (leftORRight()) {
      x = linePoint.x + p * distance
      y = linePoint.y - p * distance
    } else {
      x = linePoint.x - p * distance
      y = linePoint.y + p * distance
    }
    return new THREE.Vector3(x, y, 0)
  }
  /**
   * 判斷是否在左側
   * 因為資料是否在左右側關係到xy的符號問題, 距離是沒有負數的，而座標是存在正負的
   */
  function leftORRight() {
    let left = true;
    const line = new THREE.Line3(axis, new THREE.Vector3(0, 0, 0))
    const linePoint = new THREE.Vector3()
    for (let i = 0; i < arr.length; i++) {
      line.closestPointToPoint(arr[i], false, linePoint)
      if (linePoint.x < arr[i].x) {
        // 右側
        left = false;
        break;
      }
    }
    return left;
  }
}
export { axisRound }

相關文章