Как определить расстояние камеры и сферы в A-Frame - PullRequest
Новая
       11

Как определить расстояние камеры и сферы в A-Frame

0 голосов
/ 27 апреля 2019

Я пытаюсь отобразить текст, когда камера приближается к сфере.Идея в том, что когда пользователь видит, что сфера перемещается намного ближе, появляется текст, скажем, «Привет».Но сейчас я знаю только, как добавить текст с фиксированной позицией, используя 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 Ответ

1 голос
/ 27 апреля 2019

Если Вы знаете положение камеры и положение сферы - вы можете рассчитать расстояние:
1) sqrt((x1 - x2)^2 + (y1 - y2)^2 + (z1 - z2)^2),
2) или с помощью метода THREE.js a.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
  }
}

Проверьте это в этой скрипке.

...