学习 three.js (Part 3: react-three-fiber)

[nonocast]

ref: pmndrs/react-three-fiber: 🇨🇭 A React renderer for Three.js 通过r3f可以通过tag的方式来写threejs

1. yarn create viteproject name: hello
2. yarn add three @react-three/fiber
3. yarn dev

App.jsx

import { Canvas } from '@react-three/fiber'
import './App.css'

function App() {
  return (
    <>
      <div className="canvas-container">
        <Canvas camera={{ position: [5, 3, 5], fov: 75 }}>
          <ambientLight intensity={0.5} />
          <directionalLight position={[0, 5, 5]} />
          <mesh>
            <boxGeometry args={[2, 2, 2]} />
            <meshStandardMaterial color="red" />
          </mesh>
        </Canvas>
      </div>
    </>
  );
}

export default App

App.css

.canvas-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.canvas-container canvas {
  display: block;
}

增加orbit control,

import { Stats, OrbitControls } from '@react-three/drei'

<Canvas camera={{ position: [5, 3, 5], fov: 75 }}>
  ...
  <OrbitControls />
  <Stats />
</Canvas>