有沒有辦法通過鼠標點擊設置軌道控制目標？

Question

我正在嘗試在three.js 中設置軌道控制目標。 例如在https://threejs.org/editor/ 中，當您添加任何立方體或形狀時，相機始終圍繞模型的中心旋轉，除非您平移相機並且它仍會圍繞 (0,0,0) 旋轉。 現在，我試圖從軌道控件中獲得的行為是，在單擊鼠標時，我應該能夠為軌道控件設置目標。 為此，我正在使用 raycaster，然后在鼠標按下事件上獲取對象位置/中心，然后在那里設置軌道控制的目標，當點擊和移動發生時它工作正常，因為它將目標設置在相機的正前方. 但是當目標設置在其他地方時問題就出現了，用戶正在放大模型（我已經實現了對光標的縮放）/平移模型，然后沒有點擊另一側的新對象，用戶點擊空白區域並移動鼠標，立即，我看到控件和相機跳轉到前一個目標。

我想將軌道控件的目標精確設置在鼠標光標處，即使它是空白空間。 我怎樣才能得到那個東西？

我嘗試在 2D 中獲取鼠標指針，然后將其從相機中取消投影以獲得 3D 坐標，但這是在相機的近平面附近設置軌道目標。 如果用戶點擊模型的空白部分，我將無法獲得應該傳遞給軌道目標的值。

Answer 1

您找到的解決方案是正確的。 您只需將該目標從相機位置偏移得更遠，距離相機到網格的距離。

我在這里做了一個小例子； https://jsfiddle.net/EthanHermsey/x5p6gswu/8/

var vec = new THREE.Vector3(); 
  var distance = camera.position.distanceTo( mesh.position );  

  vec.set(
      ( event.clientX / window.innerWidth ) * 2 - 1,
      - ( event.clientY / window.innerHeight ) * 2 + 1,
      0.5 );

  vec.unproject( camera );

  vec.sub( camera.position ).normalize();

  pointerMesh.position.copy( camera.position ).add( vec.multiplyScalar( distance ) );