Three.js raycaster 与 sprite 的交点完全偏向左侧

Question

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

现在的问题是，当我进行光线投射并执行 raycaster.intersectObjects() 时，returns 精灵在发生点击的地方完全不同（通常它会突出显示左侧的单词点击的话）。出于调试目的，我实际上从 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]);
    }
}

我正在使用带轨道控制的透视相机。

Answer 1

我得出的结论是，目前不能用精灵来完成（至少目前不能）。

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

Three.js raycaster 与 sprite 的交点完全偏向左侧

Three.js raycaster intersection with sprites is completely off to the left

three.js

sprite

intersection

raycasting