Exploring textures from outside and inside 3D objects
We have written about three.js fundamentals, 3D modeling, color textures, and environment textures via reflection and refraction.
In this article, we are going to apply textures outside and inside 3D objects, and explore examples to travel in and out of 3D objects.
We reused the Create React App working environment in the previous article, installed with the following packages:
- three.js (
- react-three-fiber (
@react-three/fiber): It is a React renderer for three.js. It allows us to write three.js using JSX, which is more declarative. The React wrapper also handles a lot of things behind the scene, such as canvas resizing and disposing of unmounted objects.
@react-three/drei: It is a collection of useful helpers for rendering react-three-fiber. It makes it easier to use many types of objects, such as cameras, controls, images, shapes, 3D models, environments, etc.
Step by step, we travel in and out of 3D objects with the following examples:
In three.js, texture is created by applying an image to a surface, or as a reflection or refraction map. A cube needs six images to construct the textures of the six faces. These images are specified in the following order:
We use the image of a mustard field.
Split it into four files, and name them
mustard4.jpg. Put them under the
These DIY images are not perfect, but they are good enough to prove the concept.
Similar to examples in the texture article, we look at the cube from the outside using the following