Exploring textures from inside and outside 3D objects

We now have written about three.js fundamentals, 3D modeling, color textures, and environment textures via reflection and refraction.
On this article, we’re going to apply textures inside and outside 3D objects, and discover examples to journey out and in of 3D objects.
We reused the Create React App working environment in the previous article, put in with the next packages:
- three.js (
three
): It’s a 3D JavaScript library that renders 3D content material on a webpage. It goals to create an easy-to-use, light-weight, cross-browser, general-purpose 3D library. - react-three-fiber (
@react-three/fiber
): It’s a React renderer for 3.js. It permits us to put in writing three.js utilizing JSX, which is extra declarative. The React wrapper additionally handles a whole lot of issues behind the scene, reminiscent of canvas resizing and disposing of unmounted objects. @react-three/drei
: It’s a assortment of helpful helpers for rendering react-three-fiber. It makes it simpler to make use of many varieties of objects, reminiscent of cameras, controls, photos, shapes, 3D fashions, environments, and so on.
Step-by-step, we journey out and in of 3D objects with the next examples:
In three.js, texture is created by making use of a picture to a floor, or as a mirrored image or refraction map. A dice wants six photos to assemble the textures of the six faces. These photos are specified within the following order: pos-x
, neg-x
, pos-y
, neg-y
, pos-z
, and neg-z
.
We use the picture of a mustard discipline.

Cut up it into 4 information, and identify them mustard1.jpg
, mustard2.jpg
, mustard3.jpg
, and mustard4.jpg
. Put them below the public/textures
folder.

Right here is public/sky.jpg
:

Right here is public/grass.jpg
:

These DIY photos usually are not excellent, however they’re adequate to show the idea.
Just like examples in the texture article, we have a look at the dice from the surface utilizing the next src/App.js
:
We now have explained in detail what three.js is and the way it works in React. A mesh is a kind of object that’s triangular polygon mesh based mostly. It’s the skeleton that makes up the determine of 3D objects. It’s outlined by geometry (form), materials (floor), and scene (placement).
- Within the above code, the feel photos are loaded at traces 7–14. Every texture is ready to the
map
prop ofmeshBasicMaterial
(line 31). - the
Field
element (traces 6–37) callsuseFrame
to carry out rotation (traces 16–22). It defines amesh
(traces 25–35), which features a field/dice (line 26) withwidth
,top
, anddepth
outlined as[3, 3, 3]
. - The supplies (traces 27–34) are configured with
meshBasicMaterial
, a cloth for drawing geometries that aren’t affected by lights. At line 32, the fabricfacet
is ready toTHREE.FrontSide
. Field
is displayed onCanvas
(traces 41–48), which renders three’s elements.Canvas
units thedigicam
’s props to befov: 70, close to: 0.01, far: 100, place: [0, 0, 6]
(line 42), and it occupies the entire viewport with a sky-blue background (line 43).- Execute
npm begin
. We watch on the digicam place at[0, 0, 6]
, outdoors of the field.

Step contained in the dice is simple — merely transfer the digicam place inside the field.
Right here is src/App.js
:
- At line 32, the fabric
facet
is ready toTHREE.BackSide
. - At line 42, the digicam is situated at
[0, 0, 1]
. - Execute
npm begin
. We watch on the digicam place at[0, 0, 1]
, inside the field.

We are able to have a look at the dice from the inside and outside. It permits us to journey out and in of the dice. Two issues are wanted to attain it:
- Transfer the digicam round out and in of the dice.
- Make the fabric each sided.
Right here is src/App.js
:
- In
useFrame
(traces 17–34), the digicam strikes in every invocation. It strikes from the within of the dice to the surface. Whether it is too far again (z
is past 8 at line 23), it strikes ahead and travels within the dice. Whether it is too shut (z
reaches 1 at line 25), it strikes backward and travels out of the dice. This motion is repeated. - At line 44, the fabric
facet
is ready toTHREE.DoubleSide
. - Execute
npm begin
. We journey out and in of the dice.

We now have projected a reflect/refract map on the surface of a sphere. Right here, we apply a picture on to the sphere floor.
For the reason that sphere floor shouldn’t be flat, an equirectangular map is required. The equirectangular map is a 2D picture that tasks a curved floor of a globe on a airplane.
The next equirectangular picture is downloaded from Wikipedia, and it’s positioned below the public/textures
folder as map.jpeg
.

Right here is src/App.js
:
- At line 6, the equirectangular map is loaded for the feel, which is ready to the
map
prop ofmeshBasicMaterial
(line 20). - The
Sphere
element (traces 5–23) callsuseFrame
to carry out rotation (traces 9–15). It defines amesh
(traces 18–21), which features a sphere (line 19) withradius
,widthSegments
, andheightSegments
outlined as[3, 64, 32]
. - The fabric (line 20) is configured with
meshBasicMaterial
, the placefacet
is ready toTHREE.FrontSide
. Sphere
is displayed onCanvas
(traces 27–34), which renders three’s elements.Canvas
units thedigicam
’s props to befov: 70, close to: 0.01, far: 100, place: [0, 0, 6]
(line 28), and it occupies the entire viewport with a lightweight sky blue background (line 29).- Execute
npm begin
. We watch the digicam place at[0, 0, 6]
, outdoors of the sphere.

Journey contained in the sphere by transferring the digicam place.
Right here is src/App.js
:
- At line 20, the fabric
facet
is ready toTHREE.BackSide
. - At line 28, the digicam is situated at
[0, 0, 1]
. - Execute
npm begin
. We watch the digicam place at[0, 0, 1]
, inside the sphere.

Just like the dice, we are able to journey out and in of the sphere. All we have to do is to maneuver the digicam round and make the fabric each sided.
Right here is src/App.js
:
- In
useFrame
(traces 9–26), the digicam strikes in every invocation. It strikes from inside the sphere to outdoors. Whether it is too far again (z
is past 8 at line 23), it strikes ahead and travels within the sphere. Whether it is too shut (z
reaches 1 at line 25), it strikes backward and travels out of the sphere. This motion is repeated. - At line 44, the fabric
facet
is ready toTHREE.DoubleSide
. - Execute
npm begin
. We journey out and in of the sphere.

We now have put coloration map on the frontside, bottom, and each side. How can we present totally different textures for the frontside and bottom?
With the intention to do this, we have to create two objects — one reveals the frontside and the opposite one reveals the bottom.
We use the sphere as an example how it’s achieved. First, obtain the equirectangular picture for the opposite facet, and place it below the public/textures
folder as map2.png
.

Right here is src/App.js
:
- At traces 5–34, the
Sphere
element takes two props,mapName
andfacet
. - At line 43, the primary
Sphere
is positioned inCanvas
withtextures/map2.png
for the frontside. - At line 44, the second
Sphere
is positioned inCanvas
withtextures/map.jpeg
for the bottom. - Execute
npm begin
. We journey out and in of the sphere with totally different textures on each side.

We now have proven code examples to have a look at textures from inside and outside 3D objects. Additionally it is doable to use totally different textures to inside and outside 3D objects. By transferring the digicam, we are able to journey out and in of the 3D objects.
Thanks for studying. I hope this was useful. In case you are , take a look at my other Medium articles.