Adrop fire raycaster on drop event

Question

我正在尝试从React UI将对象放到3D场景中。

我可以捕获放置数据/位置等，我现在尝试在RayCaster中使用它来确定将3D实体放置到了哪个实体上。

const handleDragStop = (e) => {
    console.log(e)

    const scene = document.getElementById('scene');
    const raycaster:any = scene.getAttribute("raycaster");
    const camera = AFRAME.scenes[0].camera;

    console.log(raycaster)
    console.log(AFRAME.scenes[0])

    const mouse = new window.THREE.Vector2();
    mouse.x = ( e.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( e.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children );
    console.log(intersects)
};

Aframe版本的RayCaster似乎没有raycaster.setFromCamera（）函数，因此无法将其识别为函数。

我如何从掉落事件中触发光线播放器？

编辑

我可以在新的Raycaster上使用它

const raycaster = new window.THREE.Raycaster();

新的问题是，如何使此射线广播仪使用与现有对象相同的对象？

谢谢

Answer 1

要访问三个raycaster，必须对具有raycaster组件的实体执行以下操作：

entityEl.components.raycaster.raycaster.setFromCamera(..);