申请域名后 怎么把网站部署上去,企业网站托管服务公司,网站建设也笔试,单页电影网站源码目录
Three.js入门
Three.js光源
Three.js阴影
使用灯光后#xff0c;场景中就会产生阴影。物体的背面确实在黑暗中#xff0c;这称为核心阴影#xff08;core shadow#xff09;。我们缺少的是落下的阴影#xff08;drop shadow#xff09;#xff0c;即对象在其他…目录
Three.js入门
Three.js光源
Three.js阴影
使用灯光后场景中就会产生阴影。物体的背面确实在黑暗中这称为核心阴影core shadow。我们缺少的是落下的阴影drop shadow即对象在其他对象上创建阴影。本文主要探索是落下的阴影drop shadow的相关内容。 支持阴影的光源类型
前面的文章我们有介绍过只有部分光源支持阴影
平行光(DirectionalLight)点光源(PointLight)聚光灯(SpotLight)
它们对应的阴影在three.js中也有对应的实现类
平行光阴影(DirectionalLightShadow)点光源阴影(PointLightShadow)聚光灯阴影(SpotLightShadow)
阴影的代码实现
在入门系列中有介绍阴影的基本代码实现这里再简单叙述一遍。主要分为四个步骤
告诉渲染器显示阴影贴图renderer.shadowMap.enabled true;对需要投影的物体设置castShadow为truesphere.castShadow true; 对需要接收投影的物体设置receiveShadow为trueplane.receiveShadow true; 最后对可以产生阴影的光源设置castShadow为truelight.castShadow true;至此我们应该就可以在接收投影的物体上看到阴影了
阴影的实现原理
每次渲染时three.js 将为每个支持阴影的光源都会做一次渲染。
光源具有一个相机以这个相机为视角进行渲染光源的渲染结果被作为纹理存储起来也就是 阴影贴图shadow map;阴影贴图将被用于所有需要接受阴影的材质material并投影到几何体geometry上。 有些材质不接受光照所以材质也会影响阴影的显示。 阴影的优化和调整
阴影贴图大小
directionalLight.shadow.mapSize.width 1024;
directionalLight.shadow.mapSize.height 1024;阴影贴图越大约清晰但是越消耗资源;512和1024大小对比图就可以看出来对比效果是1024更清晰(运行效果更明显)。 相机设置
幅度
我们先来看一个阴影不完整的现象 正交相机OrthographicCamera
平行光源用的是正交相机进行渲染
export class DirectionalLight extends LightDirectionalLightShadow {shadow: DirectionalLightShadow;
}export class DirectionalLightShadow extends LightShadowOrthographicCamera {camera: OrthographicCamera;
}用相机辅助线看一下光线的阴影的相机视角
const cameraHelper new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(cameraHelper);球体超过了阴影的相机视角的上边缘。 扩大相机的上边缘
directionalLight.shadow.camera.top 8; // 这个值不是固定的视场景不同far
和相机的渲染一致设置相机的far,可以控制是否显示阴影。
directionalLight.shadow.camera.far 100;Blur 模糊
我们可以使用 radius 属性控制阴影模糊
directionalLight.shadow.radius 20阴影的边缘会有模糊的效果。 阴影的类型
在Three.js中ShadowMapType枚举定义了几种阴影映射的类型
BasicShadowMap基本阴影映射类型使用简单的阴影投影算法生成阴影。这是默认的阴影映射类型。 性能优秀但是质量不好默认 PCFShadowMap使用 Percentage-Closer Filtering (PCF)技术生成阴影以获得更平滑的阴影边缘效果。 性能稍差但是拥有光滑的边缘 PCFSoftShadowMap使用软阴影技术生成阴影通过多次采样和模糊处理来产生更柔和的阴影效果。 性能稍差但是拥有更 soft 的边缘 VSMShadowMap使用Variance Shadow Mapping (VSM)技术生成阴影以获得更高质量的阴影效果和更柔和的阴影边缘。 性能稍差更多限制有着意想不到的效果 代码实现
renderer.shadowMap.type THREE.BasicShadowMap;我项目中使用倒是看不出来有啥大的区别。
