时间戳

首页 > 解决方案 > 从球体对象的中心开始绘制线条和文本 [ThreeJS]

javascript - 从球体对象的中心开始绘制线条和文本 [ThreeJS]

问题描述

我正在使用 ThreeJS 研究太阳系模型。当我点击一个行星名称时，相机会聚焦在那个行星上；我想从行星中心开始绘制一条（2D）线，将行星本身连接到一些文本（显示一些信息，如质量、速度等......）

我怎样才能做到这一点？ 例子

标签： javascriptthree.js

解决方案

通常，球体网格的中心可以通过它的位置属性简单地获得。标签的位置可以得到（例如通过使用球体的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 );

推荐阅读