Help me webXr

Hello I am a developer who has just started developing webXR.

We are currently testing and implementing Quest 2.

I want to move the headset's camera, but there is no change even if I change the camera position.

Below is my code. Any problem?

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FlyControls } from "three/examples/jsm/controls/FlyControls";
import { PointerLockControls } from "three/examples/jsm/controls/PointerLockControls";
import { VRButton } from "@/assets/js/customVrButton";
import { XRControllerModelFactory } from "three/examples/jsm/webxr/XRControllerModelFactory";
/**
 * 하나의 오브젝 구현체
 */

class WebglBase {
  renderer;
  scene;
  camera;
  animateInterface = () => {};
  axesHelper;
  directLigthHelper;
  option = {};
  ui;
  count = 0;
  rootEl;
  clock = new THREE.Clock();
  deletaTime;

  constructor(el, option) {
    this.rootEl = el;
    if (option) {
      this.ui = option.ui;
    }
    this.createRander();
    this.scene = new THREE.Scene();
    const directionalLight = new THREE.DirectionalLight(0xffffff, 13);
    this.scene.add(directionalLight);
    this.camera = new THREE.PerspectiveCamera(75, 800 / 600, 0.1, 1000);

    this.axesHelper = new THREE.AxesHelper(5);
    this.directLigthHelper = new THREE.DirectionalLightHelper(
      directionalLight,
      3
    );
    this.camera.position.x = 3;
    this.camera.position.y = 2;
    this.camera.position.z = 5;
    directionalLight.position.x = 5;
    directionalLight.position.y = 8;

    this.option = this.setOption(option);
    el.appendChild(this.renderer.domElement);
    this.animate();
  }

  createRander() {
    this.renderer = new THREE.WebGL1Renderer(this.rootEl);
    this.renderer.setSize(
      this.rootEl.offsetWidth - 10,
      this.rootEl.offsetHeight - 10
    );
  }

  onAxesHellper() {
    if (this.scene) {
      this.scene.add(this.axesHelper);
    }
  }
  offAxesHellper() {
    if (this.scene) {
      this.scene.remove(this.axesHelper);
    }
  }
  ondirectionalLightHellper() {
    if (this.scene) {
      this.scene.add(this.directLigthHelper);
    }
  }
  offdirectionalLightHellper() {
    if (this.scene) {
      this.scene.remove(this.directLigthHelper);
    }
  }

  setAnimateInterface(f) {
    if (typeof f == "function") {
      this.animateInterface = f;
    }
  }

  setOption(option) {
    let responseOption = undefined;
    if (option) {
      if (option["vrmod"]) {
        this.vrmod();
      }

      if (option["OrbitControls"] && !this.option.controller) {
        responseOption = this.OrbitControls();
      }

      if (option["FlyControls"] && !this.option.controller) {
        console.log("공사중");
      }
      if (
        option["PointerLockControls"] &&
        !this.option.controller &&
        !option["vrmod"]
      ) {
        responseOption = this.PointerLockControls();
      }
    }
    return responseOption;
  }

  vrmod() {
    this.renderer.xr.enabled = true;
    const model = new XRControllerModelFactory();
    // const vrButton = new THREE.VRButton(renderer.domElement);
    const vrB = VRButton.createButton(this.renderer);
    this.rootEl.appendChild(vrB);
    const vrbutton = document.getElementById("VRButton");
    vrbutton.style.opacity = 0.8;
    const controller1 = this.renderer.xr.getController(0);
    const controller2 = this.renderer.xr.getController(1);
    this.scene.add(controller1);
    this.scene.add(controller2);
    const controllerGrip1 = this.renderer.xr.getController(0);
    const controllerGrip2 = this.renderer.xr.getController(1);
    controllerGrip1.add(model.createControllerModel(controllerGrip1));
    controllerGrip2.add(model.createControllerModel(controllerGrip2));
    this.scene.add(controllerGrip1);
    this.scene.add(controllerGrip2);
  }

  OrbitControls() {
    const option = {
      controllerType: "OrbitControls",
      controller: new OrbitControls(this.camera, this.renderer.domElement),
      controllerUpdate: true,
    };
    return option;
  }

