環境
- ThreeJS 107版本
- three.min.js
- OrbitControls.js
說明
添加標注的原理是利用在場景中添加canvas實現，要標注的文字繪制在canvas中。
解決方案
-
創建球的過程參見"ThreeJS制作地球"
-
創建點group，考慮后面會做刪除功能，所以把所有的實體都以group組為單位添加，后續方便做刪除
// 標記點組合
var gLabel = new THREE.Group();
- 獲取canvas對應球坐標
var average = getAverage();
// 獲取average函數
function getAverage() {
var average = 0;
if (dom.clientWidth > dom.clientHeight) {
average = dom.clientHeight / 180;
} else {
average = dom.clientWidth / 360;
}
return average;
}
- 創建文字標注、設置大小、並賦予材質
var texture = new THREE.CanvasTexture(getCanvasFont(textLength * fontsize * average, fontsize * average, textvalue, color, backgroundColor));
var fontMesh = new THREE.Sprite(
new THREE.SpriteMaterial({
map: texture
})
)
fontMesh.scale.x = fontsize / average * textLength;
fontMesh.scale.y = fontsize / average;
- 定位標注
// 定義提示文字顯示位置
var lblPos = this.getPosition(_labelData[i].attributes.x + 90, _labelData[i].attributes.y, 35);
fontMesh.position.set(lblPos.x, lblPos.y, lblPos.z);
gLabel.add(fontMesh);
附上效果圖
