如何在React JS中使用react-three-fiber旋转整个画布？

Question

我按照Codrops教程学习了如何使用react-three-fiber创建可滚动网站。

我进行了相当大的改动，将所有项居中并移除了RGB分离效果。现在，我想要旋转整个滚动区域/画布以实现类似这个页面的对角线滚动效果。是否可能仅旋转整个scrollArea，还是必须旋转每个组件并使用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>

</>
)}

- Lalaland124

Answer 1

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

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

- Lalaland124

---

你可以通过点击勾选来接受自己的答案。这也会对其他人有所帮助。 - Nice Books