Как сделать барьери в a-frame?

Question

[valeriy bagriy]

Проблема заключается в том, что при соприкосновении с барьерами в VR сцене происходит «телепортация» назад, вместо того чтобы просто остановить движение на границе барьера.И не всегда барьери работають кроме:

minX: { type: 'number', default: MIN_X },
        maxX: { type: 'number', default: MAX_X },
        minY: { type: 'number', default: MIN_Y },
        maxY: { type: 'number', default: MAX_Y },
        minZ: { type: 'number', default: MIN_Z },
        maxZ: { type: 'number', default: MAX_Z },

Но постоянно с barrier идет все не так,сейчас если буду смотреть вперед и прямо смогу пройти сквозь них.Спасибо за ответи

Вот код VR

<a-entity
                    id="camera"
                    ref={cameraRef}
                    position={`${position?.x ?? -9.5} ${position?.y ?? 1.6} ${position?.z ?? 0}`}
                    camera="far: 1000; near: 0.1"
                    look-controls="enabled: true; reverseMouseDrag: false; touchEnabled: true; sensitivity: 0.5"
                    wasd-controls="acceleration: 35"
                    rotation="0 0 0"
                    cursor="rayOrigin: mouse"
                    raycaster="objects: .raycastable"
                    visible="false"
                    limit-my-distance="
                        minX: -10.5; maxX: 0.5;
                        minZ: -3.5; maxZ: 1.8;
                        minY: -20; maxY: 20;
                        doorMinX: -10.5; doorMaxX: -8.5;
                        doorMinZ: -20; doorMaxZ: -3.5;
                        barrierMinX: -3.50; barrierMaxX: 0.707;
                        barrierMinZ: -0.1; barrierMaxZ: 1.0;
                        barrierMinX2: -11; barrierMaxX2: -6.8;
                        barrierMinZ2: 1.1; barrierMaxZ2: 0;
                    "
                ></a-entity>

Логика берьеров

import 'aframe';

const MIN_X = -10.5;
const MAX_X = 0.5;
const MIN_Z = -3.5;
const MAX_Z = 1.8;
const MIN_Y = -20;
const MAX_Y = 20;

AFRAME.registerComponent('limit-my-distance', {
    schema: {
        minX: { type: 'number', default: MIN_X },
        maxX: { type: 'number', default: MAX_X },
        minY: { type: 'number', default: MIN_Y },
        maxY: { type: 'number', default: MAX_Y },
        minZ: { type: 'number', default: MIN_Z },
        maxZ: { type: 'number', default: MAX_Z },
        doorMinX: { type: 'number', default: -10.7 },
        doorMaxX: { type: 'number', default: -8.3 },
        doorMinZ: { type: 'number', default: -20.5 },
        doorMaxZ: { type: 'number', default: -3.3 },
        barrierMinX: { type: 'number', default: -3.30 },
        barrierMaxX: { type: 'number', default: 0.707 },
        barrierMinZ: { type: 'number', default: -1.0 },
        barrierMaxZ: { type: 'number', default: 1.0 },
        barrierMinX2: { type: 'number', default: -11 },
        barrierMaxX2: { type: 'number', default: -6.8 },
        barrierMinZ2: { type: 'number', default: 0 },
        barrierMaxZ2: { type: 'number', default: 1.1 },

        barrierMinX3: { type: 'number', default: -10.75 },
        barrierMaxX3: { type: 'number', default: -10.65 },
        barrierMinZ3: { type: 'number', default: -7.5 },
        barrierMaxZ3: { type: 'number', default: -16.07 },

        barrierMinX4: { type: 'number', default: -8.11 },
        barrierMaxX4: { type: 'number', default: -8.01 },
        barrierMinZ4: { type: 'number', default: -7 },
        barrierMaxZ4: { type: 'number', default: -4.25 },
    },
    init: function () {
        this.passedThroughDoor = false;
    },
    tick: function () {
        const position = this.el.object3D.position;
        const data = this.data;

        const inRoom =
            position.x >= data.minX &&
            position.x <= data.maxX &&
            position.z >= data.minZ &&
            position.z <= data.maxZ;
        const inDoorArea =
            position.x >= data.doorMinX &&
            position.x <= data.doorMaxX &&
            position.z >= data.doorMinZ &&
            position.z <= data.doorMaxZ;

        if (inDoorArea) {
            this.passedThroughDoor = true;
        }

        if (inRoom) {
            this.passedThroughDoor = false;
        }

        if (!inRoom && !inDoorArea && !this.passedThroughDoor) {
            if (position.x < data.minX) position.x = data.minX;
            if (position.x > data.maxX) position.x = data.maxX;
            if (position.z < data.minZ) position.z = data.minZ;
            if (position.z > data.maxZ) position.z = data.maxZ;
        }

        this.limitWithinBarrier(position, data.barrierMinX, data.barrierMaxX, data.barrierMinZ, data.barrierMaxZ);
        this.limitWithinBarrier(position, data.barrierMinX2, data.barrierMaxX2, data.barrierMinZ2, data.barrierMaxZ2);
        this.limitWithinBarrier(position, data.barrierMinX3, data.barrierMaxX3, data.barrierMinZ3, data.barrierMaxZ3);
        this.limitWithinBarrier(position, data.barrierMinX4, data.barrierMaxX4, data.barrierMinZ4, data.barrierMaxZ4);


        if (position.y < data.minY) position.y = data.minY;
        if (position.y > data.maxY) position.y = data.maxY;
    },
    limitWithinBarrier: function (position, minX, maxX, minZ, maxZ) {
        const inBarrier =
            position.x >= Math.min(minX, maxX) &&
            position.x <= Math.max(minX, maxX) &&
            position.z >= Math.min(minZ, maxZ) &&
            position.z <= Math.max(minZ, maxZ);

        if (inBarrier) {
            const distLeft = Math.abs(position.x - minX);
            const distRight = Math.abs(position.x - maxX);
            const distFront = Math.abs(position.z - minZ);
            const distBack = Math.abs(position.z - maxZ);

            const minDist = Math.min(distLeft, distRight, distFront, distBack);

            if (minDist === distLeft) {
                position.x = minX;
            } else if (minDist === distRight) {
                position.x = maxX;
            } else if (minDist === distFront) {
                position.z = minZ;
            } else if (minDist === distBack) {
                position.z = maxZ;
            }
        }
    },
});

export default AFRAME.components['limit-my-distance'];

Суть в том что мне нужно много робочих барьеров.