получить цвет с Raycaster - PullRequest
Новая
       6

получить цвет с Raycaster

0 голосов
/ 04 ноября 2018

как можно получить цвет пересечения Raycaster и объекта?

например, если Raycaster направлен на коробку с материалом с цветом Hexcode, было бы неплохо вернуть цветовой код объекта.

И если у объекта есть изображение для текстуры, я бы хотел получить цвет определенного пикселя, который пересекает линия Raycast.

1 Ответ

0 голосов
/ 06 ноября 2018

0) Информация о пересечении

Пойдем с событием raycaster-intersection. Если вы добавляете прослушиватель событий к объекту raycasting 

rayEl.addEventListener("raycaster-intersection", (e)=> {
// e contains useful information

деталь события содержит два массива:
а) els содержит пересекающиеся элементы (сущности)
б) intersections содержит детали пересечения (точные точки и т. д.)

Вы можете проверить их в этой скрипке здесь

1) Получение цвета

Если ваша сущность имеет шестнадцатеричный цвет, определенный любым из следующих способов: 

<a-sphere color="#af0faf"></a-sphere>
<a-box material="color: #af0faf"></a-box>

вы можете получить к нему доступ из material компонента: 

let el = e.detail.els[0]
el.getAttribute("material").color
el.components.material.color

2) Получение текстуры цвета

Это довольно сложно, и я не уверен, как это можно сделать иначе.

Упомянутый e.detail.intersections содержит точку пересечения на карте UV. Он имеет точку (x, y), где x, y находятся в диапазоне <-0,5, 0,5>. Чтобы перевести его в цвет пикселя, вы можете создать временный <canvas>, заполнить его текстурой, захватить контекст и получить цвет пикселя. 

var c // the canvas element with the texture
var ctx = c.getContext("2d");
var pixel = ctx.getImageData(x, y, 1, 1).data 
// a) x, y are -0.5 - 0.5 so it needs rescaling to the canvas 
// (simply multiply by the canvas size)
// b) pixel contains RGBA values
...