import * as Three from "three"; var three_sprite_utils_vars = { spriteInfoStorage:[], spriteParams:null, scene_src:null, } //This array will store function SetScene(_scene_src) { three_sprite_utils_vars.scene_src = _scene_src; } export function SwitchSprite(_str, _position, attachedObject) { var sprite_tmp; sprite_tmp = findSprite(attachedObject) if(sprite_tmp == null) return CreateSprite(_str, _position, attachedObject); else{ return RemoveSprite(attachedObject); } } function RemoveSprite(attachedObject) { var spriteIndex = findSpriteIndex(attachedObject); if(spriteIndex == -1) return null; three_sprite_utils_vars.scene_src.remove(three_sprite_utils_vars.spriteInfoStorage[spriteIndex]['spriteItem']); three_sprite_utils_vars.spriteInfoStorage.splice(spriteIndex, 1) // delete three_sprite_utils_vars.spriteInfoStorage[spriteIndex]; return null; } function findSprite(attachedObject) { // var attachedObj_tmp; var spriteIndex = findSpriteIndex(attachedObject); if(spriteIndex == -1) return null; return three_sprite_utils_vars.spriteInfoStorage[spriteIndex]['spriteItem'] // return attachedObj_tmp; } function findSpriteIndex(attachedObject) { var attachedObj_tmp; var flag = false; var i = -1; for (i = 0; i < three_sprite_utils_vars.spriteInfoStorage.length; i++) { var spriteInfo_tmp = three_sprite_utils_vars.spriteInfoStorage[i]; console.log(spriteInfo_tmp); attachedObj_tmp = spriteInfo_tmp['objItem']; if(attachedObj_tmp == attachedObject){ flag = true; break; return spriteInfo_tmp['spriteItem']; } } if(i == three_sprite_utils_vars.spriteInfoStorage.length){ return -1; } return i; // return attachedObj_tmp; } function CreateSprite(str, _position, _obj) { var newSprite = makeTextSprite(str, {position:_position}); var spriteInfoItem = {'objItem':_obj, 'spriteItem':newSprite}; three_sprite_utils_vars.spriteInfoStorage.push(spriteInfoItem); return newSprite; } function makeTextSprite(message, parameters) { console.log(message) console.log(parameters) if (parameters === undefined) parameters = {}; var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial"; /* 字体大小 */ var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 72; /* 边框厚度 */ var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 5; /* 边框颜色 */ var borderColor = parameters.hasOwnProperty("borderColor") ? parameters["borderColor"] : { r: 90, g: 90, b: 90, a: 1.0 }; /* 背景颜色 */ var backgroundColor = parameters.hasOwnProperty("backgroundColor") ? parameters["backgroundColor"] : { r: 255, g: 255, b: 255, a: 1.0 }; var position = parameters.hasOwnProperty("position") ? parameters["position"] : { x: 0, y: 0, z: 0 }; /* 创建画布 */ var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); /* 字体加粗 */ context.font = "Bold " + fontsize + "px " + fontface; /* 获取文字的大小数据,高度取决于文字的大小 */ var metrics = context.measureText(message); var textWidth = metrics.width; /* 背景颜色 */ context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")"; /* 边框的颜色 */ context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")"; context.lineWidth = borderThickness; /* 绘制圆角矩形 */ roundRect(context, borderThickness / 2, borderThickness / 2, textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6); // normRect(context, 0, 0, textWidth, fontsize) /* 字体颜色 */ context.fillStyle = "rgba(222, 111, 0, 1)"; context.fillText(message, borderThickness, fontsize + borderThickness); /* 画布内容用于纹理贴图 */ var texture = new Three.Texture(canvas); texture.needsUpdate = true; var spriteMaterial = new Three.SpriteMaterial({ map: texture }); var sprite = new Three.Sprite(spriteMaterial); console.log(sprite.spriteMaterial); /* 缩放比例 */ sprite.position.set(parameters.position.x, parameters.position.y, parameters.position.z); sprite.scale.set(10,10,10); return sprite; } function normRect(ctx, x, y, w, h) { ctx.beginPath(); // ctx.moveTo(x, y); // ctx.lineTo(x, y - 2*h); // ctx.lineTo(x + 2*w, y - 2*h); // ctx.lineTo(x + 2*w, y); // ctx.lineTo(x, y); ctx.moveTo(x, y); ctx.lineTo(x, y + 2 * h); ctx.lineTo(x - 2 * w, y + 2 * h); ctx.lineTo(x - 2 * w, y); ctx.lineTo(x, y); ctx.closePath(); ctx.fill(); // ctx.stroke(); } function roundRect(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y); ctx.quadraticCurveTo(x + w, y, x + w, y + r); ctx.lineTo(x + w, y + h - r); ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); ctx.lineTo(x + r, y + h); ctx.quadraticCurveTo(x, y + h, x, y + h - r); ctx.lineTo(x, y + r); ctx.quadraticCurveTo(x, y, x + r, y); ctx.closePath(); ctx.fill(); ctx.stroke(); }