http://mango-media.eu/media/pages/creative-coding/spukhaus-mit-three-js/fe606e64bb-1633080410/haunted.jpeg
Mango Media - Spukhaus mit Three.js

Spukhaus mit Three.js

2021

Texture mapping with Three.js + Javascript.

Three.js is a cross-browser JavaScript library + application programming interface (API) used to create + display animated 3D computer graphics in a web browser using WebGL.

Texture mapping is a method for defining high-fidelity detail, surface texture, or colour information on a computer-generated graphic or 3D model. The original technique was pioneered by Edwin Catmull in 1974. For realistic detail, on 3D elements, we can add textures with Three.js’s textureLoader to visualise texture like colour, depth, reflection, grain + more.

This project was inspired by the course Three.js Journey by Bruno Simon a creative developer based in Paris.

Date

08/04/2021

Client

Self Directed

Location

Dead Man’s Hill, Norfolk, UK

Service

Interaction, 3D, Creative Coding

Tools

Three.js, Javascript + Photoshop

Textures add another dimension to 3D art.

Texture maps are applied to the surfaces of 3D models to create repeating textures + patterns. These can be used for defining specific details; in this case bricks, doors + grass.

The Code


// Textures - loading in the textures with Three.js's texture loader. 
// All of these textures are nessarcary in generating a texturered 3d graphic with depth. 
const textureLoader = new THREE.TextureLoader()
const doorColorTexture = textureLoader.load('textures/custom-door/color.jpg')
const doorAlphaTexture = textureLoader.load('textures/custom-door/alpha.jpg')
const doorAmbientOcclusionTexture = textureLoader.load('textures/custom-door/ambientOcclusion.jpg')
const doorHeightTexture = textureLoader.load('textures/custom-door/height.jpg')
const doorNormalTexture = textureLoader.load('textures/custom-door/normal.jpg')
const doorMetalnessTexture = textureLoader.load('textures/custom-door/metalness.jpg')
const doorRoughnessTexture = textureLoader.load('textures/custom-door/roughness.jpg')

// Door
const door = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 2, 100, 100),
    new THREE.MeshStandardMaterial({
        map: doorColorTexture,
        transparent: true,
        alphaMap: doorAlphaTexture,
        aoMap: doorAmbientOcclusionTexture,
        displacementMap: doorHeightTexture,
        displacementScale: 0.1,
        normalMap: doorNormalTexture,
        metalnessMap: doorMetalnessTexture,
        roughnessMap: doorRoughnessTexture
    })
)
door.geometry.setAttribute('uv2', new THREE.Float32BufferAttribute(door.geometry.attributes.uv.array, 2))
door.position.y = .9
door.position.z = 2 + -0.03
house.add(door)

Colour

Colour maps are the most significant mask + are basically 2D images that make up the patterns + colours. This is what you will find on most texture websites. It is a standard photo that you would get if you stood in front of the material + took a photo of it.

Normal

Normal maps are an important way to give your textures depth by using complex calculations to imitate the way light interacts with the surface of the material to create smaller bumps and dents.

Once you go past a certain viewing angle it can lose the effect, especially on larger or more exaggerated raises + dips. The base colour of a normal map is a light purple, this is the “bottom” of the normal map that represents the surface of your polygonal mesh. From there RGB values are used to produce cracks, bumps, or pores in your model. The R, G, and B values are equal to the X, Y, and Z coordinates on a base mesh.

Ambient Occlusion

Ambient occlusion is a map that defines how the object reacts to light. It’s a grayscale map where the white areas will pick up the most amount of light while the darker areas will be more in shadow + less reactive to any light.

Height

Height maps are similar to normal maps in that they are used to add smaller details into your base mesh. The big difference between the two is that instead of imitating the bumps + dips like a normal map, height maps will tessellate your mesh + actually add the data to the 3D mesh. Height maps are another grayscale map with black representing the bottom of the mesh + pure white showing as the highest peaks, with shades of grey representing everything in between.

The advantage of height maps is the incredible detail they add to the object, ensuring that it will look as realistic as possible at all angles + lighting conditions. However, due to the need to tessellate the model, it can cause a slowdown in your games or render times.

Glossiness/Roughness

Used in PBR shaders, this map controls the sharpness of the reflections + should be plugged into a Gloss or Roughness Input. The terms ‘Gloss’ and ‘Roughness’ are interchangeable - they are simply the inverts of each other. So if your software calls it ‘Gloss’, but there is only a ‘Roughness’ map provided, simply invert it in the software before connecting. It often adds a lot of character to hard surface materials like wood or metal, so make sure you use it!

Metalness

Metalness is used to define if your material (or part of it) is bare metal. It tells the renderer what part of a surface should be treated as Metal and what parts should be treated as non-metal. Metal maps are also grayscale, but it is advisable to only use white + black values and do the variations in between using your roughness maps. The advantage of metalness maps is their ease of use for simulating real-world materials. Metals reflect light very differently from everything else so this map can make a huge difference to the final look.

Alpha

Alpha maps effectively crop the area where all other maps display + will designate the amount of transparency of areas in a certain object by using black to signify the transparent areas + white to signify the opaque. It is a mapping technique used when the given object’s transparency is not consistent; for example when the transparency amount is not the same for the entire object. With Three.js this map will not work unless we define transparent as true.

See Project

Related Projects

Start creating an award
winning website today!

Anything is possible,
Let's make dreams a reality.

Get a Quote!