  PointerLockControls() {
    const option = {
      controllerType: "PointerLockControls ",
      controller: new PointerLockControls(this.camera, document.body),
      controllerUpdate: false,
    };

    document.addEventListener("keydown", (event) => {
      if (this.option.controller.isLocked) {
        switch (event.code) {
          case "KeyW": // W 키: 앞으로 이동
            this.option.controller.moveForward(+1);
            break;
          case "KeyS": // S 키: 뒤로 이동
            this.option.controller.moveForward(-1);
            break;
          case "KeyA": // A 키: 왼쪽으로 이동
            this.option.controller.moveRight(-1);
            break;
          case "KeyD": // D 키: 오른쪽으로 이동
            this.option.controller.moveRight(+1);
            break;
        }
      }
    });
    this.rootEl.addEventListener(
      "click",
      function () {
        this.option.controller.lock();
      }.bind(this)
    );
    return option;
  }

  FlyControls() {
    const controls = new FlyControls(this.camera, this.renderer.domElement);
    controls.movementSpeed = 50;
    controls.rollSpeed = Math.PI / 24;
    controls.autoForward = false;
    controls.dragToLook = true;
    const option = {
      controllerType: "FlyControls",
      controller: controls,
      controllerUpdate: true,
    };
    return option;
  }
  animate() {
    const render = () => {
      if (this.option && this.option.controllerUpdate) {
        this.option.controller.update();
      }

      const session = this.renderer.xr.getSession();
      if (session) {
        console.log(session);
        const inputs = session.inputSources;
        for (var c = 0; c < inputs.length; c++) {
          let gamepad;
          let axesArray;
          if (inputs[c].handedness == "right") {
            // const camera = this.camera;
            const camera = this.renderer.xr.getCamera();
            console.log(camera.position);
            const direction = new THREE.Vector3();
            camera.getWorldDirection(direction);
            gamepad = inputs[c].gamepad;
            axesArray = gamepad.axes;
            //x축
            direction.x = camera.position.x + axesArray[2];
            this.camera.position.x = 1;
            //y축
            direction.y = camera.position.y + axesArray[3];
            camera.position.add(direction);
          }
        }
      }

      this.renderer.render(this.scene, this.camera);
      this.deletaTime = this.clock.getDelta();
    };
    this.renderer.setAnimationLoop(render.bind(this));
  }

  getCamera() {
    return this.camera;
  }
  getScene() {
    return this.scene;
  }
  setScene(scene) {
    this.scene = scene;
  }
  handleController() {}
}

class WebglObject {
  lodding = false;
  constructor() {
    this.objLoader = new OBJLoader();
    this.gtlLoader = new GLTFLoader();
  }

  openObject(path) {
    this.lodding = true;
    let loader;
    // let index = path.search(/\..*?$/);
    let index = path.lastIndexOf(".");
    let extension;
    if (index == -1) {
      console.log("확장자가 존재하지 않습니다 다시 확인후 시도 해주세요");
      return;
    }
    index += 1;
    extension = path.substring(index);
    switch (extension.toLowerCase()) {
      case "obj":
        loader = this.objLoader;
        break;
      case "gltf":
        loader = this.gtlLoader;
        break;
      default:
        break;
    }
    loader.load(path, (obj) => {
      this.obj = obj;
      this.lodding = false;
    });
  }

  isObjEntiy() {
    let result = true;
    if (this.lodding) {
      console.log("obj가 로드중입니다.");
      result = false;
    }
    if (!this.obj) {
      console.log("obj를 먼저 로드 해주세요");
      result = false;
    }
    return result;
  }

  getObj = () => {
    if (this.isObjEntiy()) {
      return this.obj;
    }
  };

  getScene() {
    if (this.isObjEntiy()) {
      return this.obj.scene;
    }
  }

  getAnimation() {
    const anmations = [];
    if (this.obj.animations.length > 0) {
      this.obj.animations.forEach((a) => {
        const m = new THREE.AnimationMixer(this.getScene());
        m.clipAction(a).play();
        anmations.push(m);
      });
    }
    return anmations;
  }
}

export { WebglBase, WebglObject };