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); //将其放入场景中
下图是我实现的效果
但是我希望实现下面的效果