npm init -y
npm install react@18 react-dom@18.2 react-scripts@5.0

  "scripts": {
    "dev": "react-scripts start",
    "build": "react-scripts build",
    }

src/index.js
import { createRoot } from "react-dom/client";
import "./style.css";
// 拿到root節(jié)點(diǎn)
const root = createRoot(document.querySelector("#root"));

npm install three@0.145 @react-three/fiber@8.8

  <>
    <group>
      <mesh position={[1, 2, 3]} rotation-x={0.5}>
        {/* 幾何體和材料會(huì)和mesh默認(rèn)關(guān)聯(lián) */}
        <boxGeometry></boxGeometry>
        <meshBasicMaterial color="red" />
      </mesh>
      <mesh>
        <sphereGeometry></sphereGeometry>
        <meshBasicMaterial color="red" />
      </mesh>
    </group>
    {/* 對于group和mesh會(huì)是group.add的關(guān)系
        而boxGeometry和MeshBasicMaterial會(huì)以mesh.boxGeometry的形式添加到mesh
 */}
  </>

#root {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    <Canvas>
      <mesh>
        <torusKnotGeometry />
        <meshNormalMaterial />
      </mesh>
    </Canvas>

     <mesh position={[2, 0, 0]} scale={1.5}>
        <sphereGeometry args={[1.5, 32, 32]} />
        <meshBasicMaterial color="mediumpurple" wireframe />
      </mesh>

  <mesh position-x={2} scale={1.5}>

import { useThree, extend, useFrame } from "@react-three/fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
extend({ OrbitControls }); //orbitControls在jsx中使用的名稱

  const { camera, gl } = useThree();
 return (
    <>
     <orbitControls args={[camera, gl.domElement]} />//注意這里是小寫開頭
	</>
	)

export default function CustomObject() {
  const verticesCount = 10 * 3; //要10個(gè)三角形 每個(gè)三角形有3個(gè)頂點(diǎn)
  const position = new Float32Array(verticesCount * 3); //每個(gè)頂點(diǎn)有3個(gè)值 x y z
  for (let i = 0; i < verticesCount * 3; i++) {
    position[i] = (Math.random() - 0.5) * 3; // * 3為了讓三角形不那么小
  }
  return (
    <mesh>
      <bufferGeometry>
        <bufferAttribute
          attach="attributes-position"
          count={verticesCount}
          itemSize={3}
          array={position}
        />
      </bufferGeometry>
       <meshBasicMaterial side={THREE.DoubleSide} />
      //將材料設(shè)置為雙面都可見
    </mesh>
  );
}

    <Canvas
      gl={{
        antialias: true,
        toneMapping: THREE.ACESFilmicToneMapping,
        outputEncoding: THREE.sRGBEncoding,//色調(diào)編碼 更好地存儲(chǔ)顏色 最好使用sRGBEncoding
      }}
      //使用正交相機(jī)
      // orthographic
      camera={{
        fov: 45,
        near: 0.1,
        far: 200,
        position: [2, 3, 3],
      }}
    >

#root {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* 改背景顏色 */
    background: lightblue;
}