Profile PictureBalazs Farago Dev
Open menu

Three.js React Three Fiber Bentó

January 31, 2024

React Three Fiber használata egy kezdő feladatban

A feladatban egy egyszerű bemutatót készítünk, amely megmutatja, hogyan kezdjünk neki egy alapvető projektnek a React Three Fiber és a Vite használatával TypeScript nyelven. A projekt célja egy egyszerű "bento" doboz létrehozása, amelynek egyik részét interaktívan mozgathatjuk.

Befejezett feladat itt

Szükséges csomagok telepítése

POWERSHELL
npm create vite@latest

Válaszd a react + typescript + SWC

POWERSHELL
npm install three @types/three @react-three/fiber

A projekt miatt, még szükséges a következők instalálása:

POWERSHELL
@react-three/drei @react-three/csg

App.tsx létrehozása

Iportálások:

  • Canvas: a 3D elemeket tartalmazza majd.

    • Canvas komponensek:

  • gl: a webgl renderelő beállításait tartalmazza, mint az ‘antilasa’ élsimitást
  • camera: a kamera tulajdonságai, mint a látószög és pozíció
  • shadow: az árnyékokat engedélyezi.
    • TYPESCRIPT
    //App.tsx
    import { Canvas } from "@react-three/fiber";
    import { Scene } from "./Scene";
    import { ACESFilmicToneMapping, sRGBEncoding } from "three";
    

    function App() {
      return (
        <Canvas
          dpr={[1, 2]}
          gl={{
            antialias: true,
            toneMapping: ACESFilmicToneMapping,
            outputEncoding: sRGBEncoding,
          }}
          camera={{
            fov: 10,
            near: 0.1,
            far: 200,
            position: [0, 9, 9],
          }}
          shadows
        >
          <Scene />
        </Canvas>
      );
    }
    

    export default App;

    Scene.tsx

    Az előbb létrehozott canvas-hoz most hozzáadjuk a 3D elemeket. Először egy egyszerű kockát hozunk létre a new Three.BoxGeometry, hogy teszteljük a környezetet.

  • A OrbitControls komponens beállítása, amely a felhasználói interakciókat kezeli.
  • A directionalLight és ambientLight elemek hozzáadása, amelyek a színtér világítását biztosítják.
    • TYPESCRIPT
    //Scene.tsx
    import { OrbitControls, PivotControls } from "@react-three/drei";
    import { Base, CSGGeometryRef, Geometry } from "@react-three/csg";
    import * as THREE from "three";
    import { useRef } from "react";
    const box = new THREE.BoxGeometry();
    

    function Scene() {
      const csg = useRef<CSGGeometryRef>(null);
    

      return (
        <>
          <OrbitControls makeDefault />
    

          <directionalLight
            position={[-2, 2, 3]}
            intensity={0.8}
            castShadow
            shadow-mapSize={[1024 * 2, 1024 * 2]}
          />
          <ambientLight intensity={0.2} />
          <mesh receiveShadow castShadow>
            <Geometry ref={csg}>
              <Base name="base" geometry={box} scale={[1.4, 0.2, 2]}></Base>
            </Geometry>
            <meshStandardMaterial color="#A1662F" envMapIntensity={0.05} />
          </mesh>
        </>
      );
    }
    

    export { Scene };

    Amennyiben a környezet megfelelően működik elkészítjük az egyszerű bentó tároló dobozunkat.

    Itt először hozzáadunk egy sík lapot, amin az árnyékok jelnnek majd meg.

    TYPESCRIPT
    //Plane.tsx
    function Plane() {
      return (
        <mesh
          rotation-x={-Math.PI / 2}
          position={[0, -0.1, 0]}
          scale={[10, 10, 10]}
          receiveShadow
        >
          <planeGeometry />
          <shadowMaterial transparent opacity={0.4} />
        </mesh>
      );
    }
    

    export { Plane };

    Adjuk hozzá a Scene.tsx-hez a plane-t

    TYPESCRIPT
    //Scene.tsx
    import { Plane } from "./components/Plane";
    

    ...
    

    <ambientLight intensity={0.2} />
    <Plane />
    

    ...

    Létrehozzuk a kivágások alapját. Aminek a pozícióját és a méretét minden meghívásnál tudunk majd módosítani

    TYPESCRIPT
    //SubtractBox.tsx
    import { Geometry, Subtraction } from "@react-three/csg";
    import * as THREE from "three";
    

    const box = new THREE.BoxGeometry();
    

    type SubtractBoxProps = {
      position?: [number, number, number];
      scale?: [number, number, number];
    };
    

    const SubtractBox: React.FC<SubtractBoxProps> = (props) => (
      <Subtraction {...props}>
        <Geometry>
          <Subtraction geometry={box} />
        </Geometry>
      </Subtraction>
    );
    export { SubtractBox };

    Hozzáadjuk a Scene.tsx-hez a létrehozott kivágásunkat. A kivágásunkhoz egy irányítót is adunk ami engedi, hogy mozgathassuk.

    TYPESCRIPT
    //Scene.tsx
    import { SubtractBox } from "./components/SubtractBox";
    

    ...
    

    <mesh receiveShadow castShadow>
         <Geometry ref={csg}>
              <Base name="base" geometry={box} scale={[1.4, 0.2, 2]}></Base>
              <PivotControls
                activeAxes={[true, true, true]}
                scale={0.2}
                anchor={[0, 0, 0]}
                onDrag={() => {
                  if (csg.current) {
                    csg.current.update();
                  }
                }}
              >
    						<SubtractBox position={[0, 0.2, 0]} scale={[1.2, 0.4, 1]} />
              </PivotControls>
         </Geometry>
         <meshStandardMaterial color="#A1662F" envMapIntensity={0.05} />
    </mesh>
    

    ...

    Az alap testhez hozzáadhatunk több kivágást is, hogy megkapjuk a bentó dobozunkat

    Hova haladhatunk tovább

    Ez egy elég alap program, de egy jó kezdő pont react three fiber-hez és a 3D környezet megértéséhez node.js-ben.

    Code

    A teljes kód megtalálható:

    https://github.com/balazsfaragodev/r3f-vite-ts-bento

    Oszd meg ezt a cikket

    Merülj el az izgalmas tudásban, amíg a buszra vársz!

    Indítsd a napod a legújabb technológiai áttörésekkel. Csatlakozz most, és merülj el az innovációban!

    Kapcsolódó Cikkek