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

Question

我想在页面滚动时旋转一个对象，但无法使其正常工作。到目前为止，我在页面加载时更新对象的旋转是:

mesh.rotation.y = window.pageYOffset;

然而，这只会在页面加载时更新对象，而不会在滚动时进一步更新它。我知道对于相机你必须更新投影矩阵才能在对象/网格上有一个交互式相机但是这似乎是默认打开的(mesh.updateMatrix)，我仍然无法让它工作。我做错了什么？

Answer 1

I know that for the camera you have to update the projection matrix to be able to have an interactive camera,

恐怕这是不对的。在许多应用中，投影矩阵实际上是静态的。 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>