Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.
Making a 2D RPG game with react-three-fiber
Florent Lagrede ・ Oct 22 '20
Three JS Cube Animation
Source code
How to use Three JS in React JS
React-three-fiber is a React renderer for three.js
Installing react-three-fiber
npm install three @react-three/fiber
Create your first geometry
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
function Box(props) {
// This reference gives us direct access to the THREE.Mesh object
const ref = useRef()
// Hold state for hovered and clicked events
const [hovered, hover] = useState(false)
const [clicked, click] = useState(false)
// Subscribe this component to the render-loop, rotate the mesh every frame
useFrame((state, delta) => (ref.current.rotation.x += delta))
// Return the view, these are regular Threejs elements expressed in JSX
return (
<mesh
{...props}
ref={ref}
scale={clicked ? 1.5 : 1}
onClick={(event) => click(!clicked)}
onPointerOver={(event) => hover(true)}
onPointerOut={(event) => hover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
)
}
createRoot(document.getElementById('root')).render(
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>,
)
Output
For more information
Check my GitHub profile
https://github.com/amitSharma7741Subscribe my Youtube Channel
https://www.youtube.com/@democodeCheck out my Fiver profile if you need any freelancing work
https://www.fiverr.com/amit_sharma77Follow me on Instagram
https://www.instagram.com/fromgoodthings/Check out my Facebook Page
Programming memes by CoderLinktree
https://linktr.ee/jonSnow77
Top comments (0)