Introduction
This chapter demonstrates about the WebGL Meterials, which are similar to lighting. By modifying the materiel properties and lighting conditions user can get the Different appearance, following are the concepts are covered in this chapter.
- Properties of Materials
- Types of Materials
Description
WebGL Meterials are some common properties to all Materials. These can be set when either initialising the material for the first time or after its created at run time. Following are the some properties are listed below.
- color Color does not behave quite how user might expect. If user need to perform similar affect then set a colon in a MeshBasicMaterial.
- side Which tells Three.JS whether to color or textureize Front, Back or both sides of a Mesh.
- map Map allows user to define texture to use for a Mesh.
- transparency and Opacity User can make an object appear Transparent by adjusting transparency to true and opacity value between 0-1. If transparency is not set to true then modify the opacity little bit, object appear based on the user adjusted value.
- visible Visible is Boolean value indicating whether the material is visible or not. Which is also useful for debugging purposes if user need to hide then show a particular object on mesh.
- wireframe Wireframe is Boolean property in which number of other wireframe related properties control the thickness of the wireframe lines.
Description
Three.JS has three main types of Materials which are very regularly used materials and Three.JS also contain some other types of materials but which are the more advanced these are listed below.
- MeshBasicMaterial
- MeshLambertMaterial
- MeshPhongMaterial
Description
Mesh Basic is simplest raw material and which is completely not effected by lighting from the scene. If user could remove the lighting from the entire scene then also it will still visible.
The snippet below demonstrates the Mesh Basic Example as shown.
[c]
var material = new THREE.MeshBasicMeterial
({
Color: 0xFF0000
})
[/c]
Creation of new instance MeshBasicMaterial is very easy and user can pass the property object into intialization function in which user need to specify Color and Wireframe.
Description
MeshLambertMeterial have dull and non-shiny appearance like skin or wood. To see the MeshLambertMeterial property user need to use them in conjunctions with certain types of lights. These are the directional, point, or spot lights.
The snippet below demonstrates the basic example of the MeshLambertMeterial.
[c]
var material = new Three.MeshLambertMaterial
({
color:0xFF0000N
})
[/c]
Creating MeshlambertMaterial is very simple. User need to specify the two properties those are the ambient and emissive.
Properties
- ambient Multiplied by ambient light color.
- emissive solid color unaffected by other lighting.
Description
MeshPhongMeterials are shiny so the the example of Phong material look like a metal or shiny plastic. MeshPongMeterial need to be used in conjunction with directional or spot lights.
The snippet code below demonstrates the MeshPongMeterial Example.
[c]
var material=new THREE.MeshPhongMetrial({
color:0xff00aa,
ambient:0x0088bb,
specular:0x002211,
shininess:100
})
[/c]
Examples
The code below demonstrates the MeshLambert and MeshPhongMaterials.
app.js
[c]
var demo = (function() {
"use strict";
var scene = new THREE.Scene(),
light,
light2,
ambientLight,
camera,
renderer = new THREE.WebGLRenderer(),
cube,
cube2,
plane,
cubeRotate = true,
itemsToControl;
function initScene() {
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl-container").appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(
35,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.z = 210;
camera.position.y = 40;
scene.add(camera);
setupGui();
light = new THREE.SpotLight(itemsToControl.lightColor);
light.position.set(-30, 100, 0);
scene.add(light);
light2 = new THREE.SpotLight(itemsToControl.lightColor);
light2.position.set(30, 100, 0);
scene.add(light2);
ambientLight = new THREE.AmbientLight(itemsToControl.ambientLightColor);
scene.add(ambientLight);
cube = new THREE.Mesh(new THREE.BoxGeometry(40, 40, 40),
new THREE.MeshLambertMaterial({
color: itemsToControl.baseColor,
ambient: itemsToControl.ambientColor,
emissive: itemsToControl.emissiveColor,
}));
cube.position.set(-50, 20, 0);
cube.name = "cube";
scene.add(cube);
cube2 = new THREE.Mesh(new THREE.BoxGeometry(40, 40, 40),
new THREE.MeshPhongMaterial({
color: itemsToControl.baseColor,
ambient: itemsToControl.ambientColor,
specular: itemsToControl.specularColor,
emissive: itemsToControl.emissiveColor,
shininess: itemsToControl.shininess,
shading: THREE.FlatShading,
side: THREE.DoubleSide
})
);
cube2.position.set(50, 20, 0);
cube2.name = "cube";
scene.add(cube2);
render();
};
function setupGui() {
itemsToControl = new function() {
this.ambientLightColor = '#0b062f';
this.color = '#ffffff';
this.ambientColor = '#ffffff';
this.specularColor = '#ffffff';
this.emissiveColor = '#0b062f';
this.lightColor = '#ffffff';
this.shininess = 100;
this.rotateCube = 'Yes';
};
var gui = new dat.GUI();
var baseColor = gui.addColor(itemsToControl, 'color');
baseColor.onChange(function(value) {
changeValue('color', value)
});
var ambientColor = gui.addColor(itemsToControl, 'ambientColor');
ambientColor.onChange(function(value) {
changeValue('ambient', value)
});
var emissiveColor = gui.addColor(itemsToControl, 'emissiveColor');
emissiveColor.onChange(function(value) {
changeValue('emissive', value)
});
var specularColor = gui.addColor(itemsToControl, 'specularColor');
specularColor.onChange(function(value) {
changeValue('specular', value)
});
var lightColor = gui.addColor(itemsToControl, 'lightColor');
lightColor.onChange(function(value) {
light.color = new THREE.Color(value);
light2.color = new THREE.Color(value);
cube.material.needsUpdate = true;
cube2.material.needsUpdate = true;
});
var ambientLightColorGui = gui.addColor(itemsToControl, 'ambientLightColor');
ambientLightColorGui.onChange(function(value) {
ambientLight.color = new THREE.Color(value);
ambientLight.color = new THREE.Color(value);
cube.material.needsUpdate = true;
cube2.material.needsUpdate = true;
});
var shininess = gui.add(itemsToControl, 'shininess', 0, 100);
shininess.onChange(function(value) {
changeValue('shininess', value)
});
var rotateCube = gui.add(itemsToControl, 'rotateCube', ['Yes', 'No']);
rotateCube.onChange(function(value) {
cubeRotate = value == 'Yes';
});
}
function changeValue(valueToChange, newValue) {
if (cube.material[valueToChange]) {
if (valueToChange != 'shininess') {
cube.material[valueToChange] = new THREE.Color(newValue);
} else {
cube.material.shininess = newValue;
}
}
if (cube2.material[valueToChange] || valueToChange == 'shininess') {
if (valueToChange != 'shininess') {
cube2.material[valueToChange] = new THREE.Color(newValue);
} else {
cube2.material.shininess = newValue;
}
}
cube.material.needsUpdate = true;
cube2.material.needsUpdate = true;
}
function render() {
if (cubeRotate) {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
cube2.rotation.x += 0.01;
cube2.rotation.y += 0.01;
}
renderer.render(scene, camera);
requestAnimationFrame(render);
};
window.onload = initScene;
return {
scene: scene,
cube: cube,
cube2: cube2
}
})();
[/c]
index.html
[c]
<!DOCTYPE html>
<html>
<head>
<title>Intro to WebGL with Three.js</title>
</head>
<body>
<div id="webgl-container"></div>
<script src="scripts/three.js"></script>
<script src="scripts/dat.gui.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
[/c]
Result
By running the above code in a preferred browser, user will get the output is as shown below.
Key Points
- WebGL Meterials are mainly divided into three types.
- WebGL Meterials MeshLambartMaterial is very dull when compare to MeshBasicMaterial.
- WebGL Meterials MeshPhongMeterial is very shiny material.