AR.JS - GLTF 模型在标记上晃动

如何解决AR.JS - GLTF 模型在标记上晃动

我正在开发一个基于 Three.js 的项目，我尝试使用基于标记的 ar.js 库添加增强现实。

我正在使用 hiro 模式并且它很受欢迎

但是3D mdel(GLTF) 在标记上晃动

我想尽可能多地解决它不使用A-frame。

这里是Hiro Pattern Link

和我的测试网址 https://hs-test-server.kr/test/basic2.html

和我的代码

  const clock = new THREE.Clock();

  let scene,camera,renderer,light;
  let artoolkitSource,artoolkitContext;
  let mixer;

  init();

  function init() {
    scene = new THREE.Scene();

    camera = new THREE.Camera();
    scene.add(camera);

    light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

    renderer = new THREE.Webglrenderer({
      antialias : true,alpha: true,});

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth,window.innerHeight);
    
    document.body.appendChild(renderer.domElement);

    artoolkitContext = new THREEx.artoolkitContext({
      cameraParametersUrl: 'build/camera_para.dat',detectionMode: 'mono'
    });

    artoolkitContext.init(() => {
      camera.projectionMatrix.copy(artoolkitContext.getProjectionMatrix());
    });

    artoolkitSource = new THREEx.artoolkitSource({
      sourceType : 'webcam',});

    function handleResize() {
      artoolkitSource.onResize();
      artoolkitSource.copySizeto(renderer.domElement);

      if (artoolkitContext.arController) {
        artoolkitSource.copySizeto(artoolkitContext.arController.canvas);
      }
    }

    artoolkitSource.init(() => {
      setTimeout(() => {
        tick();
        handleResize();
        [].slice.call(document.querySelectorAll('.invisible')).forEach((elm) => {
          elm.classList.remove('invisible');
        });
      },200);
    });

    window.addEventListener('resize',handleResize,{
      passive: true
    });

    const markerRoot = new THREE.Group();

    scene.add(markerRoot);

    const arMarkerControls = new THREEx.ArMarkerControls(artoolkitContext,markerRoot,{
      type: 'pattern',patternUrl: 'pattern-files/pattern-hiro.patt'
    });

    const loader = new THREE.GLTFLoader();
    const url = './models/clova.gltf';

    loader.load(
      url,(gltf) => {
        const animations = gltf.animations;
        const model = gltf.scene;

        if (animations && animations.length) {
          mixer = new THREE.Animationmixer(model);
          markerRoot
          for (let i = 0; i < animations.length; i++) {
            const animation = animations[i];
            const action = mixer.clipAction(animation);

            action.play();
          }
        }

        model.scale.set(2,2,2);
        model.position.set(0,0);
        markerRoot.add(gltf.scene);
      },(err) => {
        console.error(err);
      }
    );
  }

  function update() {
    if (artoolkitSource.ready) {
      artoolkitContext.update(artoolkitSource.domElement);
    }

    if (mixer) {
      mixer.update(clock.getDelta());
    }
  }

  function render() {
    renderer.render(scene,camera);
  }

  function tick() {
    update();
    render();
    requestAnimationFrame(tick);
  }