Three JS Examples : 9. Three Js Ghost Card Animation

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.

Three js docs

---

Three Js Ghost Card 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

view raw how_to_use_three_js_in_react.md hosted with ❤ by GitHub

---

---

---

Best Post

1. How to create a Scroll to top button in React

2. CSS 3D Isometric Social Media Menu Hover Effects

1. Input Box Shake on Invalid Input

2. Beautiful SVG Cat Animation in React

---

---

For more information

1. Subscribe my Youtube Channel
   https://www.youtube.com/@democode

2. Check out my Fiver profile if you need any freelancing work
   https://www.fiverr.com/amit_sharma77

3. Follow me on Instagram
   https://www.instagram.com/fromgoodthings/

4. Check out my Facebook Page
   Programming memes by Coder

5. Linktree
   https://linktr.ee/jonSnow77

---

---

---

Cmd commands that show you are a hacker

Jon Snow ・ Apr 24 '23

#webdev #programming #productivity

---

---

Follow us on Google News

https://news.google.com/publications/CAAqBwgKMLiXzAsw6LLjAw/