threejs精灵贴图

Posted 2021-04-21 包子没有馅儿

“由于工作需要，在三维场景中绘制‘监测点’时使用的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.SpriteMaterial({ map: texture }); let sprite = new THREE.Sprite(spriteMaterial); sprite.position.x = 1; sprite.position.y = 5; sprite.position.z = -8; sprite.scale.x = 2; sprite.scale.y = 3; sprite.scale.z = 2; sprite.material.color.set('#0000ff') app.scene.add(sprite); }

图片如下：

02

—

精灵加载成功

    各种尝试后场景始终不显示精灵，被逼无奈去threejs官网查看精灵的代码，官网给的例子很简单实用，细节自己调即可，代码如下：

var spriteMap = new THREE.TextureLoader().load( 'textures/sprite.png' );
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );
var sprite = new THREE.Sprite( spriteMaterial );sprite.scale.set(200, 200, 1)
scene.add( sprite );

03

   新的问题

    精灵虽然加载到三维场景了，发现改变精灵的颜色后会变成紫黑色（现已解决，就不贴图展示了）。改变material的颜色根本不顶用，怀疑自己是否又努力错方向了，毕竟搞一上午了，一点成果都么有。转念一想，既然是紫黑色肯定是颜色混合的原因导致色彩显示不出来，那就用PS把图片底色改成白色（手动狗头）？

完整代码如下

 let texture = new THREE.TextureLoader().load("project/point2.png"); let material = new THREE.SpriteMaterial({ map: texture }); let sprite = new THREE.Sprite(material); sprite.position.x = 1; sprite.position.y = 5; sprite.position.z = -8; sprite.material.color.set('#ff00ff'); sprite.scale.x = 5; sprite.scale.y = 5; sprite.scale.z = 5; app.scene.add(sprite);

白色图片如下

    为了测试是否可以改变精灵的颜色，手动添加了单击事件来修改精灵的颜色，自带荧光效果。实现方式很简单，场景中用threejs的raycaster可以计算出点击事件在场景中的三维坐标并返回被点击的对象，再设置material中的颜色即可。