Hey Reader,
This is the first post of 3D-web3 Series.
Where we can learn about creating a 3D space (including pshysics) in our web and connecting to the blockchain using web3 libraries.
1 - Vite config and basic three.js
2 - Three.js (fiber & drei) - web3 serie
3 - Cannon physics
4 - Web3
Vite is a modern, blazing-fast tool for scaffolding and bundling projects. It has quickly become popular due to near-instant code compilation and rapid hot module replacement.
Vite uses "Rollup.js" internally for bundling (is in charge of configuration) and esbuild as pre-bundle dependency (which is written in Go).
-- @Notice create-react-app uses "Webpack" internally for bundling --
It has been developed by "Evan You" who also created the "Vue.js" framework.
Set-up - open consol in your projects directory and run
npm create vite@latest my-three-react-web3-app --template react
// Follow consol instructions and select -> React -> React
// ("You're also able to use Vanilla, Vue, Svelte... and JS or TS")
cd my-three-react-web3-app
npm install
npm run dev
Check vite docs
npm i three
Three.js is an open source JavaScript library to create and display animated 3D computer graphics in a web browser using WebGL.
We'll use Threejs only to take some built-in objects (we'll use it more in next articles)
npm i @react-three/fiber
To simplify development process, we'll be working with @react-three/fiber. Which is a React renderer for threejs on the web and react-native.
The renderer is responsible for rendering React components to the DOM and native views. This means that we are able to create regular React components and let react-three-fiber handle converting those components into three.
"Fiber allows as to avoid threejs set up to render any 3D object"
First render
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.js
import { Canvas } from '@react-three/fiber'
import Box from './components/Box'
import './App.css'
function App() {
return (
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>
)
}
export default App
Following Box and Sphere components, will use Hooks to simplify code logic.
useRef to attach to "mesh" which is a built-in "DOM element" by fiber, which allows to manipulate the object inside.
useFrame calls you back every frame, which is good for running effects, updating controls, etc. You receive the state and a clock delta.
useState to change scale and color when objects is clicked.
Box.js
import React, { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'
const Box = (props) => {
// This reference will give us direct access to the mesh
const mesh = useRef()
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
// Subscribe this component to the render-loop, rotate the mesh every frame
// Adding rotation grade per each frame
useFrame((state, delta) => {
mesh.current.rotation.x += 0.01
mesh.current.rotation.y += 0.01
})
// Return view, these are regular three.js elements expressed in JSX
return (
<mesh
{...props}
ref={mesh}
scale={active ? 1.5 : 1}
onClick={(e) => {
setActive(!active)
setHover(!hovered)
}}
>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'green' : 'blue'} />
</mesh>
)
}
export default Box;
Sphere.js
Works as Box component, unique difference is inside mesh element
import React, { useRef, useState } from 'react'
import { useFrame } from '@react-three/fiber'
function Sphere(props) {
// This reference gives us direct access to the THREE.Mesh object
const ref = useRef();
// Hold state for hovered and clicked events
const [hovered, setHover] = useState(false);
const [active, setActive] = useState(false);
// Subscribe this component to the render-loop, rotate the mesh every frame
// Adding rotation grade per each frame
useFrame((state, delta) => (ref.current.rotation.y += 0.01));
// Return the view, these are regular Threejs elements expressed in JSX
return (
<mesh
{...props}
ref={ref}
scale={active ? 4 : 1}
onClick={(e) => {
setActive(!active);
setHover(!hovered);
}}
>
<sphereBufferGeometry args={[0.7, 30, 30]} attach="geometry" />
<meshBasicMaterial
wireframe
attach="material"
color={hovered ? "yellow" : "pink"}
/>
</mesh>
);
}
export default Sphere;
I am making a series developing this App, new post coming soon.
SandBox demo @Notice Code is not splited in components as in our Vite App
Click on 3D objects
Serie follows at 3D web - Three.js (fiber & drei) - web3 serie Check demo in the bottom!
I hope it has been helpful.
Top comments (0)