在three.js中放大鼠標指針

使用thingiview.js，Three.js和trackballControls，我組裝了一個系統，我可以在其中上傳STL文件，然後將其呈現在畫布上。跟蹤球控制是非常好的一些調整，但我有一個問題：在three.js中放大鼠標指針

我想放大鼠標光標的點而不是網格/平面的中心。

我已經做了一個簡單的captureEvent來獲取鼠標的屏幕座標並跟蹤它，但是我在計算要在哪裏使用控制方案時遇到了問題。

我檢查了_zoomStart/_zoomEnd的東西（這讓我感到困惑，因爲它會離開「y」，我認爲它會是「z」）。但是當試圖添加_zoomStart.x時，它基本上忽略了它。

現在我可能不是一個大師，但我很舒服，通常都會感到很興奮。

我還想確保當我平移時，縮放和旋轉仍然基於物體的中心，而不是網格/平面的中心。

一直在尋找通過職位和例子的日子，但沒有真正找到任何答案。

我確定我沒有在正確的地方找正確的方向。一個有益的推動（或更好但很快的一腳）在正確的方向將真正讚賞。

編輯

this.zoomCamera = function() { 

     var factor = 1.0 + (_zoomEnd.y - _zoomStart.y) * _this.zoomSpeed; 

     if (factor !== 1.0 && factor > 0.0) { 

      _eye.multiplyScalar(factor); 

      if (_this.staticMoving) { 

       _zoomStart.copy(_zoomEnd); 

      } else { 

       _zoomStart.y += (_zoomEnd.y - _zoomStart.y) * this.dynamicDampingFactor; 

      } 

     } 

    };

我認爲上面的是我會去爲變焦改變。我不明白的是它被設置爲_zoomStart.y。但是，照原樣，我將如何實現x？

我的意思是，如果_zoomStart和_zoomEnd是Vector2，在上面的代碼中它定義了x？

confuzzled

來源

2013-01-22 Taraes

請參閱：http://stackoverflow.com/questions/23994206/zoom-to-object-in-threejs/30514984#30514984 – RAM

在Trackballcontrols放大實際上並沒有縮小（這將被設置相機FOV）。兩個對象剛剛在控件中移動......，另一個是攝像頭（this.object），另一個是它正在查看的點（this.target）。我沒有玩過跟蹤控制，但是我猜測它根本不會碰到目標（所以所有的移動和縮放都會圍繞這個進行）。

你可以嘗試的onclick改變目標，是這樣的：

mycontrols.target = new THREE.Vector3(newx, newy, newz);

您可能需要更新/重置某些其他Trackballcontrols內部變量，但它也可能工作就是這樣。

爲了從2D x/y鼠標座標中獲取3D x/y/z座標，我建議搜索光線投射或對象拾取，應該找到大量示例。

來源

2013-01-22 16:54:48 yaku

不幸的是，onclick無法正常工作。我知道這個動作（腐爛，變焦，平移）就是相機在移動。但是有沒有辦法將縮放設置指向鼠標指針本身的x/y？ – Taraes

鼠標指針在3D空間中不存在，所以你需要一些方法來告訴你想要放大的空間中的哪個點（從Three.js的角度來看，鼠標光標存在於...我不知道...在虛擬相機鏡頭什麼的）。你可以在onclick或onmouseover上做到這一點，但你需要從鼠標事件x和y中找出3D座標。 – yaku

所以，如果我理解正確，你想放大到鼠標指針下的3D對象/點（在屏幕空間中的x，y）。如果是這樣的話，你需要使用raycasting來獲取該點的3D座標在模型中（世界或相機空間中的x，y，z）。然後使用這些座標作爲TrackballControls的目標，所以當你縮放攝像頭時，它會朝着那個點移動。 – yaku

訣竅是，_zoomStart和_zoomEnd爲觸摸變焦創建的，而當你放大使用鼠標滾輪，你必須通過只有一個表達變量：「多少放大」。程序員沒有爲它創建新變量，但使用了組件。

所以_zoomStart和_zoomEnd不提供有關變焦將如何執行的信息，這些變量包含「指令」而已。然後，該軟件將其轉換爲表示3D中相機所需移動的「向量」「zoompan」向量。

來源

2015-10-26 13:46:00 user5489481

在three.js中放大鼠標指針

回答

相關問題