將THREE.Sprite分組以共享相同的變換點

我有許多構成標籤一部分的THREE.Sprite對象：圖標+信息+文本。將THREE.Sprite分組以共享相同的變換點

當自上而下OrthographicCamera相機對齊時，這些對齊良好，但是當我更改相機位置和旋轉時，每個精靈（組嵌套在Object3D中）單獨轉換並失去對齊（即標籤位於&上方的圖標上）。

有沒有辦法在一組精靈之間共享變換點？

圖像改變相機位置時，說明這個問題：

來源

2016-01-11 user2386872

有。我早期的question and answer詢問了基本相同的問題，並提供了一個解決方案：爲此，您需要抵消你的精靈，拍攝相機角度，並用這些角度旋轉精靈偏移量。

你可以將你的精靈組合在一個組中，並抵消整個組而不是每個精靈。這會給你最好的表現，因爲每當相機旋轉時，計算量就會減少。

假設您正在使用最近的THREE.js和OrbitControls（用於在controls上調用的方法），並且在（0,0,0）的精靈組中，匹配標籤組上的攝像機角度類似於這個：

var euler = new Euler(controls.getPolarAngle() + Math.PI/2, controls.getAzimuthalAngle(), 0, 'YXZ'); 
var rotationMatrix = new Matrix4().makeRotationFromEuler(euler); 

var offset = new THREE.Vector3(0, - labelOffset, 0); 
spriteGroup.position.copy(offset.applyMatrix4(rotationMatrix));

來源

2016-01-12 14:15:57 Leeft

看到它，但是，因爲我沒有使用控制場景，我無法得到它的工作。我目前正在設置相機位置，如下所示：' this.scene.camera.position.x = 100; this.scene.camera.position.y = 100; this.scene.camera.position.z = 100; this.scene.camera.lookAt（this.scene.scene.position）; this.scene.camera.rotation.y = - Math.PI/4; this.scene.camera.rotation.x = Math.atan（ - 1/Math.sqrt（2）） ' 並且無法使其工作。會再給它一次。 – user2386872

只要你基於這些數字正確計算你的「極座標」和「方位角」角度，它就能正常工作。雖然計算錯誤很容易。 – Leeft

使用平面結束，並將相機中的四元數複製到父Object3D：sceneGraphObject.setCameraQuaternion（this.camera.quaternion）;這更容易維護。還發送了一個功能請求，以便能夠將sprites分組：http://github.com/mrdoob/three.js/issues/7941。 – user2386872

將THREE.Sprite分組以共享相同的變換點

回答

相關問題