在 A-Frame 中单击即可获取场景的坐标
[英]Get coordinates of a scene with a click in A-Frame
问题描述
I'm trying to render a 3D model using A-Frame.
我正在尝试使用 A-Frame 渲染 3D model 。 This is what I've done这就是我所做的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>glTF Test</title>
<meta name="description" content="OBJ Test">
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>.
</head>
<body>
<a-scene>
<!-- Assets definition -->
<a-assets>
<a-asset-item id="object-ref" src="/public/Scene/scene.gltf"></a-asset-item>
</a-assets>
<!-- Using the asset management system. -->
<a-gltf-model src="#object-ref" position="0 25 0"></a-gltf-model>
<!-- Camera and cursor -->
<a-camera position="0 25 15">
<a-cursor></a-cursor>
</a-camera>
<!-- Environment elements-->
<a-sky color="#000000"></a-sky>
<a-plane color="#1A1A1A" rotation="-90 0 0" width="500" height="500"></a-plane>
</a-scene>
</body>
</html>
This code works and rendering is done well.此代码有效并且渲染完成得很好。
However,I'm tryng to add some event listeners that enable to get the sceene coordinates (x, y, z) of the point where I clicked with mouse.但是，我正在尝试添加一些事件侦听器，以获取我用鼠标单击的点的场景坐标（x、y、z）。
Is there any way to do this?有没有办法做到这一点？
1 个解决方案
解决方案1
0 已采纳 2021-01-22 12:04:26
If you want to detect where the meshes were clicked, then the information is within the click event detail :如果您想检测网格被单击的位置，则信息位于click 事件详细信息中：
entity.addEventListener("click", e => {
console.log(e.detail.intersection.point)
})
For example:例如：
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <script> AFRAME.registerComponent("foo", { init: function() { const text = document.querySelector("a-text") // listen for clicks this.el.addEventListener("click", e => { // log the points //console.log(e.detail.intersection.point) let point = e.detail.intersection.point let pointString = point.x.toFixed(2) + ", " + point.y.toFixed(2) + ", " + point.z.toFixed(2); text.setAttribute("value", "Click at: " + pointString) }) } }) </script> <a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable"> <a-text position="-1 2 -3" color="black"></a-text> <a-box class="clickable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box> <a-sphere class="clickable" position="0 1.25 -5" radius="1.25" color="#EF2D5E" foo></a-sphere> <a-cylinder class="clickable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" foo></a-cylinder> <a-plane class="clickable" position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" foo></a-plane> <a-sky class="clickable" color="#ECECEC" foo></a-sky> </a-scene>
In case You wanted to click anywhere and get a point, it gets complicated because of mapping 2D <x, y> -> 3D <x, y, z> .如果您想单击任意位置并获得一个点，它会因为映射 2D <x, y> -> 3D <x, y, z>而变得复杂。
In this case I'd create a collision mesh (like a sphere) around the camera, use it to determine the clicked points.在这种情况下，我会在相机周围创建一个碰撞网格（如球体），用它来确定点击的点。
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> <script> AFRAME.registerComponent("foo", { init: function() { const text = document.querySelector("a-text") // listen for clicks this.el.addEventListener("click", e => { // log the points //console.log(e.detail.intersection.point) let point = e.detail.intersection.point let pointString = point.x.toFixed(2) + ", " + point.y.toFixed(2) + ", " + point.z.toFixed(2); text.setAttribute("value", "Click at: " + pointString) }) } }) </script> <a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable"> <a-text position="-1 2 -3" color="black"></a-text> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-camera> <a-sphere class="clickable" material="side: back" visible="false" foo></a-sphere> </a-camera> <a-sky color="#ECECEC"></a-sky> </a-scene>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.