Three Js Journey with React


What is a Three Js?

Three Js Journey –Three. JS is a cross-browser JavaScript library/API which is used to create and animate 3D computer graphics to display in a web browser.

It’s one type of a single JavaScript file and includes features like effects, scenes, cameras, lights, sky, materials, meshes, shaders, animations, and 3D objects.


Three Js Journey With React


🔸 React – Three js Setup🔸


    ➖ create-react-app three-js (npm create vite@latest)

  👉 Add dependency

    ➖ npm i three

    ➖ npm i @react-three/fiber

    ➖ npm i @react-three/drei

    ➖ npm i gsap

    ➖ npm i @react-three/cannon // physics: 3D library

🔸Add dependency All in one🔸

    👉 npm i three @react-three/fiber @react-three/drei @react-three/cannon gsap


Documentation

Most use Geometry

 🔸    Basic Setup three js    🔸


App.js


    <Canvas>
      <ambientLight intensity={0.1} />
      <directionalLight color="red" position={[0, 0, 5]} />
      <mesh>
      <boxGeometry />
      <meshStandardMaterial />
     </mesh>
    </Canvas>

Output :

BoxGeometry

Multiple Geometry Example


    <Canvas>
      <ambientLight intensity={0.1} />
      <directionalLight color="blue" position={[0, 0, 5]} />
      <mesh>
        <boxGeometry args={[5, 5, 4]} />
        <meshStandardMaterial color="blue" />{/*width ,height, depth */}
      </mesh>
      <mesh>
        <sphereGeometry args={[3, 10, 10]} />  {/*radius ,widthSegments, heightSegments */}
        <meshStandardMaterial color="red" />
      </mesh><mesh>
        <planeGeometry args={[20, 20]} />  {/*width ,height */}
        <meshStandardMaterial color="black" />
      </mesh>
    </Canvas>
Mutiple Geometry--Three Js Journey

BoxGeometry(1,1,1)  

width — Width; that is, the length of the edges parallel to the X axis. Optional; defaults to 1.

height — Height; that is, the length of the edges parallel to the Y axis. Optional; defaults to 1.

depth — Depth; that is, the length of the edges parallel to the Z axis. Optional; defaults to 1.

widthSegments — Number of segmented rectangular faces along the width of the sides. Optional; defaults to 1.

heightSegments — Number of segmented rectangular faces along the height of the sides. Optional; defaults to 1.

depthSegments — Number of segmented rectangular faces along the depth of the sides. Optional; defaults to 1.


SphereGeometry(1,10,10)

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

radius — sphere radius. Default is 1.

widthSegments — number of horizontal segments. Minimum value is 3, and the default is 32.

heightSegments — number of vertical segments. Minimum value is 2, and the default is 16.

phiStart — specify horizontal starting angle. Default is 0.

phiLength — specify horizontal sweep angle size. Default is Math.PI * 2.

thetaStart — specify vertical starting angle. Default is 0.

thetaLength — specify vertical sweep angle size. Default is Math.PI.

The geometry is created by sweeping and calculating vertexes around the Y axis (horizontal sweep) and the Z axis (vertical sweep). Thus, incomplete spheres (akin to ‘sphere slices’) can be created through the use of different values of phiStart, phiLength, thetaStart and thetaLength, in order to define the points in which we start (or end) calculating those vertices.


PlanGeometry(20,20)

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

width — Width along the X axis. Default is 1.

height — Height along the Y axis. Default is 1.

widthSegments — Optional. Default is 1.

heightSegments — Optional. Default is 1.


Three js Resources:


I hope you like this article.

Also Read :