- 生成文字标签Sprite
- 经纬度转换3d空间坐标
- 拾取canvas中某坐标的颜色值
- 颜色转换为three所用的颜色向量以及透明度
- 当前组坐标转世界坐标
- 绘制一个圆路径
持续更新中
生成文字标签Sprite
// 显示文字 贴图canvas配置 精灵图配置
function addSprite(text, canvaOpts, sprtieOpts) {
const {
width,
height,
fontSize
} = canvaOpts;
// 生成map
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
ctx.font = fontSize + "px 微软雅黑";
ctx.fillStyle = "#fff";
ctx.textAlign = "left";
const ws = ctx.measureText(text).width;
ctx.fillText(text, (width - ws) / 2, height / 2 + fontSize / 2);
const textur = new THREE.Texture(canvas);
textur.needsUpdate = true;
// 生成sprite
const material = new THREE.SpriteMaterial({
map: textur,
transparent: true,
color: 0xffffff,
depthTest: false
});
const TextSprite = new THREE.Sprite(material);
TextSprite.scale.set(sprtieOpts.width, sprtieOpts.height, sprtieOpts.height / 2);
return TextSprite;
}
const sprtie = Utils.addSprite('文字', {
width: 128,
height: 32,
fontSize: 24
}, {
width: 32,
height: 8
});
scene.add(sprtie);
经纬度转换3d空间坐标
/**
* 经纬度转换3d坐标
* @param {Number} opts.lat 经度
* @param {Number} opts.lon 纬度
* @param {Number} opts.radius 半径
* @param {Number} opts.rotation Y轴旋转偏移
*/
function latLongToVector3(opts) {
opts = opts || {};
var lat = parseFloat(opts.lat),
lon = parseFloat(opts.lon),
radius = opts.radius,
rotation = opts.rotation || Math.PI / 2;
var phi = (lat) * Math.PI / 180;
var theta = (lon) * Math.PI / 180 + rotation;
var x = (radius) * Math.cos(phi) * Math.cos(theta);
var y = (radius) * Math.sin(phi);
var z = (radius) * Math.cos(phi) * Math.sin(theta);
const vec3 = new THREE.Vector3(z, y, x);
return vec3;
}
拾取canvas中某坐标的颜色值
// canvas x坐标 y坐标
// return 当前的颜色参数
function getPixelColor(canvas, x, y) {
var thisContext = canvas.getContext("2d");
var imageData = thisContext.getImageData(x, y, 1, 1);
// 获取该点像素数据
var pixel = imageData.data;
var r = pixel[0];
var g = pixel[1];
var b = pixel[2];
var a = pixel[3] / 255
a = Math.round(a * 100) / 100;
var rHex = r.toString(16);
r < 16 && (rHex = "0" + rHex);
var gHex = g.toString(16);
g < 16 && (gHex = "0" + gHex);
var bHex = b.toString(16);
b < 16 && (bHex = "0" + bHex);
var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
var hexColor = "#" + rHex + gHex + bHex;
return {
rgba: rgbaColor,
rgb: rgbColor,
hex: hexColor,
r: r,
g: g,
b: b,
a: a
};
}
颜色转换为three所用的颜色向量以及透明度
// 颜色值 16进制 rgb rgba
// return [{r,g,b},1] 颜色向量 透明度
function getColorArr(str) {
if (Array.isArray(str)) return str; // error
const _arr = [];
str += '';
str = str.toLowerCase().replace(/\s/g, '');
if (/^((?:rgba)?)\(\s*([^\)]*)/.test(str)) {
const arr = str.replace(/rgba\(|\)/gi, '').split(',');
const hex = [
pad2(Math.round(arr[0] * 1 || 0).toString(16)),
pad2(Math.round(arr[1] * 1 || 0).toString(16)),
pad2(Math.round(arr[2] * 1 || 0).toString(16))
];
_arr[0] = new THREE.Color(`#${hex.join('')}`);
_arr[1] = Math.max(0, Math.min(1, (arr[3] * 1 || 0)));
} else if (str === 'transparent') {
_arr[0] = new THREE.Color();
_arr[1] = 0;
} else {
_arr[0] = new THREE.Color(str);
_arr[1] = 1;
}
function pad2(c) {
return c.length == 1 ? `0${c}` : `${c}`;
}
return _arr;
}
当前组坐标转世界坐标
function getWorldPosition(mesh) {
const vec = new THREE.Vector3();
const word = mesh.localToWorld(vec); // 获取世界坐标
return word;
}
绘制一个圆路径
/**
* [creatCirclePath 根据个数 创建一个circle path]
* @Author RAOYAN
* @DateTime 2019-11-06
* @param {Number} dot [中心位置]
* @param {Number} r [半径]
* @param {Number} Ratio [圆]
* @param {Number} len [个数]
*/
creatCirclePath(dot, r, Ratio, len) {
if (len < 1) return [];
let total = 360
let arr = [];
for (let i = 0; i < len; i++) {
const index = (i / len * total);
let rad = index * Math.PI / 180 ;
let cur = [r * Math.cos(rad) + dot[0], Ratio * r * Math.sin(rad) + dot[1]];
arr.push({
position: cur,
radius: rad
})
}
return arr
}