Material definition:
1. Definition of ThreeJs: Material describes the appearance of an object. They are defined in a (mostly) renderer-independent manner, so you don't have to rewrite materials if you decide to use a different renderer.
2. Definition of OpenGL: Material is a combination of ambient color, diffuse reflection color, specular reflection color and emission color, and glossiness .
Materials and performance in three.js:
Simulate objects in the real world: MeshBasicMaterial ➡ MeshLambertMaterial ➡ MeshPhongMaterial
More advanced calculations implement physical materials: MeshStandardMaterial➡ MeshPhysicalMaterial
Various standard materials from fastest to slowest MeshBasicMaterial➡ MeshLambertMaterial➡ MeshPhongMaterial➡ MeshStandardMaterial➡ MeshPhysicalMaterial
MeshBasicMaterial
This is a basic material that you can use to give your geometry a simple color or to reveal your wireframe geometry. (flat)
//新建材质
const material = new THREE.MeshBasicMaterial({
color: 0xFF0000, // 设置颜色
});MeshLambertmaterial
This is a material that takes lighting into account and uses it to create a matte matte object ( matte material )
//新建材质
const material = new THREE.MeshLambertmaterial({
color: 0xFF0000, // 设置颜色
});MeshPhongmaterial
This is a material that also takes lighting into account and can be used to create shiny objects. (painted surface)
//新建材质
const material = new THREE.MeshPhongmaterial({
color: 0xFF0000, // 设置颜色
});More complex materials require more GPU power to draw. On slower GPUs (such as mobile phones), you may wish to reduce the GPU power required to draw the scene by using a less complex material. Again, if you don't need extra functionality, use the simplest material possible. If you don't need lighting and specular highlights, use . MeshBasicMaterial , MeshLambertMaterial , MeshBasicMaterial
-------------------------------------------------- ------upgrade------------------------------------------- -----
The composition of the material: Mesh Mesh = Geometry geometry + Material material.
Explanation of the above formula: The grid is a 3D model mixed with geometry and material. The appearance of the model is determined by the material, and the shape of the model is determined by the geometry.
Material is the focus of Three.js, and the model in Three.js consists of two parts. The first part is the shape, which is the Geometry geometry in the three document, and the second part is the material, which is the Material material in the three.js document, which is the visual representation of this model.
The following example illustrates:
Case 1:
mesh 
= 
geometry + 
material (blue)
Sample code below:
geometry = new THREE.BoxGeometry( 1 );
material = new THREE.MeshBasicMaterial( { color: 0x199ED8 } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );Case 2:
mesh 
= geometry + 
material
The box in Example 2 is a picture, so how to implement it in three.js is reflected in the following code.
Sample code below:
const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );//箱子图片
const geometry = new THREE.BoxGeometry( 200, 200, 200 );
const material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );In three js. Simple models can be initialized with built-in methods. What should we do if the following models appear?
In the current mainstream modeling software. We can use 3D max, C4D, Blender, Unreal Engine and other tool software for modeling and mapping, design complex, visually richer, and 3D models, and introduce them into our projects through a solid extension library.
Modeling in blender and introducing page detail effects (specular highlights, matte)
Case 3:
mesh 
= 
geometry + 
material (blue)
Case 3 article link: Bugatti Chiron Blender sculpting, shading, and importing Three.js, 3DWEB model [Three.js+Blender modeling+web front-end+visualization]_See Blender Blog-CSDN Blog_blender three.js
Think of the following cases:
http://vr.ff.com/us/ 
Renault Espace Visualization
https://renaultespace.littleworkshop.fr/
Transmit 5https://panic.com/transmit/
In reality, 3D interactive data display is mainly done by front-end or webgl engineers, and 3D modelers do the work on modeling. Some special effects in model interaction need to be completed by development engineers, such as model interaction special effects in the scene: water surface waves, halos, burning effects, etc. These special effects require more advanced webgl technology to achieve, such as Shader, GLSL technology. in three.js. It is done by a variety of Shaderpass, but their bottom layer is GLSL.