Material 材质

材质决定了物体是否透明颜色等

three.js 中涉及的主要几种材质

• MeshBasicMaterial

  • color
  • wireframe
  • wireframelinewidth
  • wireframelinecap
  • wireframeLineJoin
  • Shading
  • vertexColors
  • fog

• MeshDepthMaterial

  • 这个材质不受光线和材质属性的影响，主要由与物体离相机的距离决定 很容易结合其他材质产生阴影效果？？

image.png

- wireframe
- wireframeLineWidth

• MeshNormalMaterial
• MeshLambertMaterial
• MeshPhongMaterial
• ShaderMaterial
• LineBasicMaterial
• LineDashMaterial

材质的混合

var cubeMaterial  = new THREE.MeshDepthMaterial();
var colorMaterial = new THREE.MeshBasicMaterial({
 color: 0x00ff00, transparent: true, blending: THREE.MltiplyBlending});
var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial, cubeMaterial]);
// set depth to low layer
cube.children[1].scale.set(0.99, 0.99, 0.99); 

材质的主要属性

Basic property

• id : 每产生一种材质分配一个ID，并且从0开始，不断加一
• uuid:
• name : 材质名称
• opacity: 0~1
• transparent: true /false
• overdraw 使用THREE.CanvasRenderer多边形是否会更大些？？
• visible
• Side： THREE.FrontSide / THREE.BackSide/ THREE.DoubleSide
• needsUpdate: 当材质改变时需要告诉THREE.js

Blending

''' Materials have a couple of generic blending-related properties. Blending determines how the colors we render interact with the colors that are behind them. '''

• blending: THREE.NormalBlending
• blendsrc
• blenddst
• blendequation

Advance

与OpenGL关系比较大

• depthTest : GL_DEPTH_TEST This parameter controls whether the depth of a pixel is used to determine a new pixel's value
• depthWrite
• polygonOffset
• alphatest

ShaderMaterial