weixin_38199535 2022-09-07 00:53 采纳率: 0%
浏览 50
已结题

Threejs如何实现sprite与mesh之间的连线?

Threejs如何实现sprite与mesh之间的连线?
下图是画出来的标签,他会跟随在我们的mesh上
let canvas = document.createElement("canvas");
                    let context = canvas.getContext("2d");
                    //开启抗锯齿
                    canvas.getContext("2d").imageSmoothingEnabled = true;
                    var devicePixelRatio = window.devicePixelRatio || 1
                    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1
                    
                    var ratio = devicePixelRatio / backingStoreRatio
                    canvas.width = 386 * ratio;
                    canvas.height = 386 * ratio;
                    context.scale(ratio,ratio)

                    //canvas 实体
                    context.fillStyle = "rgba(0,0,0,0.65)"; //填充带透明颜色
                    context.fillRect(0,0,300,80); //x,y,width,height 线框中填充背景长宽高
                    //canvas 文字
                    context.fillStyle = "#f7f7f7";
                    context.font = "55px bold Arial";
                    context.fillText(item.name, 30, 60);
                    item.texture = new THREE.Texture(canvas); //就是上面的canvas,将它写在一个函数中然后返回。
                    item.texture.needsUpdate = true;
                    item.spriteMaterial = new THREE.SpriteMaterial({map: item.texture});
                    item.sprite = new THREE.Sprite(item.spriteMaterial);
                   
                    item.sprite.scale.set(2.5, 2.5, 2.5); //大小缩放
                    item.sprite.position.set(item.position.x, item.position.y, item.position.z); //位置
                    item.sprite.name = "标识图";
                    item.add(item.sprite)
                    scene.add(item.sprite); //将其放入场景中
下图是我实现的效果

img

但是我希望实现下面的效果

img

img

我咨询到两种方案: 1、 css23d+精灵+贴图。2、精灵+html2canvas。奈何完全不知道该如何入手实践这两个方案。
望指教,最好能提供个简单的demo
  • 写回答

3条回答 默认 最新

  • Beq 2022-09-07 11:15
    关注

    好凄凉,这是CSDN,WEBGL分支方向不如去技术交流群

    评论

报告相同问题?

问题事件

  • 系统已结题 9月15日
  • 创建了问题 9月7日

悬赏问题

  • ¥30 基于信创PC发布的QT应用如何跨用户启动后输入中文
  • ¥20 非root手机,如何精准控制手机流量消耗的大小,如20M
  • ¥15 远程安装一下vasp
  • ¥15 自己做的代码上传图片时,报错
  • ¥15 Lingo线性规划模型怎么搭建
  • ¥15 关于#python#的问题,请各位专家解答!区间型正向化
  • ¥15 unity从3D升级到urp管线,打包ab包后,材质全部变紫色
  • ¥50 comsol温度场仿真无法模拟微米级激光光斑
  • ¥15 上传图片时提交的存储类型
  • ¥15 VB.NET如何绘制倾斜的椭圆