三個JS將3D尺寸轉換爲2D

我想將球體的世界空間座標轉換爲屏幕空間座標以獲得屏幕空間界限，然後我可以使用它來覆蓋一個div。三個JS將3D尺寸轉換爲2D

理想我想延長此函數返回該對象的高度和寬度，以及在x & Y：

toScreenPosition：功能（OBJ，照相機） {

var vector = new THREE.Vector3(); 

    var widthHalf = 0.5*world.renderer.context.canvas.width; 
    var heightHalf = 0.5*world.renderer.context.canvas.height; 

    obj.updateMatrixWorld(); 

    vector.setFromMatrixPosition(obj.matrixWorld); 
    vector.project(camera); 

    vector.x = (vector.x * widthHalf) + widthHalf; 
    vector.y = - (vector.y * heightHalf) + heightHalf; 


    return { 
     x: vector.x, 
     y: vector.y 
    }; 

},

來源

2017-01-29 frank astin

我假定你的意思是你想要將世界空間座標轉換爲屏幕空間座標以獲得球體的屏幕空間界限？ – Soviut

@Soviut你會是對的。 –

你應該更新你的問題和標題來提及這些細節。你會得到更好的牽引力。 – Soviut

您可以創建少量THREE.Object3D，並將它們放置在要投影到屏幕的主對象邊框位置的場景中。

然後您可以使用您在其他空對象上的主對象上使用的方法，並獲取主對象邊框屏幕上的像素位置。

例如，如果你想知道，有5半徑的球面的邊框的屏幕座標：

var first = new THREE.Object3D(); 
var second = new THREE.Object3D(); 
var third = new THREE.Object3D(); 
var fourth = new THREE.Object3D(); 

first.position.set(sphere.x,sphere.y+5,sphere.z); 
second.position.set(sphere.x,sphere.y-5,sphere.z);

那麼你可以申請你寫的功能，但不是：

obj.updateMatrixWorld();

等等

你會做什麼：

first.updateMatrixWorld(); 
second.updateMatrixWorld();

etc ...

然後您將在屏幕上顯示這兩個對象（位於主對象的邊界）上的x，y座標，您可以通過減去來檢查高度。

來源

2017-01-30 09:33:14 Tlatis

我不是真的關注，你能提供一些示例代碼嗎？ –

我編輯了答案 – Tlatis

僅供參考：Object3d應該是Object3D，前者會拋出錯誤，因爲它不是THREE.js構造函數對象。 – 10000RubyPools

我會寫一個函數，它將3D點作爲輸入並返回2D屏幕點，如there所示。然後，如果處理球體，那很容易：以3D形式獲取球體的中心，計算2D點，這將成爲覆蓋div的中心，在球體表面上獲取任意3D點，計算2D點，你會知道覆蓋div所需的半徑，從那裏你可以很容易地計算出一個矩形區域。

來源

2017-01-30 11:59:16

三個JS將3D尺寸轉換爲2D

回答

相關問題