three.js灯光与阴影

不论我们是在生活中,还是在threejs中。说到阴影肯定和光是分不开的。

在网上有很多说threejs中阴影与材质有关系。其实说的不准确,准确的说是接收阴影的对象对材质有要求。而投射阴影的对象对材质是没有要求的。

以下是我测试的可以正确接收到阴影的材质。(如有错误欢迎指出)

Phong网格材质(MeshPhongMaterial)

物理网格材质(MeshPhysicalMaterial)

标准网格材质(MeshStandardMaterial)

卡通网格材质(MeshToonMaterial)

说完材质我们进入正题,开始讲解 灯光与阴影

首先说说灯光吧。并不是所有的灯光都会投射阴影。能够投射阴影的灯光只有以下三种:

平行光(DirectionalLight)

点光源(PointLight)

聚光灯(SpotLight)

并且当你在场景中添加了以上某种光源之后,并不会有阴影出现,还需要一系列的其他设置。

一、渲染器开启阴影渲染

//如果设置, 请在场景中使用阴影贴图。 默认是 false
renderer.shadowMap.enabled = true;

二、接收阴影的对象开启 receiveshadow 属性

//接收阴影
mesh.receiveShadow = true;

三、投射阴影的物体开启  castshadow 属性

//开启投影
mesh.castShadow = true;

四、光源开启 castShadow 属性

//此属性设置为 true 聚光灯将投射阴影。警告: 这样做的代价比较高而且需要一直调整到阴影看起来正确。
light.castShadow = 

你可能感兴趣的:(three.js)