<mesh>, <boxGeometry>, and <meshStandardMaterial> in React Three Fiber

In React Three Fiber (R3F), you define your 3D scene using JSX, which then gets translated into Three.js objects. The core components for creating a visible 3D object are <mesh>, a geometry component (like <boxGeometry>), and a material component (like <meshStandardMaterial>).

<mesh>

The <mesh> component is the fundamental building block for displaying 3D objects in R3F. It acts as a container for a geometry and a material. In Three.js terms, it creates a THREE.Mesh object.

<mesh>
  <!-- Geometry goes here -->
  <!-- Material goes here -->
</mesh>

<boxGeometry>

<boxGeometry> is an R3F component that represents a THREE.BoxGeometry. It defines the shape of a cube or cuboid. You pass arguments to its constructor using the args prop.

• args={[width, height, depth]}: Defines the dimensions of the box.

<boxGeometry args={[1, 1, 1]} /> <!-- Creates a 1x1x1 unit cube -->

<meshStandardMaterial>

<meshStandardMaterial> is an R3F component that represents a THREE.MeshStandardMaterial. This is a physically based rendering (PBR) material, meaning it accurately simulates how light interacts with surfaces, resulting in more realistic visuals. It requires lights in the scene to be visible.

• color: Sets the base color of the material (e.g., "hotpink", "#ff00ff", or a hexadecimal number like 0xff00ff).
• roughness: (0.0 to 1.0) How rough the surface is. Lower values make the surface shinier.
• metalness: (0.0 to 1.0) How metallic the surface is.

<meshStandardMaterial color="hotpink" roughness={0.5} metalness={0.1} />

Example: A Basic Box in R3F

This example shows how to create a simple 3D box using these components within a React Three Fiber <Canvas>. Remember that this code needs to be run within a React project setup with R3F installed.

import React from 'react';
import { Canvas } from '@react-three/fiber';

function MyBox() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  );
}

export default function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <MyBox />
    </Canvas>
  );
}