Skip to content

Latest commit

聽

History

History
104 lines (71 loc) 路 3.94 KB

2021-09-30.md

File metadata and controls

104 lines (71 loc) 路 3.94 KB
Raw
publish_date
2021-09-30
  • in three.js land, materials are the abstractions over creating shaders to produce textures for 3D objects
  • Reminder: a Three.Mesh is comprised of a geometry and a material. The material is supplied as the second argument to the Three.Mesh constructor.
const material = new THREE.MeshBasicMaterial();
const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 16), material);
  • Textures are simply image files that need to mapped (wrapped) around a 3D object
const textureLoader = new THREE.TextureLoader();
const doorColourTexture = textureLoader.load("/textures/door/color.jpg");
  • Then we supply can provide this to the THREE.MeshBasicMaterial constructor.
const material = new THREE.MeshBasicMaterial({
 map: doorColourTexture,
});

  • There's a lot more params that can be provided to the MeshBasicMaterial options object. like transparency and wireframe see docs for reference

  • Note, materials for THREE.PlaneGeometry only get rendered on one side. this can be worked around with material.side = THREE.DoubleSide; . But means double the amount of triangles need to be calculated .

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
scene.add(pointLight)

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
  • displacing textures is cool way to bring depth to 3D object based on the texture. to so we provide a texture to the displacementMap property and then we can mess around with the displacementScale
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([
    '/textures/environmentMaps/0/px.jpg',
    '/textures/environmentMaps/0/nx.jpg',
    '/textures/environmentMaps/0/py.jpg',
    '/textures/environmentMaps/0/ny.jpg',
    '/textures/environmentMaps/0/pz.jpg',
    '/textures/environmentMaps/0/nz.jpg'
])

One of the best sources is HDRIHaven. To convert an HDRI to a cube map, you can use this online tool: https://matheowis.github.io/HDRI-to-CubeMap/