Using Three.js with React

Three.js is a popular JavaScript library for creating 3D graphics in the browser. When combined with React, it allows you to create rich, interactive 3D applications. This lesson will guide you through the process of integrating Three.js with React.

To get started, you will need to set up a React project with Three.js. Follow these steps:

1. Install Node.js if you haven't already.
2. Create a new React project using Create React App:

npx create-react-app my-three-app

3. Navigate to your project directory:

cd my-three-app

4. Install Three.js:

npm install three

Here’s a simple example of how to create a spinning cube with Three.js in a React component:

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';

const SpinningCube = () => {
    const mountRef = useRef(null);

    useEffect(() => {
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        mountRef.current.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        const animate = () => {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        };

        animate();

        return () => {
            mountRef.current.removeChild(renderer.domElement);
        };
    }, []);

    return 
;
};

export default SpinningCube;
                

Once you're comfortable with the basics, consider exploring more advanced features:

• Using shaders for advanced materials.
• Loading 3D models using THREE.GLTFLoader.
• Implementing physics using libraries like cannon-es or ammo.js.

Here are some best practices for using Three.js with React:

1. Keep Three.js logic encapsulated within custom hooks or components.
2. Optimize rendering with requestAnimationFrame.
3. Use React.memo or PureComponent to prevent unnecessary re-renders.
4. Handle window resizing to maintain aspect ratio.