首页 > 解决方案 > 如何使用框架网格系统防止相机运动更新

问题描述

我正在尝试引入一个 Aframe 系统,该系统通过在场景上覆盖网格来防止相机移动到场景的某些部分,并防止运动进入标记为已满的网格单元格。

现在我只检查相机是否在球体附近的一维(z 轴)。当前代码在检测到相机位于不应位于的网格单元中时将相机移回最后允许的位置。

组件,系统注册



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)
    }
})

场景降价


<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>

问题

相反,如果运动会将相机放置在不允许的单元格中,我想防止发生初始相机更改位置。

当特定的现有组件(在这种情况下为相机)更新其属性时,应该如何引入一个函数来调用?

标签: aframe

解决方案


在tick 方法中检查无效的相机位置,并在满足条件时禁用相机移动源。提供的示例中的wasd-controlslook-controls


推荐阅读