How to load and apply textures in three.js
Share
Three.js is a JavaScript library that renders animations on the web. It makes use of WebGL for this purpose. Before we can apply texture to a scene, we need to understand how to create a scene in three.js.
TextureLoader to achieve this task.
Syntax
Here's the syntax to initialize, load, and apply a texture to a material:
//initializationconst loader = new THREE.TextureLoader();//loading textureconst texture = loader.load ('textures/texture.png')//initializing materialconst material = new THREE.MeshPhongMaterial();//setting material propertymaterial.map = texture;
- Line 5: This line shows the texture is loaded. When the texture is not very detailed, it loads instantly. Otherwise, callback functions are used.
- Line 11: This line shows the texture is mapped to the material. Here, we use
map. However, many methods can be used to apply texture.
Example
We will use SphereGeometry and add material to it. We will also add lighting to the scene to illuminate the sphere. The scene will look something like this:
Our goal is to make this scene into a shot of Earth from space. Therefore, we'll use the following texture files for this scene:
Now, we'll apply the texture to the sphere and make it transparent. We'll also create another sphere right underneath the previous one and set its color to blue. The scene will look like the following and can be viewed by clicking "Run". The scene will take a while to render everything because it has to load and apply textures to the objects.
import React from 'react';
require('./style.css');
import ReactDOM from 'react-dom';
import App from './app.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Explanation
The example shown above is explained below:
import * as THREE from 'three'// Loading texturesconst loader = new THREE.TextureLoader();const earth = loader.load('textures/earth.png')const backgroup = loader.load('textures/background.png')// Canvasconst canvas = document.querySelector('canvas.webgl')// Sceneconst scene = new THREE.Scene()scene.background = background;// Objectsconst geometry_one = new THREE.SphereGeometry( 1, 36, 16 );const geometry_two = new THREE.SphereGeometry(0.99, 36, 16);// Materials//For the outer sphereconst material_one = new THREE.MeshPhongMaterial()material_one.color = new THREE.Color(0x00ff00)material_one.map = earth;material_one.transparent = true;//For the inner sphereconst material_two = new THREE.MeshPhongMaterial();material_two.color = new THREE.Color(0x0000ff)// Meshconst sphere_one = new THREE.Mesh(geometry_one,material_one)const sphere_two = new THREE.Mesh(geometry_two, geometry_two)// Populate scene with spheresscene.add(sphere_one);scene.add(sphere_two);// Lightsconst sun = new THREE.DirectionalLight(0xffffff, 3)sun.position.set(4, 3, 2);scene.add(light)// Base cameraconst camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)camera.position.x = 0camera.position.y = 0camera.position.z = 5scene.add(camera)// Rendererconst renderer = new THREE.WebGLRenderer({canvas: canvas})renderer.setSize(window.innerWidth, window.innerHeight)//Animateconst animate = () =>{// Update objectssphere_one.rotation.y += 0.001// Renderrenderer.render(scene, camera)// Call tick again on the next framewindow.requestAnimationFrame(animate)}animate();
- Lines 4–6: This code loads required textures using the
TextureLoaderobject'sloadmethod. One is to apply to the scene and the other to Earth. - Line 15: This code applies the texture to the scene background. We can invoke the
backgroundproperty and set it to the loaded texture. - Lines 28–29: This code applies the texture to the material of the shape. We use the simple
mapproperty. In the following line, we make the material layer transparent using thetransparentmethod. Therefore, only the texture shows up and does not obscure the cube beneath.
More on texture application
There are various ways to apply texture to material in three.js, and a common one is normalMap. Unlike the simple map property used above, this is a mapping technique that adds details to the object without creating more polygons to mimic the behavior of light on bumps and dents.
