Three.js

Three.js Style Sheet

Installation

1. Install Three.js and React Three Fiber packages via npm or yarn:

npm install three @react-three/fiber

The three package provides the core Three.js library, and @react-three/fiber is a React renderer for Three.js that simplifies integration with React components.

2. Import required components and hooks in your React component:

import { Canvas } from '@react-three/fiber'; 
import { OrbitControls, PerspectiveCamera, Box } from '@react-three/drei';

The Canvas component from @react-three/fiber provides the Three.js scene setup and rendering for React components. The OrbitControls, PerspectiveCamera, and Box are commonly used components from @react-three/drei for camera controls, camera setup, and 3D object creation, respectively.

Basic Scene Setup

function ThreeJSComponent() {   
	return (     
		<Canvas>       
			<PerspectiveCamera position={[0, 0, 5]} />       
			<ambientLight intensity={0.5} />       
			<pointLight position={[10, 10, 10]} />       
			{/* Add 3D objects and components here */}     
		</Canvas>   
	); 
}

The Canvas component sets up the Three.js scene and handles rendering. The PerspectiveCamera component defines the camera's position in 3D space. The ambientLight and pointLight components add lighting to the scene.

Adding 3D Objects

Box

<Box args={[1, 1, 1]} position={[0, 0, 0]} />

The Box component creates a 3D box with the specified dimensions (width, height, and depth) and position.

Sphere

<mesh>   
	<sphereGeometry args={[1, 32, 32]} />   
	<meshStandardMaterial color="blue" /> 
</mesh>

The <mesh> component groups a 3D object's geometry and material. The sphereGeometry defines the sphere's size and resolution, and meshStandardMaterial sets the object's material properties, such as color.

Camera and Controls

function ThreeJSComponent() {   
	return (     
		<Canvas>       
			<PerspectiveCamera position={[0, 0, 5]} />       
			<OrbitControls />       
			{/* ... */}     
		</Canvas>   
	); 
}

The PerspectiveCamera defines the camera's position and perspective within the 3D scene. The OrbitControls component allows users to interactively control the camera's position and rotation.

Styling 3D Objects

<mesh>   
	<boxGeometry args={[1, 1, 1]} />   
	<meshStandardMaterial color="blue" /> 
</mesh>

The <mesh> component groups a 3D object's geometry and material. The boxGeometry defines the box's dimensions, and meshStandardMaterial sets the object's material properties, such as color.

Animations

<mesh rotation={[0, time * 0.2, 0]}>   
	<boxGeometry args={[1, 1, 1]} />   
	<meshStandardMaterial color="blue" /> 
</mesh>

The rotation property animates the rotation of the 3D object. time is a variable that provides the current timestamp, allowing smooth animations based on time.

Textures

<mesh>   
	<boxGeometry args={[1, 1, 1]} />   
	<meshStandardMaterial map={texture} /> 
</mesh>

The meshStandardMaterial component accepts a map property, which allows you to apply a texture to the 3D object. The texture variable would be a loaded texture image.

Conclusion

This cheat-sheet provides a basic overview of using Three.js with React. With Three.js and React Three Fiber, you can create interactive and visually appealing 3D scenes and objects within your React applications. Explore the extensive capabilities of Three.js and React Three Fiber to unleash the full potential of 3D web development. Happy coding!