我在屏幕上有文字精灵，以球形图案放置，我想让用户点击单个单词并突出显示它们 .
现在的问题是，当我进行光线投射并执行raycaster.intersectObjects（）时，它会返回在点击发生的地方完全不同的精灵（通常它会突出显示单击单词左侧的单词） . 出于调试目的，我实际上从raycaster对象中提取了光线，它们几乎都是通过我点击的单词 .
在这张图片中，我点击了“emma”，“universe”和“inspector legrasse”这两个词，但是突出显示的单词是红色的，我还旋转了相机，这样我们就能看到这些线条 .
这是相关代码：
精灵创作：
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = 256;
canvas.width = 1024;
...
context.fillStyle = "rgba(0, 0, 0, 1.0)";
context.fillText(message, borderThickness, fontsize + borderThickness);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial({map: texture});
var sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(400, 100, 1.0);
然后将各个精灵添加到“sprites”数组中，然后添加到场景中 .
点击检测：
function clickOnSprite(event) {
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = -( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
drawRaycastLine(raycaster);
var intersects = raycaster.intersectObjects(sprites);
if (intersects.length > 0) {
intersects[0].object.material.color.set(0xff0000);
console.log(intersects[0]);
}
}
我正在使用带有轨道控制的透视相机 .
1 回答
我得出结论，目前这不能用精灵（至少目前没有） .
正如评论中所建议的那样，我最终使用平面几何而不是精灵 .