У меня есть спрайты с текстом на экране, размещенным в сферическом узоре, и я хочу позволить пользователю нажимать на отдельные слова и выделять их.
Теперь проблема в том, что когда я делаю raycasting и выполняю raycaster.intersectObjects (), он возвращает спрайты, которые где-то совершенно отличаются от места щелчка (обычно это подсвечивает слова, которые находятся слева от слов, по которым щелкнули). В целях отладки я фактически нарисовал лучи от объекта raycaster, и они в значительной степени идут через слова, которые я нажал.
На этой картинке я щелкнул слова «эмма», «вселенная» и «инспектор Легра», но выделенные слова выделены красным, я также повернул камеру, чтобы мы могли видеть линии.
вот соответствующий код:
Создание спрайта:
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);
Отдельные спрайты затем добавляются в массив "спрайтов", а затем добавляются в сцену.
Обнаружение щелчка:
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]);
}
}
Я использую перспективную камеру с элементами управления орбитой.