Three.js meshGroup once moved can't move back

Question

I am trying to move a meshGroup to the right, and then move it back. But once the meshGroup is moved it can not move again, like only move to the right or left it works fine, but once it is moved it won't move back to the left or right. I am using meshGroup.position.x to do the movement, here is the code:

const moveMeshRight = (mainMeshGroup:Group) => {
            gsap.to(mainMeshGroup.position, {
                duration: 0.5,
                x: 115,
                onUpdate:()=>{
                    console.log(mainMeshGroup.position)
                }
            })
            gsap.to(mainCamera.position,{
                duration:0.5,
                z:500
            })
        }

        const moveMeshLeft = (mainMeshGroup:Group) => {
            gsap.to(mainMeshGroup.position, {
                duration: 0.5,
                x:-115,
                onUpdate:()=>{
                console.log(mainMeshGroup.position)
            }
            })
        }

They are used in two click event:


        {drawer?null:display1Fade}

        {drawer?null:}
      
          {{
                    setDisplay1(true);
                    setDrawer(false);
                    moveMeshLeft(mainMeshGroup)
                }}>
              Display Type 1}
          {{setDisplay1(false);setDrawer(false)}}>Display Type 2}

user_5250847 · Answer

Here is a complete example that demonstrate simple left/right animations controlled via two buttons:

let camera, scene, renderer;

let group;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 4;

  scene = new THREE.Scene();

  group = new THREE.Group();
  scene.add(group);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh(geometry, material);
  group.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const btnLeft = document.getElementById('btn-left');
  btnLeft.addEventListener('pointerdown', moveLeft);

  const btnRight = document.getElementById('btn-right');
  btnRight.addEventListener('pointerdown', moveRight);

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}

function moveLeft() {

  gsap.to(group.position, {
    duration: 1,
    x: -1
  });

}

function moveRight() {

  gsap.to(group.position, {
    duration: 1,
    x: 1
  });

}

body {
    margin: 0px;
}
div {
  position: absolute;
  width: 100%;
  text-align: center;
}

Three.js meshGroup once moved can't move back

1 Answers