在three.js中的页面滚动上旋转网格

Question

我想在页面滚动时旋转一个对象，但我不能让它正常工作。 到目前为止，我在页面加载时更新对象的旋转是：

mesh.rotation.y = window.pageYOffset;

然而，这只会在页面加载时更新对象，而不是在滚动时进一步更新它。 我知道对于相机，您必须更新投影矩阵才能在对象/网格上拥有交互式相机，但这似乎默认情况下（mesh.updateMatrix），我仍然无法使其工作。我做错了什么？

Answer 1

我知道对于相机，您必须更新投影矩阵才能拥有交互式相机，

恐怕这是不对的。在许多应用中，投影矩阵实际上是静态的。 three.js 中的相机是一个类似于网格的 3D 对象。您可以修改position 或rotation 属性以对其进行转换。

查看以下实时示例，该示例展示了如何通过 GSAP 在滚动时为立方体设置动画：

let camera, scene, renderer;

init();
animate();

function init() {

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / ( window.innerHeight * 2 ), 0.1, 10);
  camera.position.set(0, 0, 7);

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

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

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

  // gsap

  gsap.registerPlugin(ScrollTrigger);

  gsap.to(mesh.rotation, {
    scrollTrigger: {
    trigger: "#trigger",
    start: "top top",
    end: "bottom top",
    scrub: true,
    toggleActions: "restart pause resume pause"
  },
    y: Math.PI
  });

}


function animate() {

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

body {
    margin: 0px;
}
canvas {
    display: block;
}
#trigger {
    position: absolute;
    height: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.122/build/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>  

<div id="trigger">

</div>