var material = new THREE.MeshBasicMaterial({
color: 0xdd00ff,
// 前面FrontSide 背面:BackSide 双面:DoubleSide
side:THREE.DoubleSide,
});
1 Common material: MeshLambertMaterial, not affected by light
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000,opacity:0.5,transparent:true });
cube = new THREE.Mesh(cubeGeometry, cubeMaterial); //物体=几何体+材质
2 Normal vector material MeshNormalMaterial, the color of each surface is different
var cubeGeometry2 = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial2 = new THREE.MeshNormalMaterial({flatShading: true});
cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
3 Specular material: you can create a shiny material
Attribute name | description | Remarks |
---|---|---|
color | The color of the material, the default is white | Commonly used |
shininess | Smoothness, specify the brightness of the highlight part, the default value is 30 | Commonly used |
specular | The color of the highlight part of the material. The default value is 0x111111 dark gray. If you set its color to be the same as the color color, you will get a metal-like material. If you set it to gray, it looks more like plastic | |
ambient | This is the ambient color of the material. It is used together with the ambient light source discussed in the previous chapter. This color will be multiplied by the color provided by the ambient light source. The default value is white | |
emissive | This is the color emitted by the material. It does not actually want to be a light source, but a pure color that is not affected by other lights. The default value is black. | |
metal | If this property is set to true, Three.js will calculate the color of the pixel in a slightly different way to make the object look more like metal. It should be noted that this effect is very small | |
wrapAround | If this property is set to true, semi-lambert lighting technology is started. With it, the light drops more subtle. If the grid has rough, dark areas, the shadows will become softer and more evenly distributed when this attribute is enabled | |
wrapRGB | When the wrapAround property is set to true, you can use THREE.Vector3 to control the speed of light falling |
var cubeGeometry2 = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial2 = new THREE.MeshPhongMaterial({color: 0x836DED,specular:0x111111,shininess:80});
cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);