• three.js中的光源和材质设置(three.js常用参数设置)
  • 发布于 2个月前
  • 901 热度
    0 评论
5种光源
光源将影响物体显示的明暗,对渲染效果的影响非常的大。three.js中定义了基础氛围光,平行光,点光源,聚光灯光源,球谐光等光源。每种光源都有不同的效果。

AmbientLight(氛围光)
氛围光作为基础光线,将应用到场景中的所有三维物体上,一般需要配合其他光源一起使用。AmbientLight不能产生阴影,也不需要指定坐标位置。设置好颜色和强度就ok了。
ambientLight = new THREE.AmbientLight(0xDFDFDF, 0.3);
scene.add(ambientLight);
DirectionalLight(平行光)
DirectionalLight是较经常使用的光源,它的光纤都是平行向着一个方向发射的。所以使用DirectionalLight我们可以模拟类似太阳光的环境光照效果。
lightDirect = new THREE.DirectionalLight(0xf2f2f2, 0.8);
lightDirect.position.set(20, 20, -20); 
scene.add(lightDirect);
PointLight(点光源)
点光源类似我们生活中的灯泡,光是没有固定方向,向着四周散射的。
lightPoint = new THREE.PointLight(0xE9E9E9, 0.9);
lightPoint.position.set(0, 10, -5);
scene.add(lightPoint);
SpotLight(聚光灯光源)
SpotLight可以产生类似聚光灯的效果。
lightSpot = new THREE.SpotLight(0xE9E9E9);
    lightSpot.position.set(0, 20, -20);
    lightSpot.castShadow = true;
    lightSpot.angle = Math.PI / 4;
    lightSpot.penumbra = 0.3;
    scene.add(lightSpot);
HemisphereLight(半球光源)
HemisphereLight可以更加真实的模拟自然光源,因为它不仅可以提供天空中的光线,还提供了来自地面漫反射的地面光线。HemisphereLight不能产生阴影

// 堆代码 duidaima.com
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 ); 
scene.add( light );

 第一个参数是天空的光线颜色,第二个参数是地面反射光的颜色,第三个参数是强度


阴影
伴随着光源随之一起的自然是阴影,开启阴影对增强三维物体的立体效果十分明显。但是,一般开启实时渲染的阴影,对性能也有一定的损失。threejs在场景中,我们想让物体产生阴影,需要做以下设置:

设置渲染器开启阴影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
设置光线开启阴影
light.castShadow = true;
设置需要产生阴影的mesh
cube.castShadow = true;
设置接收阴影的mesh(如地面等)
plane.receiveShadow = true;

4种材质
材质一般是应用在mesh上,用来模拟物体的表面,在光线、阴影等因素的作用下所展示出来的最终效果。比如我们经常说的高光材质,漫反射材质等等,其实都是在描述物体的表面如何处理光线作用。不同的作用结果,最终将呈现不同的效果到我们的眼睛。threejs常见的内置材质有基础材质(MeshBasicMaterial),高光材质(MeshPhongMaterial),漫反射材质(MeshLambertMaterial),标准PBR材质(MeshStandardMaterial)等。

1.MeshBasicMaterial 材质是一种较为基础材质,且不会受光照的影响,所以物体看上去并没有很多棱角,而偏向扁平化。
2.MeshPhongMaterial 高光材质,用来模拟一些高光效果。类似金属,塑料这种有高光斑点的材质。
3.MeshLambertMaterial材质是漫反射材质,漫反射材质一般用来模拟表面较为粗糙,不会直接反射的表面,而是漫反射光线的材质。例如墙壁、衣服等。
4.MeshStandardMaterial 一种pbr(Physically based rendering)材质,用来模拟物理的材质属性。一般使用金属性metalness和粗糙度roughness来控制最终外观的效果。

示例
// 堆代码 duidaima.com 
let mesh = gltf.scene//模型对象
 mesh.material = new THREE.MeshStandardMaterial({
 // 默认 0.5. 0.0到1.0之间的值可用于生锈的金属外观
   metalness: 0.5,
 // 材料的粗糙程度. 0.0表示平滑的镜面反射,1.0表示完全漫反射. 默认 0.5
   roughness: 0.5,
 })
 gltf.scene.material.shininess = 1;
 gltf.scene.castShadow = true;
 gltf.scene.receiveShadow 

用户评论