Question

如何获得Raycaster与物体相交的颜色？

例如，如果将Raycaster指向具有十六进制颜色的材质的盒子，则返回对象的颜色代码会很好。

如果对象具有用于纹理的图像，则想获得Raycast线相交的特定像素的颜色。

Answer 1

0）交叉路口信息

让我们一起讨论raycaster-intersection事件。如果您将事件侦听器添加到光线投射实体

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

事件详细信息包含两个数组：
a）els包含相交的元素（实体）
b）intersections包含交点详细信息（精确点等）

您可以在此提琴here

中检查它们

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

通过Raycaster变色

1 个答案: