Рисовать линию и текст, начиная с центра объектов сферы [ThreeJS]

#javascript #three.js

#javascript #three.js

Вопрос:

Я работаю над моделью солнечной системы с использованием ThreeJS. Когда я нажимаю на название планеты, камера фокусируется на этой планете; Я хочу нарисовать (2D) линию, начинающуюся с центра планеты, соединяющую саму планету с некоторым текстом (показывающим некоторую информацию, такую как масса, скорость и т. Д.)

Как я могу этого добиться? пример

Ответ №1:

Обычно центр сетки сферы можно просто получить, используя ее свойство position . Положение метки может быть получено (например, с помощью AABB сферы) или путем ее предварительного определения. В обоих случаях вы получаете как минимум две точки, которые вы можете использовать для настройки своей линии следующим образом:

 const points = [ spherePosition, labelPosition ]; // instances of Vector3

const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

const line = new THREE.Line( geometry, material );
scene.add( line );