three.js中常用方法

• 生成文字标签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
}

快速搭建工具-持续开发中