To bring 3D objects into your Three.js scene in React, you start by understanding the core building blocks: geometries and meshes. A geometry defines the shape of an object, such as a box, sphere, or cylinder. A mesh combines this geometry with a material (which gives the object color and appearance) and is what actually gets rendered in the scene.

For instance, to create a simple box (cube), you use the BoxGeometry class. To make a sphere, you use SphereGeometry. After creating the geometry and a material (like MeshBasicMaterial), you combine them into a mesh. Here is how you might create a basic cube and sphere in a React component:

// Inside your React Three.js setup
const geometry = new THREE.BoxGeometry(1, 1, 1); // width, height, depth
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32); // radius, widthSegments, heightSegments
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

// Add these meshes to your scene
scene.add(cube);
scene.add(sphere);

You can create many different shapes using the available geometry classes in Three.js. Each geometry can be customized with parameters like size and detail. Once you have created your mesh, you can position it anywhere in the scene, rotate it, or scale it to change its size.

In a React app, you often want your 3D objects to respond to state changes. This means you can update properties like position, rotation, or scale of a mesh whenever your React state changes. For example, if you keep a position in your component's state, you can update the mesh's position whenever the state updates.

Suppose you have a state variable called cubePosition in your React component:

const [cubePosition, setCubePosition] = useState({ x: 0, y: 0, z: 0 });

// Later, in your rendering or animation loop:
cube.position.set(cubePosition.x, cubePosition.y, cubePosition.z);

Whenever cubePosition changes (for example, in response to user input), the cube will move to the new position in the 3D scene. The same approach works for rotation and scale:

// For rotation:
cube.rotation.set(rotation.x, rotation.y, rotation.z);

// For scale:
cube.scale.set(scale.x, scale.y, scale.z);

By connecting React state to these properties, you can make your 3D scene interactive and dynamic. This pattern allows you to use all the familiar React state management tools to control your Three.js objects, keeping your UI and 3D scene in sync.