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); //点光源添加到场景中