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

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

mesh.rotation.y=window.pageYOffset

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

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

恐怕这是不对的。在许多应用中，投影矩阵实际上是静态的。

three.js

中的相机是一个类似网格的3D对象。您可以修改

位置

或

旋转

属性以对其进行变换

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

let摄影机、场景、渲染器；
init（）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（40，窗内宽度/（窗内高度*2），0.1,10）；
摄像机位置设置（0,0,7）；
const geometry=new THREE.BoxBufferGeometry（）；
const material=新的三个.MeshNormalMaterial（）；
常量网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
渲染器.setSize（window.innerWidth，window.innerHeight*2）；
document.body.appendChild（renderer.doElement）；
//gsap
gsap.registerPlugin（滚动触发器）；
gsap.to（网格旋转{
滚动触发器：{
触发器：“#触发器”，
开始：“顶上”，
结束：“自下而上”，
是的，
toggleActions：“重新启动暂停-恢复暂停”
},
y:数学
});
}
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}

正文{
边际：0px；
}
帆布{
显示：块；
}
#触发{
位置：绝对位置；
身高：100%；
}

---

我对gsap不熟悉，你会如何处理vanilla js？我猜是onscroll函数和ReuqeStationFrame？我的意思是，对于普通的persp相机，“你必须更新投影矩阵”-如果你想将它的运动连接到光标悬停，例如，无论如何，对象是一种不同的动物