foreword
Material refers to the type of raw material or substance used to manufacture an item. Common materials include metal, plastic, wood, glass, stone, etc. The choice of material depends on factors such as the purpose, design and budget of the item being manufactured. Different materials have different characteristics and advantages and disadvantages. For example, metal is usually stronger, but heavier and prone to rust; plastic is light and less prone to damage, but less durable. Materials also affect the look and feel of manufactured items, such as wood can give an item a natural aesthetic, while glass can create a modern feel.
1. Material
1 Introduction
1.1 Basic material (does not react to light source)
name
describe
Network basic material MeshBasicMaterial
Base material to show geometry wireframe or add simple color
Network depth material MeshDepthMaterial
According to the distance from the grid to the camera, decide how to color
Network normal material MeshNormalMateria
Calculate the color according to the normal vector of the object surface
Network surface material MeshFaceMaterial
A container that can assign different colors to the various surfaces of objects in the container
1.2 Advanced materials (Lambert materials and phone materials will respond to light sources)
name
describe
Network Lambert material MeshLambertMateria
Lighting is taken into account, creating dim, unlit objects
Network Phong Material MeshPhongMaterial
Will take lighting into account and create bright objects
Shader Material ShaderMaterial
Custom shader program (will be often used in future projects)
Line basic material LineBasicMaterial
for line geometry
Wish line material LineDashedMateria
Create a dotted line effect
2. Attribute classification
2.1 Basic attributes
attribute name
describe
id
ID, assigned when creating an object
name
Name, which can be assigned to the object name through this property
opacity
Transparency, the value range is 0~1, it needs to be used in combination with transparent
transparent
Whether transparent, true transparent, and can modify the transparency, false opaque
overdraw
Overdraw to eliminate gaps between objects when rendered with CanvasRenderer
visible
Whether it is visible, whether the object can be seen in the scene
side
Side, set which side to use the material on,
needsUpdate
Do you need to refresh, you can refresh the material cache
2.2 Fusion attributes
Determines how the object blends with the background
attribute name
describe
blending
Fusion, which determines how the material on the object blends with the background
blendsrc
Fusion sources, creating custom fusion modes
blenddst
fusion target
blendingequation
fusion formula
2.3 Advanced Properties
Controls how the underlying webgl context renders objects
attribute name
describe
depthTest
depth test
depthWrite
Does it affect the depth buffer
alphaTest
Specify a value below which a pixel will not be displayed
3. MeshBasicMaterial basic material
3.1 Properties
attribute name
describe
color
material color
wireframe
Whether to render as wireframe
wireframeLinewidth
Set the wireframe width
wireframeLinecap
How endpoints between line segments are displayed
wireframeLinejoin
How the connection points of line segments are displayed
shading
define how to color
vertexColors
Define a different color for each vertex
fog
Whether it will be affected by the global fog effect setting
3.2 Case
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
< script src = " ../lib/three/three.js" > </ script>
< script src = " ../lib/three/dat.gui.js" > </ script>
< script src = " ../controls/index.js" > </ script>
</ head>
< body>
</ body>
</ html>
< script>
const scene = new THREE. Scene ( ) ;
const camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 0 , 20 ) ;
const renderer = new THREE. WebGLRenderer ( ) ;
renderer. setSize ( window. innerWidth, window. innerHeight) ;
document. body. appendChild ( renderer. domElement) ;
const cubeGeometry = new THREE. BoxGeometry ( 1 , 1 , 1 ) ;
const cubeMaterial = new THREE. MeshBasicMaterial ( {
color : 0xff0000 , wireframe : false } ) ;
const cube = new THREE. Mesh ( cubeGeometry, cubeMaterial) ;
scene. add ( cube) ;
const spotLight = new THREE. SpotLight ( 0xffffff ) ;
spotLight. position. set ( - 10 , 10 , 90 ) ;
scene. add ( spotLight) ;
spotLight. shadowMapWidth = 4096 ;
spotLight. shadowMapHeight = 4096 ;
initControls ( cubeMaterial) ;
const animation = ( ) => {
cube. rotation. x += 0.01 ;
cube. rotation. y += 0.01 ;
renderer. render ( scene, camera) ;
requestAnimationFrame ( animation) ;
}
animation ( )
</ script>
4.MeshDepthMaterial depth material
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
< script src = " ../lib/three/three.js" > </ script>
< script src = " ../lib/three/dat.gui.js" > </ script>
< script src = " ../controls/index.js" > </ script>
</ head>
< body>
</ body>
</ html>
< script>
const scene = new THREE. Scene ( ) ;
const camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 0 , 20 ) ;
const renderer = new THREE. WebGLRenderer ( ) ;
renderer. setSize ( window. innerWidth, window. innerHeight) ;
document. body. appendChild ( renderer. domElement) ;
const cubeGeometry = new THREE. BoxGeometry ( 1 , 1 , 1 ) ;
const cubeMaterial = new THREE. MeshDepthMaterial ( ) ;
const cube = new THREE. Mesh ( cubeGeometry, cubeMaterial) ;
scene. add ( cube) ;
const spotLight = new THREE. SpotLight ( 0xffffff ) ;
spotLight. position. set ( - 10 , 10 , 90 ) ;
scene. add ( spotLight) ;
spotLight. shadowMapWidth = 4096 ;
spotLight. shadowMapHeight = 4096 ;
initControls ( cubeMaterial, camera) ;
const animation = ( ) => {
cube. rotation. x += 0.01 ;
cube. rotation. y += 0.01 ;
renderer. render ( scene, camera) ;
requestAnimationFrame ( animation) ;
}
animation ( )
</ script>
5.MeshNormalMateria normal material
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
< script src = " ../lib/three/three.js" > </ script>
< script src = " ../lib/three/dat.gui.js" > </ script>
< script src = " ../controls/index.js" > </ script>
</ head>
< body>
</ body>
</ html>
< script>
const scene = new THREE. Scene ( ) ;
const camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 0 , 20 ) ;
const renderer = new THREE. WebGLRenderer ( ) ;
renderer. setSize ( window. innerWidth, window. innerHeight) ;
document. body. appendChild ( renderer. domElement) ;
const cubeGeometry = new THREE. BoxGeometry ( 1 , 1 , 1 ) ;
const cubeMaterial = new THREE. MeshNormalMaterial ( ) ;
const cube = new THREE. Mesh ( cubeGeometry, cubeMaterial) ;
scene. add ( cube) ;
const spotLight = new THREE. SpotLight ( 0xffffff ) ;
spotLight. position. set ( - 10 , 10 , 90 ) ;
scene. add ( spotLight) ;
spotLight. shadowMapWidth = 4096 ;
spotLight. shadowMapHeight = 4096 ;
initControls ( cubeMaterial, camera) ;
const animation = ( ) => {
cube. rotation. x += 0.01 ;
cube. rotation. y += 0.01 ;
renderer. render ( scene, camera) ;
requestAnimationFrame ( animation) ;
}
animation ( )
</ script>
6.MeshFaceMaterial surface material
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
< script src = " ../lib/three/three.js" > </ script>
< script src = " ../lib/three/dat.gui.js" > </ script>
< script src = " ../controls/index.js" > </ script>
</ head>
< body>
</ body>
</ html>
< script>
const scene = new THREE. Scene ( ) ;
const camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 0 , 20 ) ;
const renderer = new THREE. WebGLRenderer ( ) ;
renderer. setSize ( window. innerWidth, window. innerHeight) ;
document. body. appendChild ( renderer. domElement) ;
const cubeGeometry = new THREE. BoxGeometry ( 1 , 1 , 1 ) ;
const cubeMaterial = new THREE. MeshFaceMaterial ( [
new THREE. MeshBasicMaterial ( {
color : 0x009e60 } ) ,
new THREE. MeshBasicMaterial ( {
color : 0x0051ba } ) ,
new THREE. MeshBasicMaterial ( {
color : 0xffd500 } ) ,
new THREE. MeshBasicMaterial ( {
color : 0xff5800 } ) ,
new THREE. MeshBasicMaterial ( {
color : 0xc41e3a } ) ,
new THREE. MeshBasicMaterial ( {
color : 0xffff00 } ) ,
] ) ;
const cube = new THREE. Mesh ( cubeGeometry, cubeMaterial) ;
scene. add ( cube) ;
const spotLight = new THREE. SpotLight ( 0xffffff ) ;
spotLight. position. set ( - 10 , 10 , 90 ) ;
scene. add ( spotLight) ;
spotLight. shadowMapWidth = 4096 ;
spotLight. shadowMapHeight = 4096 ;
initControls ( cubeMaterial, camera) ;
const animation = ( ) => {
cube. rotation. x += 0.01 ;
cube. rotation. y += 0.01 ;
renderer. render ( scene, camera) ;
requestAnimationFrame ( animation) ;
}
animation ( )
</ script>
7.MeshLambertMaterial Lambert material
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
< script src = " ../lib/three/three.js" > </ script>
< script src = " ../lib/three/dat.gui.js" > </ script>
< script src = " ../controls/index.js" > </ script>
</ head>
< body>
</ body>
</ html>
< script>
const scene = new THREE. Scene ( ) ;
const camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 0 , 20 ) ;
const renderer = new THREE. WebGLRenderer ( ) ;
renderer. setSize ( window. innerWidth, window. innerHeight) ;
document. body. appendChild ( renderer. domElement) ;
const cubeGeometry = new THREE. BoxGeometry ( 1 , 1 , 1 ) ;
const cubeMaterial = new THREE. MeshLambertMaterial ( {
color : 0xff0000 } ) ;
const cube = new THREE. Mesh ( cubeGeometry, cubeMaterial) ;
scene. add ( cube) ;
const spotLight = new THREE. SpotLight ( 0xffffff ) ;
spotLight. position. set ( - 10 , 10 , 90 ) ;
scene. add ( spotLight) ;
spotLight. shadowMapWidth = 4096 ;
spotLight. shadowMapHeight = 4096 ;
initControls ( cubeMaterial, camera) ;
const animation = ( ) => {
cube. rotation. x += 0.01 ;
cube. rotation. y += 0.01 ;
renderer. render ( scene, camera) ;
requestAnimationFrame ( animation) ;
}
animation ( )
</ script>
8.MeshPhongMaterial (Phong material)
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
< script src = " ../lib/three/three.js" > </ script>
< script src = " ../lib/three/dat.gui.js" > </ script>
< script src = " ../controls/index.js" > </ script>
</ head>
< body>
</ body>
</ html>
< script>
const scene = new THREE. Scene ( ) ;
const camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 0 , 20 ) ;
const renderer = new THREE. WebGLRenderer ( ) ;
renderer. setSize ( window. innerWidth, window. innerHeight) ;
document. body. appendChild ( renderer. domElement) ;
const cubeGeometry = new THREE. BoxGeometry ( 1 , 1 , 1 ) ;
const cubeMaterial = new THREE. MeshPhongMaterial ( {
color : 0xff0000 } ) ;
const cube = new THREE. Mesh ( cubeGeometry, cubeMaterial) ;
scene. add ( cube) ;
const spotLight = new THREE. SpotLight ( 0xffffff ) ;
spotLight. position. set ( - 10 , 10 , 90 ) ;
scene. add ( spotLight) ;
spotLight. shadowMapWidth = 4096 ;
spotLight. shadowMapHeight = 4096 ;
initControls ( cubeMaterial, camera) ;
const animation = ( ) => {
cube. rotation. x += 0.01 ;
cube. rotation. y += 0.01 ;
renderer. render ( scene, camera) ;
requestAnimationFrame ( animation) ;
}
animation ( )
</ script>
9. ShaderMaterial shader material
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
< script src = " ../lib/three/three.js" > </ script>
< script src = " ../lib/three/dat.gui.js" > </ script>
< script src = " ../controls/index.js" > </ script>
</ head>
< body>
</ body>
</ html>
< script>
const scene = new THREE. Scene ( ) ;
const camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 0 , 20 ) ;
const renderer = new THREE. WebGLRenderer ( ) ;
renderer. setSize ( window. innerWidth, window. innerHeight) ;
document. body. appendChild ( renderer. domElement) ;
const cubeGeometry = new THREE. BoxGeometry ( 1 , 1 , 1 ) ;
const cubeMaterial = new THREE. ShaderMaterial ( {
uniforms : {
r : {
type : 'f' ,
value : 1.0 ,
} ,
a : {
type : 'f' ,
value : 1.0 ,
} ,
} ,
vertexShader : `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
` ,
fragmentShader : `
uniform float r;
uniform float a;
void main() {
gl_FragColor = vec4(r,0.0,0.0,a);
}
` ,
transparent : true ,
} ) ;
const cube = new THREE. Mesh ( cubeGeometry, cubeMaterial) ;
scene. add ( cube) ;
const spotLight = new THREE. SpotLight ( 0xffffff ) ;
spotLight. position. set ( - 10 , 10 , 90 ) ;
scene. add ( spotLight) ;
spotLight. shadowMapWidth = 4096 ;
spotLight. shadowMapHeight = 4096 ;
initControls ( cubeMaterial, camera) ;
const animation = ( ) => {
cube. rotation. x += 0.01 ;
cube. rotation. y += 0.01 ;
renderer. render ( scene, camera) ;
requestAnimationFrame ( animation) ;
}
animation ( )
</ script>
10. Straight and dashed material
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
< script src = " ../lib/three/three.js" > </ script>
< script src = " ../lib/three/dat.gui.js" > </ script>
< script src = " ../controls/index.js" > </ script>
</ head>
< body>
</ body>
</ html>
< script>
const scene = new THREE. Scene ( ) ;
const camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 0 , 20 ) ;
const renderer = new THREE. WebGLRenderer ( ) ;
renderer. setSize ( window. innerWidth, window. innerHeight) ;
document. body. appendChild ( renderer. domElement) ;
const lines = new THREE. Geometry ( ) ;
lines. vertices = [
new THREE. Vector3 ( 0 , 2 , 5 ) ,
new THREE. Vector3 ( 0 , - 2 , 5 ) ,
] ;
const material = new THREE. LineDashedMaterial ( {
color : 0xff0000 ,
dashSize : 1 ,
gapSize : 1 ,
} )
const line = new THREE. Line ( lines, material) ;
lines. computeLineDistances ( )
scene. add ( line) ;
const spotLight = new THREE. SpotLight ( 0xffffff ) ;
spotLight. position. set ( - 10 , 10 , 90 ) ;
scene. add ( spotLight) ;
spotLight. shadowMapWidth = 4096 ;
spotLight. shadowMapHeight = 4096 ;
initControls ( material, camera) ;
const animation = ( ) => {
renderer. render ( scene, camera) ;
requestAnimationFrame ( animation) ;
}
animation ( )
</ script>
11. Joint Material
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> Title</ title>
< style>
* {
margin : 0;
padding : 0;
}
</ style>
< script src = " ../lib/three/three.js" > </ script>
< script src = " ../lib/three/dat.gui.js" > </ script>
< script src = " ../controls/index.js" > </ script>
</ head>
< body>
</ body>
</ html>
< script>
const scene = new THREE. Scene ( ) ;
const camera = new THREE. PerspectiveCamera ( 45 , window. innerWidth / window. innerHeight, 1 , 1000 ) ;
camera. position. set ( 0 , 0 , 20 ) ;
const renderer = new THREE. WebGLRenderer ( ) ;
renderer. setSize ( window. innerWidth, window. innerHeight) ;
document. body. appendChild ( renderer. domElement) ;
const cubeGeometry = new THREE. BoxGeometry ( 1 , 1 , 1 ) ;
const lambert = new THREE. MeshLambertMaterial ( {
color : 0xff0000 } )
const basic = new THREE. MeshBasicMaterial ( {
wireframe : true } )
const cube = THREE . SceneUtils. createMultiMaterialObject ( cubeGeometry, [
lambert,
basic
] )
scene. add ( cube) ;
const spotLight = new THREE. SpotLight ( 0xffffff ) ;
spotLight. position. set ( - 10 , 10 , 90 ) ;
scene. add ( spotLight) ;
spotLight. shadowMapWidth = 4096 ;
spotLight. shadowMapHeight = 4096 ;
const animation = ( ) => {
cube. rotation. x += 0.01 ;
cube. rotation. y += 0.01 ;
renderer. render ( scene, camera) ;
requestAnimationFrame ( animation) ;
}
animation ( )
</ script>