const material = new THREE.MeshBasicMaterial();
const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), material);
const textureLoader = new THREE.TextureLoader();
const doorColourTexture = textureLoader.load("/textures/door/color.jpg");
const material = new THREE.MeshBasicMaterial({
 map: doorColourTexture,

THREE.MeshBasicMaterial - lets you map your own textures

MeshNormalMaterial - displays a nice purple, blueish, greenish color

MeshMatcapMaterial picks colours relative the orientation of the camera, creating the illusion of a light source.(thus less resources required).

MeshDepthMaterial - displays a hue of colour dependent on depth of the camera.

You can use this material for special effects where you need to know how far the pixel is from the camera.

If we want to use something like the THREE.MeshLambertMaterial we need a real light source

const pointLight = new THREE.PointLight(0xffffff, 0.5)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4

MeshToonMaterial- give a cool cel shaded look!

MeshStandardMaterial uses physically based rendering principles. it supports lights but with a more realistic algorithm and better parameters like roughness and “metalness”.

The aoMap property (literally “ambient occlusion map”) will add shadows where the texture is dark. Useful for bring depth to textures.

To make this work we need to add another attribute to the geometry using setAttribute , which duplicates the existing uv attribute

sphere.geometry.setAttribute('uv2', new THREE.BufferAttribute(sphere.geometry.attributes.uv.array, 2))

Now we can control the intensity of the aoMap like so:

material.aoMap = doorAmbientOcclusionTexture
material.aoMapIntensity = 1
material.displacementMap = doorHeightTexture;

// crank up to exergate the texture
material.displacementScale = 0.1;

envMap or Environment maps can create nice mirror effect which map a surrounding texture into your mesh.

const cubeTextureLoader = new THREE.CubeTextureLoader()

const environmentMapTexture = cubeTextureLoader.load([

One of the best sources is HDRIHaven. To convert an HDRI to a cube map, you can use this online tool: