最近开发一个vr全景图片编辑器，开始研究webgl，看得云里雾里，感觉太底层了，对于一个数学和图形学都不好的人来说，和看天书差不多，幸运的是ThreeJS这个框架很好的对webgl底层进行来封装，不用知道那么多底层知识，下面对最近的项目重点做一个笔记。

开发环境

three.min.js

OrbitControls.js

解决方案

1. 创建球的过程比较简单，这里就不说了。
2. 创建点group，考虑后面会做删除功能，所以把所有的实体都以group组为单位添加，后续方便做删除

// 标记点组合
var gLabel = new THREE.Group();

3. 获取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;
}

4. 创建文字标注、设置大小、并赋予材质

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;

5. 定位标注

// 定义提示文字显示位置
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);

附上效果图

转动时候标注点也会跟随转动，效果还不错。

Tags：jcanvas

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。