Как вычислить размеры webgl сферы?

Question

[Timur Kostenko]

Пытаюсь понять как вычислить размеры фигуры в пикселях, чтобы они соответствовали размерам svg линии.




Есть формула которой я воспользовался, но она не дает нужного результата, вычисления неправильные.

this.cubeGeometry = new THREE.SphereGeometry(210, 60, 60);
this.camera = new THREE.PerspectiveCamera(45, this.size.w / this.size.h, 1, 20000);
this.camera.position.z = 1000;

var vFOV = THREE.Math.degToRad( this.camera.fov ); // => 0.7853981633974483
var height = 2 * Math.tan( vFOV / 2 ) * 1000; // => 828.4271247461901
var fraction = 210 / height; // => 0.253492424049175
var finalSize = this.size.h * fraction // => 242.33875739101128

Кто нибудь знает как это сделать ? Все что нужно, это приклеить svg кольцо к глобусу. Если есть обходные пути решения этой проблемы, буду рад любой помощи

Answer 1

[xmoonlight]

css 3d transform - не выход?

Comments

[Timur Kostenko]

Выровнять то не проблема. Дело в том что я не знаю размеров самого глобуса, а размеры холста определены на 100% по ширине и высоте окна. Можно ли как то встроить эту синюю линию в саму сцену где отображается глобус, или по крайней мере растянуть canvas на 100% от размера глобуса ?

[xmoonlight]

Тимур Костенко, оберните в один контейнер два слоя друг над другом. слой с синей линией также 100% и трансформируйте в 3D.

Answer 2

[profesor08]

Замерь визуально сколько занимает глобус пространства в %, замерь сколько занимает пространства дырка в линии, где должен быть глобус в %. Получи отношение на этих размеров, потом перемножай высоту и ширину своего svg на это отношение. Все значения должны быть в % и чем точнее измерения, тем точнее результат.

Но возможно ответ лежит здесь new THREE.SphereGeometry(210, 60, 60);