MeshBasicMaterial 网格基础材质

—> Material

使用这种材质的网格会被渲染成简单的平面多边形, 把 wireframe 设为 true, 你就可看到几何体的线框. 而且这种材质不考虑光照的影响, 缺乏立体感. 当然, 运算起来较快, 减低电脑硬件负担.

function MeshBasicMaterial( parameters ) { } var geometry = new THREE.BoxGeometry(6, 6, 6), material = new THREE.MeshBasicMaterial({color: 0xb180e3}), mesh = new THREE.Mesh(geometry, material); scene.add(mesh);

Attributes

type : String

Default value : MeshBasicMaterial
Description : 类型.

alphaMap : Texture

Default value : null
Description : 透明贴图.

aoMap : Texture

Default value : null
Description : 环境遮挡贴图 ( AO贴图: Ambient occlusion map ).

aoMapIntensity : Float ( 0 ~ 1 )

Default value : 1
Description : 环境遮挡贴图强度.

color : Color

Default value : 0xffffff
Description : 材质的颜色.

combine : Integer ( THREE.MultiplyOperation, THREE.MixOperation, THREE.AddOperation )

Default value : THREE.MultiplyOperation
Description : 如何将表面颜色与环境贴图结合起来.

envMap : TextureCube

Default value : null
Description : 环境贴图.

lightMap : Texture

Default value : null
Description : 光照贴图.

lights : Boolean

Default value : false
Description : 是否接受光照.

map : Texture

Default value : null
Description : 颜色贴图.

morphTargets : Boolean

Default value : false
Description : 是否使用变形目标.

reflectivity : Float ( 0 ~ 1 )

Default value : 1
Description : 反射率.

refractionRatio : Float ( 0 ~ 1 )

Default value : 0.98
Description : 折射率.

skinning : Boolean

Default value : false
Description : 是否使用皮肤.

specularMap : Texture

Default value : null
Description : 高光贴图

wireframe : Boolean

Default value : false
Description : 是否把模型渲染为线框. 默认是 false, 渲染为平面多边形.

wireframeLinewidth : Float

Default value : 1
Description : 线框线宽.

wireframeLinecap : String ( "butt", "round", "square" )

Default value : 'round'
Description : 线端点样式. WebGL 不支持, 但 Canvas 有效.

wireframeLinejoin : String ( "round", "bevel", "miter" )

Default value : 'round'
Description : 线连接点样式. WebGL 不支持, 但 Canvas 有效.

图解API

1. 透明, 混合模式 blending, 贴图 map

从左到右的三种材质分别是: 在 material2 中使用 transparent: true 和 blending: THREE.AdditiveBlending 可使自身透明, 把原来挡住的部分呈现出来. blending 还有 THREE.NormalBlending, THREE.SubtractiveBlending, THREE.MultiplyBlending. 点开查看

var texture = new THREE.TextureLoader().load('---.jpg'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; var material = new THREE.MeshBasicMaterial({ color: 0x663300 }), material2 = new THREE.MeshBasicMaterial({ color: 0x66ff66, transparent: true, blending: THREE.AdditiveBlending }), material3 = new THREE.MeshBasicMaterial({ color:0xffffff, map:texture }); 2. 环境贴图 envMap

如果使用 envMap, 会看到随镜头旋转时, 贴图也会跟着变化. 虽然 MeshBasicMaterial 不接收光照, 但可以用 envMap 来假装它反射了光照图案. 点开查看

var texture = new THREE.TextureLoader().load('---.jpg'); var envTexture = texture; envTexture.mapping = THREE.SphericalReflectionMapping; var material = new THREE.MeshBasicMaterial({color: 0x999999, map:texture}), material2 = new THREE.MeshBasicMaterial({color: 0x999999, envMap:envTexture}); 3. 光照贴图 lightMap

运用 lightMap 还可以做出虚假阴影效果, 使得 MeshBasicMaterial 这种超级节约CPU和内存资源的材质, 也能产生一定程度的立体效果. 从中也能看出, 3个 material 贴了同一幅图, 属性 color 不一样, 也会得出差异效果. 点开查看

var texture = new THREE.TextureLoader().load('---.jpg'); var lightTexture = new THREE.TextureLoader().load('~~~.png'); var material = new THREE.MeshBasicMaterial({color: 0xff9933, map:texture}), material2 = new THREE.MeshBasicMaterial({color: 0x663300, map:texture}), groundMaterial = new THREE.MeshBasicMaterial({color: 0x999999, map:texture, lightMap:lightTexture});