three.js给模型添加动态的文字精灵(vue)

1.创建2D文字canvas

makeLabelCanvas(baseWidth, size, name) {const borderSize = 2;const ctx = document.createElement('canvas').getContext('2d');const font =  `${size}px bold sans-serif`;ctx.font = font;// console.log("ctx",ctx)// measure how long the name will beconst textWidth = ctx.measureText(name).width;const doubleBorderSize = borderSize * 2;const width = baseWidth + doubleBorderSize;const height = size + doubleBorderSize;ctx.canvas.width = width;ctx.canvas.height = height;// need to set font again after resizing canvasctx.font = font;ctx.textBaseline = 'middle';ctx.textAlign = 'center';ctx.fillStyle = '#fffffc';ctx.fillRect(0, 0, width, height);// scale to fit but don't stretchconst scaleFactor = Math.min(1, baseWidth / textWidth);ctx.translate(width / 2, height / 2);ctx.scale(scaleFactor, 1);ctx.fillStyle = 'black';ctx.fillText(name, 0, 0);return ctx.canvas;},

2.创建文字精灵

addSpirit(name){const canvas=this.makeLabelCanvas(300,70,name);const canvasTexture = new THREE.CanvasTexture(canvas);canvasTexture.minFilter = THREE.LinearFilter;canvasTexture.wrapS = THREE.ClampToEdgeWrapping;canvasTexture.wrapT = THREE.ClampToEdgeWrapping;const labelMaterial = new THREE.SpriteMaterial({map: canvasTexture,transparent: true,});const label = new THREE.Sprite(labelMaterial);label.position.z=this.minY+300;const labelBaseScale = 1;label.scale.x = canvas.width  * labelBaseScale;label.scale.y = canvas.height * labelBaseScale;return label},

3.给需要的模型添加精灵（精灵图的内容可修改）

//加入显示设备名的精灵图let label=this.addSpirit(device.name)// console.log("精灵",canvas)copyMesh.add(label);

思路提供参考链接精灵样式修改属性参考

three.js给模型添加动态的文字精灵(vue)相关推荐

如何给视频添加动态文字水印？
如何给视频添加动态文字水印?添加水印是视频制作环节中最后的一个步骤,视频添加水印可以有效防止视频被盗用,还能有效保护自己的版权.有时候我们希望给视频添加动态的文字水印,比例文字水印在视频中上下或者左右 ...
THREEJS在场景图上动态标识一些文字方法二（文字精灵sprite）
threejs文字精灵sprite的实现 1.手动添加文字精灵 2.通过json动态获取文字精灵,并进行交互 3.point模型只表示位置 4.CircleGeometry实现 5.3.PlaneGe ...
js 给动态li添加动态点击事件
一.给动态li添加动态点击事件试了网上的on,live,bind绑定,都不起作用.最后看到https://bbs.csdn.net/topics/390414057 上的代码.试了一遍,demo o ...
php文字添加投影,视频加动态标题文字视频标题文字添加阴影边框给视频加上炫酷的文字标题...
开篇就来点个题:今天的教程内容就是视频添加文字标题,虽然都是给视频加文字标题但是今天的和往常有点不太一样呢!软件中不仅自带了许多炫酷的标题模板外,还可以对文字标题进行编辑,给标题添加动态效果,修改文字 ...
js动态设置文字大小
js动态设置文字大小 <script>function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.docu ...
ArcGIS JS先添加动态图层，再添加切片图层后不显示
场景: 现在要在一个地图上添加动态服务图层和切片服务图层,当创建好图层之后,使用map.addLayer()方法,先把动态图层加到地图上,再把切片图层加到地图上,出现一个现象:只能看到加载的动态图层, ...
Android使用Opengl录像时添加(动态)水印
最近需要开发一个类似行车记录仪的app,其中需要给录制的视频添加动态水印.我使用的是OpenGL开发的,刚开始实现的是静态水印,后面才实现的动态水印. 先上效果图,左下角的是静态水印,中间偏下的是时间 ...
【视频加水印】Video Watermark Pro视频添加动态水印(附工具下载地址)
<Video Watermark Pro>是一款专门给视频加水印的软件,这个软件可以帮用户快速加水印,而且可以批量加水印,软件操作起来简单又快捷,有需要的用户不要错过. 软件特色 1.将水 ...
50 Three.js让模型或者group居中，获取模型的最小大小
模型居中让模型居中的方法最简单了,直接给geometry调用center()方法就实现了,模型居中显示. //让图形居中显示geom.center(); 获取模型的最小大小获取模型最下的大小的原理 ...

three.js给模型添加动态的文字精灵(vue)

three.js给模型添加动态的文字精灵(vue)相关推荐

最新文章

热门文章