Preventing the camera entering entities in A-Frame

Question

I have <a-scene> using A-Frame that includes many randomly placed spheres (<a-sphere>) and a camera rig. The spheres are centred at random (x,y,z) coordinates at initialisation (and are at different locations on each access to the web page). The user can move the camera with a controller or wasd keys through the scene. I want to prevent the camera from entering any of the spheres.

It seems that I should be able to do that either using a nav mesh or a physics engine. For the former, I need guidance on whether it is possible to construct a nav mesh that excludes many spheres (and just those spheres) and if so, how. With the physics engine, it seems a heavyweight way of dealing with the problem, since the spheres are static. Any advice or examples?

Finally, when the camera hitting the sphere is detected, what is the best way of actually preventing it from entering? Do I reposition the camera using javascript?

Answer 1

The best way is to use nav-mesh. Basically nav-mesh is a 3d plane where it has slots positioned in place of where camera movement is restricted.

If you want some simplified code for nav-mesh use this

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

<!-- import the deprecated Geometry part -->
<script src="https://threejs.org/examples/js/deprecated/Geometry.js"></script>

<!-- before this tries to use its API -->
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.js"></script>

<a-scene>
  <a-entity id="rig" movement-controls="constrainToNavMesh: true;" foo>
    <a-entity id="camera" camera position="0 1.6 0" look-controls></a-entity>
  </a-entity>
  <a-plane nav-mesh rotation="-90 0 0" width="5" height="5" color="yellow"></a-plane>
  <a-plane rotation="-90 0 0" width="25" height="25" color="blue" position="0 -0.01 0"></a-plane>
</a-scene>

Here instead of aframe primitive as navmesh you can use navemesh created by 3D modelling

To create a basic nav-mesh use blender software. In that create a mesh(plane) and cut slots using knife tool there. To get positioning of spheres download the 3d model in aframe as gltf import in blender and check it

navmesh example code.This example by AdaRoseCannon has endrosed all use cases in using nav-mesh

Here in AdaRoseCannon's example they have excluded holes in nav-mesh with a class name you can use this approach to cut dynamic holes .The a-plane entity here can be dynamically set too

<a-entity id="head"
        camera="near:0.01;"
        look-controls="pointerLockEnabled: false"
        position="0 1.65 0"
        wasd-controls="acceleration:20;"
        simple-navmesh-constraint="navmesh:.navmesh;fall:0.5;height:1.65;exclude:.navmesh-hole;"
      ></a-entity>
<a-plane rotation="-90 0 0" width="1.2" height="0.6" class="navmesh-hole" visible="false"></a-plane>

Answer 2

Synn kindly wrote a component that did what I needed:

     /*
         * prevent the camera from entering a 3d entity
         * coded by Synn ( https://github.com/chabloz )
         */
        AFRAME.registerComponent('sphere-collider-constraint', {
            schema: {
                selector: {
                    default: '',
                },
                distance: {
                    default: 0.5,
                },
            },

                init: function () {
                    this.lastPosition = new THREE.Vector3()
                    this.el.object3D.getWorldPosition(this.lastPosition)

                    this.myPos = new THREE.Vector3()
                    this.el.object3D.getWorldPosition(this.myPos)

                    this.targetPos = new THREE.Vector3()
                },

                tick: function () {
                    // if haven't moved since last tick, do nothing
                    this.el.object3D.getWorldPosition(this.myPos)
                    if (this.myPos.distanceTo(this.lastPosition) === 0) return

                    let didHit = false

                    for (const obj of document.querySelectorAll(this.data.selector)) {
                        obj.object3D.getWorldPosition(this.targetPos)
                        const distanceTo = this.myPos.distanceTo(this.targetPos)
                        if (distanceTo <= obj.components.geometry.data.radius + this.data.distance) {
                            didHit = true
                            break
                        }
                    }
                    if (didHit) {
                        this.el.object3D.position.copy(this.lastPosition)
                        this.el.object3D.parent.worldToLocal(this.el.object3D.position)
                    } else {
                        this.el.object3D.getWorldPosition(this.lastPosition)
                    }
                },
            })

Then use it in something like this:

            <a-entity id="cameraRig" movement-controls="fly: true; speed: 0.7" sphere-collider-constraint="selector: .node">
                <a-camera id="camera" look-controls="pointerLockEnabled: true">
                </a-camera>
            </a-entity>