aframe - 如何在 A-Frame 中检测相机和球体的距离
问题描述
当相机靠近球体时,我试图显示一些文本。这个想法是当用户看到球体移动得更近时,文本就会出现,比如说“你好”。但是现在我只知道如何使用a-entity添加固定位置的文本,我不知道如何检测相机和球体之间的距离,并在用户可以看到球体靠近时显示文本。这是我现在的代码:
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sphere position="0 0 0" perspective="true" radius="1.5" color="#aaa" id="sphere1"></a-sphere>
<a-entity position="4.5 2 0" text="width: 10; color: white; value: Hello"></a-entity>
<a-sky color="#000"></a-sky>
<a-entity class="camwrap" position="0 0 0">
<a-camera look-controls wasd-controls="fly:true acceleration:1" near="1" position="0 0 20" user-height="0" fov="60">
</a-camera>
</a-entity>
</a-scene>
<script>
const cam = document.querySelector("a-camera");
setTimeout(function() {
cam.components["wasd-controls"].keys["KeyW"] = true;
}, 1000);
</script>
</body>
有什么想法吗?
解决方案
如果您知道相机位置和球体位置 - 您可以计算距离:
1) sqrt((x1 - x2)^2 + (y1 - y2)^2 + (z1 - z2)^2)
、
2) 或使用 THREE.jsa.distanceTo(b)
方法。
将您的计算放入自定义组件中,并在tick
函数中检查距离:
init: function() {
this.cam = document.querySelector("[camera]")
this.sphere = document.querySelector("a-sphere")
},
tick: function() {
let camPos = this.cam.object3D.position
let spherePos = this.sphere.object3D.position
let distance = camPos.distanceTo(spherePos)
if (distance < 5) {
// camera closer than 5m, do something
}
}
在这个小提琴中检查一下。
推荐阅读
- amazon-web-services - AWS EC2 实例连接在浏览器中被拒绝
- html - 要在网站上下载和使用的开源社交媒体图标?
- python - 将一种格式的日期转换为另一种格式
- php - 将搜索词添加到当前查询(Wordpress PHP)
- sql - 您可以使用 SSIS 循环播放单个文件吗?
- crash - 退出设置 MMF 的程序后,VB6 在 IDE 中崩溃
- c++ - 错误:没有运算符“==”与这些操作数匹配
- r - 在 x 轴上创建具有多个变量的条形图
- reactjs - 如何将 mongodb json 带到烧瓶中做出反应?
- amazon-web-services - 适用于 AWS Appflow 的 Amazon VPC 终端节点