Three.js学习之路（三丶材质，光源）

1.材质效果

材质类型

材质类型	功能
MeshBasicMaterial	基础网格材质，不受光照影响的材质
MeshLambertMaterial	Lambert网格材质，与光照有反应，漫反射
MeshPhongMaterial	高光Phong材质,与光照有反应
MeshStandardMaterial	PBR物理材质，相比较高光Phong材质可以更好的模拟金属、玻璃等效果

材质常见属性

材质属性	简介
color	材质颜色，比如蓝色0x0000ff
wireframe	将几何图形渲染为线框。 默认值为false
opacity	透明度设置，0表示完全透明，1表示完全不透明
transparent	是否开启透明，默认false

MeshStandardMaterial 这里看起来和MeshLambertMaterial 差不多，是因为这个需要加一些特殊参数可一模拟一些特殊的材质，这里我暂时不展开讲解，有需要的去找资料看看。

下面写一些示例：
半透明效果，在所有材质的方法里面加上opacity和transparent:true，就可以实现，如下

new THREE.MeshLambertMaterial({
  color: 0xff00ff,
  opacity:0.7,
  transparent:true
});

线条效果，在材质对象加入wireframe: true属性就可以把模型变成线条，如下

new THREE.MeshStandardMaterial({
  color: 0xff00ff,
  opacity:0.7,
  transparent:true,
  wireframe: true
});

线条效果可以和透明效果一起使用

2.光源效果

光源类型

光源	简介
AmbientLight	环境光
PointLight	点光源
DirectionalLight	平行光，比如太阳光
SpotLight	聚光源

//环境光
let ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
//点光源
let ambient = new THREE.PointLight(0x444444);
scene.add(ambient);
//平行光
let ambient = new THREE.DirectionalLight(0x444444);
scene.add(ambient);
//聚光源
let ambient = new THREE.SpotLight(0x444444);
scene.add(ambient);

光源可以设置多个

// 点光源2  位置和point关于原点对称
var point2 = new THREE.PointLight(0xffffff);
point2.position.set(-400, -200, -300); //点光源位置
scene.add(point2); //点光源添加到场景中