How to prevent camera motion updates using aframe grid system

Question

I'm trying to introduce an Aframe system that prevents the camera moving into certain parts of the scene by overlaying a grid on the scene, and preventing motion into cells of the grid that are marked as full.

Right now I'm only checking one dimension (z axis) for whether the camera is in the vicinity of a sphere. The current code moves the camera back to a last permitted position when the camera is detected to be in a cell of the grid that it's not supposed to be.

component, system registration



AFRAME.registerSystem('gridsystem', {
    init: function () {
        // start with 1d

        this.grid = Array(20).fill(0)
        // set the sphere at 5
        this.grid[5] = 1
        this.camera = {}
        // stop motion a quarter of a grid from a boundary
        this.boundarydist = 2
    },
    registerCam: function (el) {
        let v = new THREE.Vector3()
        console.log(el)
        this.camera.e = el
        console.log(el.object3D.position)
        el.object3D.getWorldPosition(v)
        this.camera.v = v
        this.lastpermitted = this.camera.v.z
    },
    // abstract this into multiple dimensions later
    checkPosition: function () {
        // 
        // find position that the camera is in
        // convert z position 
        // need to make it possible to handle positive and negative
        let z = this.camera.e.object3D.position.z
        for (let sign of [-1, 1]) {
            let index = Math.floor(z + sign * this.boundarydist)
            if (this.grid[index] == 1) {
                // we proceeded into a grid we shouldn't be
                console.log("bumped into")
                this.camera.e.object3D.position.z = this.lastpermitted
                return
            }

        }
        this.lastpermitted = this.camera.e.object3D.position.z



    }

})

AFRAME.registerComponent("gridsystem", {
    init: function () {
        this.system.registerCam(this.el)
        setInterval(() => {
            this.system.checkPosition()
        }, 100)
    }
})

scene markdown


<a-scene>
  <a-entity
    id="sphere"
    geometry="primitive: sphere"
    material="color: tomato; shader: flat"
    position="0 0.15 5"
    light="type: point; intensity: 5"
    />
    <a-entity id="camera" camera  wasd-controls gridsystem look-controls />
</a-scene>

Question

Instead I would like to prevent the initial camera change position happening if the motion would place the camera in a non permitted cell.

How should introduce a function to get called when a particular existing component (camera in this case) has its attributes updated?

Diego Marcos Diego Marcos · Accepted Answer · 2020-03-15T21:01:34

Check for invalid camera positions in the tick method and disable the sources of camera movement when met conditions. wasd-controls and look-controls in the supplied example.

How to prevent camera motion updates using aframe grid system

Question

1 Answers