Keep the model in the center of the screen about arjs-gestures HOT 5 CLOSED

You could use the markerFound event to detect when the marker is visible and then read the world position of the model so you can place whatever you want in that position of the screen.

For easier handling, you will probably need two references of the model so you can initially show it on top of the marker and then hide it and show a different one in that world position.

Check out here how to use three.js in a-frame:

https://aframe.io/docs/1.2.0/introduction/developing-with-threejs.html

And here's how to get world position of a 3D object in three.js:

https://threejs.org/docs/#api/en/core/Object3D.getWorldPosition

from arjs-gestures.

Thanks for answering，I try first

from arjs-gestures.

oh , I finished，Thanks!

from arjs-gestures.

@hahaxiaowai could you share an example of how you achieved this?

from arjs-gestures.

@hahaxiaowai could you share an example of how you achieved this?

My way of implementation may not be what you want，I just add the model to it when the markerFound is triggered，Then change the model's rotate and scale accordingly when handleRotation and handleScale are triggered

this.el.sceneEl.addEventListener("markerFound", (e) => {
      this.isVisible = true;
      const scene = document.querySelector("a-scene").object3D;
      const loader = new THREE.GLTFLoader();

      loader.load("building.gltf",  (gltf)=> {
        const model = gltf.scene;
        model.position.set(0, 0, -10);
        model.scale.set(0.0005, 0.0005, 0.0005);
        model.traverse(function (child) {
          // if ( child.isMesh ) child.material.envMap = envMap;
        });
        this.model = model;
        scene.add(model);
      });
    });

from arjs-gestures.