材质决定了物体是否透明颜色等
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
