“由于工作需要,在三维场景中绘制‘监测点’时使用的cylinder替代的监测点并绘制断面,突发奇想想用精灵试试。”
01
—
入坑代码
在搜索了大量资料后,发现绘制图片可以使用canvas绘制图片后再以材质加载到精灵上,各种尝试后场景中始终不显示精灵。代码如下(注:有可能是我操作问题,欢迎留言讨论):
let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); let img = new Image(); img.src = 'project/point.png'; img.onload = function () {
console.log('height:', img.height); ctx.drawImage(img, 50, 50, 50, 50); let texture = new THREE.CanvasTexture(canvas); texture.magFilter = THREE.LinearFilter; texture.minFilter = THREE.LinearFilter; texture.needsUpdate = true; let spriteMaterial = new THREE.S