flashfxp上传网站模板,微信信公众号平台,长春网络推广长春seo公司,网站seo计划上节课案例创建标签的方式#xff0c;是把一张图片作为Sprite精灵模型的颜色贴图,本节给大家演示把Canvas画布作为Sprite精灵模型的颜色贴图#xff0c;实现一个标签。
注意#xff1a;本节课主要是技术方案讲解#xff0c;默认你有Canvas基础#xff0c;如果没有Canvas基…上节课案例创建标签的方式是把一张图片作为Sprite精灵模型的颜色贴图,本节给大家演示把Canvas画布作为Sprite精灵模型的颜色贴图实现一个标签。
注意本节课主要是技术方案讲解默认你有Canvas基础如果没有Canvas基础可以学习之后再来学习本节课内容。
Canvas画布绘制一个标签 你可以使用Canvas绘制特定轮廓的标签比如加上指引线或箭头可以输入特定文字。
下面代码自动适配了不同长度的文字标注文字符号越多canvas画布越长。
// 生成一个canvas对象标注文字为参数name
function createCanvas(name) {/*** 创建一个canvas对象绘制几何图案或添加文字*/const canvas document.createElement(canvas);const arr name.split(); //分割为单独字符串let num 0;const reg /[\u4e00-\u9fa5]/;for (let i 0; i arr.length; i) {if (reg.test(arr[i])) { //判断是不是汉字num 1;} else {num 0.5; //英文字母或数字累加0.5}}// 根据字符串符号类型和数量、文字font-size大小来设置canvas画布宽高度const h 80; //根据渲染像素大小设置过大性能差过小不清晰const w h num * 32;canvas.width w;canvas.height h;const h1 h * 0.8;const c canvas.getContext(2d);// 定义轮廓颜色黑色半透明c.fillStyle rgba(0,0,0,0.5);// 绘制半圆矩形轮廓const R h1 / 2;c.arc(R, R, R, -Math.PI / 2, Math.PI / 2, true); //顺时针半圆c.arc(w - R, R, R, Math.PI / 2, -Math.PI / 2, true); //顺时针半圆c.fill();// 绘制箭头c.beginPath();const h2 h - h1;c.moveTo(w / 2 - h2 * 0.6, h1);c.lineTo(w / 2 h2 * 0.6, h1);c.lineTo(w / 2, h);c.fill();// 文字c.beginPath();c.translate(w / 2, h1 / 2);c.fillStyle #ffffff; //文本填充颜色c.font normal 32px 宋体; //字体样式设置c.textBaseline middle; //文本与fillText定义的纵坐标c.textAlign center; //文本居中(以fillText定义的横坐标)c.fillText(name, 0, 0);return canvas;
}
const canvas createCanvas(设备A)CanvasTexture把canvas转化为纹理对象
canvas画布作为CanvasTexture的参数创建一个纹理对象本质上你可以理解为CanvasTexture把canvas画布当做图片读取参数canvas画布上的像素值创建纹理贴图Texture。
loader.load(../工厂.glb, function (gltf) {model.add(gltf.scene);const canvas createCanvas(设备A);//创建一个canvas画布// canvas画布作为CanvasTexture的参数创建一个纹理对象// 本质上你可以理解为CanvasTexture读取参数canvas画布上的像素值const texture new THREE.CanvasTexture(canvas);const spriteMaterial new THREE.SpriteMaterial({map: texture,});const sprite new THREE.Sprite(spriteMaterial);
})精灵模型尺寸和位置设置
精灵模型尺寸和位置设置具体思路可以参考上节课讲解。
注意精灵模型宽高比和canvas画布宽高比保持一致即可。
const y 4;//精灵y方向尺寸
// sprite宽高比和canvas画布保持一致
const x canvas.width/canvas.height*y;//精灵x方向尺寸
sprite.scale.set(x, y, 1);// 控制精灵大小
sprite.position.y y / 2; //标签底部箭头和空对象标注点重合
const obj gltf.scene.getObjectByName(设备A标注); // obj是建模软件中创建的一个空对象
obj.add(sprite); //tag会标注在空对象obj对应的位置cavnas精灵标签封装(标注多个)
封装一个创建cavnas精灵标签的函数可以根据需要调用标注任何需要标注的地方。
import * as THREE from three;
import createCanvas from ./canvas;
// 标注位置对应的模型对象obj
// name标注文字
function createSprite(obj,name) {const canvas createCanvas(name);//创建一个canvas画布// canvas画布作为CanvasTexture的参数创建一个纹理对象const texture new THREE.CanvasTexture(canvas);const spriteMaterial new THREE.SpriteMaterial({map: texture,});const sprite new THREE.Sprite(spriteMaterial);// 控制精灵大小(sprite宽高比和canvas画布保持一致)const s 0.05;//通过canvas宽高度缩放后设置sprite.scale避免图文宽高比变形const x canvas.width*s;const y canvas.height*s;sprite.scale.set(x, y, 1);sprite.position.y y / 2; //标签底部箭头和空对象标注点重合 obj.add(sprite); //tag会标注在空对象obj对应的位置
}export default createSprite;Canvas包含外部图片
如果Canvas包含外部图片作为背景注意创建CanvasTexture的时候不管你的代码结构怎么组织主要要等图像加载完成再执行THREE.CanvasTexture(canvas)如果还未加载完成创建纹理时候读取画布像素时候会不包含图片。
// 生成一个canvas对象标注文字为参数name
function createCanvas(img,name) {/*** 创建一个canvas对象绘制几何图案或添加文字*/const canvas document.createElement(canvas);const w 140; //根据渲染像素大小设置过大性能差过小不清晰const h 80;canvas.width w;canvas.height h;const h1 h * 0.8;const c canvas.getContext(2d);c.fillStyle rgba(0,0,0,0.0); //背景透明c.fillRect(0, 0, w, h);c.drawImage(img, 0, 0, w, h);//图片绘制到canvas画布上// 文字c.beginPath();c.translate(w / 2, h1 / 2);c.fillStyle #ffffff; //文本填充颜色c.font normal 32px 宋体; //字体样式设置c.textBaseline middle; //文本与fillText定义的纵坐标c.textAlign center; //文本居中(以fillText定义的横坐标)c.fillText(name, 0, 0);return canvas;
}const img new Image();img.src ./标签箭头背景.png;img.onload function () {const canvas createCanvas(img,设备A);//创建一个canvas画布// 图片加载完成后读取canvas像素数据创建CanvasTextureconst texture new THREE.CanvasTexture(canvas);...const sprite new THREE.Sprite(spriteMaterial);...}
