Travel in and Out of 3D Objects Using React-Three-Fiber | by Jennifer Fu | Jun, 2022

Exploring textures from inside and outside 3D objects

Travel in and out of the rotating sphere with different textures on both sides.
Picture by writer — The skin texture is from https://en.wikipedia.org/wiki/File:Blue_Marble_2002.png, and the within texture is from https://en.wikipedia.org/wiki/File:Equirectangular_projection_SW.jpg

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.

The mustard field image
Picture by writer

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.

The mustard field image that is split to four connecting sub-images
Picture by writer

Right here is public/sky.jpg:

The sky image
Picture by writer

Right here is public/grass.jpg:

The grass image
Picture by writer

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 of meshBasicMaterial (line 31).
  • the Field element (traces 6–37) calls useFrame to carry out rotation (traces 16–22). It defines a mesh (traces 25–35), which features a field/dice (line 26) with width, top, and depth 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 fabric facet is ready to THREE.FrontSide.
  • Field is displayed on Canvas (traces 41–48), which renders three’s elements. Canvas units the digicam’s props to be fov: 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.
Watch the rotating cube from outside.
Picture by auther

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 to THREE.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.
Watch the rotating cube from inside.
Picture by writer

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 to THREE.DoubleSide.
  • Execute npm begin. We journey out and in of the dice.
Travel in and out of the rotating cube.
Picture by writer

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.

Equirectangular projection of the world
Picture from https://en.wikipedia.org/wiki/File:Equirectangular_projection_SW.jpg

Right here is src/App.js:

  • At line 6, the equirectangular map is loaded for the feel, which is ready to the map prop of meshBasicMaterial (line 20).
  • The Sphere element (traces 5–23) calls useFrame to carry out rotation (traces 9–15). It defines a mesh (traces 18–21), which features a sphere (line 19) with radius, widthSegments, and heightSegments outlined as [3, 64, 32].
  • The fabric (line 20) is configured with meshBasicMaterial, the place facet is ready to THREE.FrontSide.
  • Sphere is displayed on Canvas (traces 27–34), which renders three’s elements. Canvas units the digicam’s props to be fov: 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.
Watch the rotating cube from outside.
Picture by writer — The feel is from https://en.wikipedia.org/wiki/File:Equirectangular_projection_SW.jpg

Journey contained in the sphere by transferring the digicam place.

Right here is src/App.js:

  • At line 20, the fabric facet is ready to THREE.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.
Watch the rotating cube from inside.
Picture by writer — The feel is from https://en.wikipedia.org/wiki/File:Equirectangular_projection_SW.jpg

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 to THREE.DoubleSide.
  • Execute npm begin. We journey out and in of the sphere.
Travel in and out of the rotating sphere.
Picture by writer — The feel is from https://en.wikipedia.org/wiki/File:Equirectangular_projection_SW.jpg

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.

True-color satellite image of Earth in equirectangular projection
Picture from https://en.wikipedia.org/wiki/File:Blue_Marble_2002.png

Right here is src/App.js:

  • At traces 5–34, the Sphere element takes two props, mapName and facet.
  • At line 43, the primary Sphere is positioned in Canvas with textures/map2.png for the frontside.
  • At line 44, the second Sphere is positioned in Canvas with textures/map.jpeg for the bottom.
  • Execute npm begin. We journey out and in of the sphere with totally different textures on each side.
Travel in and out of the rotating sphere with different textures on both sides.
Picture by writer — The skin texture is from https://en.wikipedia.org/wiki/File:Blue_Marble_2002.png, and the within texture is from https://en.wikipedia.org/wiki/File:Equirectangular_projection_SW.jpg

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.

More Posts