Я работаю над веб-игрой, которая требует выбора нарисованных объектов, а не простых геометрических c фигур. Для этого я рисовал их как спрайты в сцене на холсте, используя Three. JS. Я много месяцев ломал себе голову, пытаясь выяснить, как определить, сталкивается ли луч raycaster в моем контексте webgl (используя Three JS) с прозрачной частью спрайта. Я просмотрел и прочитал столько сообщений, сколько смог найти, но нашел только два сообщения о решениях:
var ctx =renderer.getContext("experimental-webgl", {preserveDrawingBuffer: true})
const pixel = new Uint8Array(4)
ctx.readPixels(10,30,1,1, ctx.RGBA, ctx.UNSIGNED_BYTE, pixel); log(pixel);
, которое требует использования preserveDrawingBuffer, что снизит мою производительность, или:
raycaster.intersectObject(scene.getObjectByName('some sprite')[0]].uv
, а затем с помощью математического мастера dry для сравнения UV-координат с самим изображением, я думаю, загружается в буфер где-то из scene.getObjectByName('some sprite').material.map.image.src.valueOf()
, а затем, если соответствующий пиксель или нечеткая область прозрачны, мы не Не считаю спрайт выбранным. Это было бы дополнительно сложно, потому что спрайты часто вращаются, масштабируются, смещаются по центру и т. Д. c. Я даже не уверен на 100%, как бы я вообще это реализовал.
Мне интересно, есть ли другой способ, особенно более «правильный» способ сделать это. Есть ли способ преобразовать изображения спрайтов в / снабдить мои изображения какими-то сетками, а затем точно нарисовать меня sh с изображением, чтобы трассировщик лучей действительно должен был использовать правильную форму объекта, а не просто изображение самолет (спрайт)? Было бы лучше взять каждый спрайт и тщательно смоделировать его края в программе 3D-моделирования? Я перепробовал все комбинации «я sh», «геометрия», «изображение», «спрайт» и c и не нашел решения.
Любая помощь приветствуется. Нищие не могут выбирать, но я также надеюсь, что в конечном итоге появятся анимированные объекты, поэтому было бы дополнительно полезно, если бы это решение не стало невозможным.
Спасибо
e: см. Комментарий @ gman ниже. Я работал в системе выбора цвета, только реально меняя emissive.setHex на material.color.set (id), а затем проверял цвет вместо эмиссионных. отлично работает, но, похоже, немного тормозит. Придется посмотреть, плохо ли я его реализовал или смогу сделать его более эффективным. Спасибо вам обоим !!