与精灵相关的Three.js raycaster交叉点完全偏离左侧

Question

我在屏幕上有文字精灵，以球形图案放置，我想让用户点击单个单词并突出显示它们。

现在的问题是，当我进行光线投射并执行raycaster.intersectObjects（）时，它会返回在点击发生的地方完全不同的精灵（通常会突出显示单击单词左侧的单词）。出于调试目的，我实际上从raycaster对象中提取了光线，它们几乎都是通过我点击的单词。

在这张照片中，我点击了＆＃34; emma＆＃34;，＆＃34; universe＆＃34;和＆＃34;检查员legrasse＆＃34;，但突出显示的单词是红色的，我也旋转了相机，所以我们可以看到线条。

这是相关代码：

精灵创作：

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);

然后将个别精灵添加到＆＃34; sprites＆＃34;数组，然后添加到场景中。

点击检测：

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]);
    }
}

我正在使用带有轨道控制的透视摄像机。

Answer 1

我得出的结论是，目前无法使用精灵（至少目前没有）。

正如评论中所建议的那样，我最终使用了平面几何而不是精灵。