如何用react三纤维在react js中旋转整个画布

Question

我遵循了关于如何使用react three-fiber制作可滚动网站的codrops教程。

我对它进行了很大的修改，将所有项目居中，并删除了RGB分割效果。现在我想旋转整个滚动区域/画布，以实现类似于此页面的对角线滚动效果。是否可以只旋转整个滚动区域，或者我是否必须使用mesh.rotate.z=。。。等等

完整示例代码

将一切结合在一起的代码：

function App() {
const scrollArea = useRef()
const onScroll = e => (state.top.current = e.target.scrollTop)
useEffect(() => void onScroll({ target: scrollArea.current }), [])
return (
<>
<Canvas className="canvas" concurrent pixelRatio={1} orthographic camera={{ zoom: 
state.zoom, position: [0, 0, 500] }}>
<Suspense fallback={<Dom center className="loading" children="Loading..." />}>
<Content />
<Startup />
</Suspense>
</Canvas>
<div className="scrollArea" ref={scrollArea} onScroll={onScroll}>
{new Array(state.sections).fill().map((_, index) => (
<div key={index} id={"0" + index} style={{ height: `${(state.pages / 
state.sections) * 47}vh` }} />//site length
))}
</div>
<div className="frame">
<div className="frame__links">
<a className="frame__link" href="http://tympanus.net/Tutorials/PhysicsMenu/">
Work
</a>
<a className="frame__link" href="https://tympanus.net/codrops/?p=45441">
About
</a>
</div>
</div>
</>
)}

Answer 1

我通过将我的内容放入一个组中来解决这个问题，然后像这样旋转：

<group rotation-z={0.025} rotation-y={0.0} rotation-x={0.05}>