Three.js meshGroup 移动后无法返回

Question

我正在尝试将 meshGroup 向右移动，然后再向后移动。但是一旦 meshGroup 被移动，它就不能再移动，就像只能向右或向左移动一样，它工作正常，但一旦移动它就不会向左或向右移动。我正在使用 meshGroup.position.x 做运动，这里是代码：

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)
            }
            })
        }

它们被用在两个点击事件中：

<div style={{ position: "absolute" }}>
        {drawer?null:display1Fade}

        {drawer?null:<Button style={{
            position: 'absolute',
            backgroundColor: 'black',
            height: '60px',
            marginLeft: '16px',
            marginTop: '16px',
            zIndex: 1
        }} onClick={() => {
            setDrawer(true);
            //mainMeshGroup.position.x+=50
            moveMeshRight(mainMeshGroup)
        }}>

        </Button>}
      <div className={drawer?classes.displayButtonDivMove:classes.displayButtonDiv}>
          {<div className={detail?classes.displayButtonExpand1:classes.displayButton}
                onClick={()=>{
                    setDisplay1(true);
                    setDrawer(false);
                    moveMeshLeft(mainMeshGroup)
                }}>
              Display Type 1</div>}
          {<div style={{marginLeft: '10px'}} className={detail?classes.displayButtonExpand2:classes.displayButton} onClick={()=>{setDisplay1(false);setDrawer(false)}}>Display Type 2</div>}
      </div>

Answer 1

这是一个完整的示例，演示了通过两个按钮控制的简单 left/right 动画：

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>
<div>
  <button id="btn-left">
    Left
  </button>
  <button id="btn-right">
    Right
  </button>
</div>

Three.js meshGroup 移动后无法返回

Three.js meshGroup once moved can't move back

three.js

gsap