2

I wanted to know how to have a Aframe Component for any entity that define if the entity is seen by the camera, like a bool attribute.

"isSeen"= true || false

I tried with trigonometry (knowing the rotation of the camera, and the Entities' positions), but I failed.

Felox
  • 503
  • 3
  • 10
  • 23

1 Answers1

3

How about frustums: checking out if a point(x, y ,z) is within the camera's field of view .

The code is quite simple. To use it within a-frame, You could create a component, which will check if the point is seen on each render loop:

AFRAME.registerComponent('foo', {
  tick: function() {
   if (this.el.sceneEl.camera) {
      var cam = this.el.sceneEl.camera
      var frustum = new THREE.Frustum();
      frustum.setFromMatrix(new THREE.Matrix4().multiplyMatrices(cam.projectionMatrix, 
      cam.matrixWorldInverse));  

      // Your 3d point to check
      var pos = new THREE.Vector3(x, y, z);
      if (frustum.containsPoint(pos)) {
        // Do something with the position...
      }
   }
  }
}

Check it out in my fiddle

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
  • Thanks ! It kind of work when I added the entity position " var pos = new THREE.Vector3(this.el.getAttribute("position").x, this.el.getAttribute("position").y, this.el.getAttribute("position").z); " but it keep non-selecting element that have a part in the scene (everything around the corners) how to enlarge the selection ? – Felox Apr 18 '18 at 19:02
  • @FelixJely i'll try to make an example after work, but i'd use .intersectsBox() to check if the camera fov is moving on an item, and at the same time check the center point (when the object is in the FOV, not intersecting with the borders) – Piotr Adam Milewski Apr 19 '18 at 10:46