news 2026/9/8 17:00:02

three js 13 光照和阴影

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
three js 13 光照和阴影

文章目录

    • 1 灯光的类型
    • 2 材质
    • 3 如何场景有影子
    • 3 平行光
    • 4 聚光灯
    • 5 点光源

1 灯光的类型

平行光
点光
面光 无阴影
射灯

2 材质

以下材质会接受光照

MeshStandardMaterial 标准PBR材质,主要用这个
MeshPhysicalMaterial 高级物理材质 没用
MeshLambertMaterial 兰伯特材质 没用
MeshPhonMaterial Phon材质 没用
MeshToonMaterial 卡通材质

MeshBasicMaterial 不接受光照,只能使用光照贴图模拟光照效果

3 如何场景有影子

1 渲染器打开阴影渲染(默认关闭)
2 灯光打开阴影渲染(默认关闭)
3 物体打开投射阴影和接受阴影(默认关闭)

和物体材质无关

3 平行光

关键代码

//创建渲染器constrenderer=newTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);//把画布添加到div容器里//创建材质constmaterial_standard=newTHREE.MeshStandardMaterial();//创建模型constshpereGeometry=newTHREE.SphereGeometry(1,16,16);constplaneGeometry=newTHREE.PlaneGeometry(10,10);//创建网格letsphereMesh=newTHREE.Mesh(shpereGeometry,material_standard);letplaneMesh=newTHREE.Mesh(planeGeometry,material_standard);planeMesh.position.y=-1;planeMesh.rotation.x=-Math.PI/2;scene.add(sphereMesh);scene.add(planeMesh);//创建环境光constambientLight=newTHREE.AmbientLight(0xffffff,1);scene.add(ambientLight);//创建平行光constdirectionalLight=newTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(10,10,10);//position定义的是光源的位置,默认照向(0,0,0)scene.add(directionalLight);//打开阴影投射renderer.shadowMap.enabled=true;//开启渲染器渲染阴影directionalLight.castShadow=true;//开启光源投射阴影sphereMesh.castShadow=true;//开启模型投射阴影planeMesh.receiveShadow=true;//开启模型接收阴影

运行效果
## 平行光可选参数

directionalLight.shadow.radius=10;//阴影的模糊度,越小越锐利directionalLight.shadow.mapSize.set(1024,1024);//阴影贴图的大小,越大越清晰,长宽不必一致,但必须是2的整幂次。默认值为512*512directionalLight.shadow.camera.near=0.1;//阴影的近裁剪面directionalLight.shadow.camera.far=100;//阴影的远裁剪面 用来设置阴影的最大投射距离

4 聚光灯

//创建环境光constambientLight=newTHREE.AmbientLight(0xffffff,1);scene.add(ambientLight);//创建聚光灯constspotLight=newTHREE.SpotLight(0xffffff,100);//参数 1 为颜色//2 为强度//3 从光源出发的最大距离,默认是0,不限距离,如果不为0,则的设置的米处衰减为0//4 光锥角度最大为 Math.PI / 2(90度) 默认60度//5 聚光灯边缘的虚化效果 0-1 默认为0完全不虚化//6 沿光照距离的衰减量,影响亮度,必须启用物理渲染才会生效 renderer.physicallyCorrectLights = true;//开启物理正确光照spotLight.position.set(5,5,5);//position定义的是光源的位置,默认照向(0,0,0)scene.add(spotLight);//打开阴影投射renderer.shadowMap.enabled=true;//开启渲染器渲染阴影spotLight.castShadow=true;//开启光源投射阴影


聚光灯可选参数

spotLight.shadow.radius=10;//阴影的模糊度,越小越锐利spotLight.shadow.mapSize.set(1024,1024);//阴影贴图的大小,越大越清晰spotLight.shadow.camera.near=0.1;//阴影的近裁剪面spotLight.shadow.camera.far=100;//阴影的远裁剪面 用来设置阴影的最大投射距离

5 点光源

//创建环境光constambientLight=newTHREE.AmbientLight(0xffffff,1);scene.add(ambientLight);//创建点光源constpointLight=newTHREE.PointLight(0xffffff,10);//参数 1 为颜色,2 为强度pointLight.position.set(0,2,0);//position定义的是光源的位置 点光源没有朝向scene.add(pointLight);//打开阴影投射renderer.shadowMap.enabled=true;//开启渲染器渲染阴影pointLight.castShadow=true;//开启光源投射阴影
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/8 16:54:57

冻融循环与氯离子侵蚀耦合下的混凝土耐久性数值模拟

这几年在北方沿海、盐渍土地区跑项目,混凝土耐久性病害里最让人头疼的组合就是冻融循环和氯离子侵蚀同时出现。单独做冻融试验或单测氯离子扩散,结果往往偏乐观,现场却早早出现顺筋裂缝和表层剥落。原因在于这两个过程根本就不是简单叠加&…

作者头像 李华
网站建设 2026/9/8 16:53:35

Windows消息机制详解:从硬件事件到窗口过程的完整链路

刚把Windows系统的启动流程和进程调度捋清楚没多久,我又一头扎进了消息机制。这个知识点我老早就想整理成笔记,但一直觉得它既抽象又琐碎:网上能找到的资料要么停留在“给你一段WinMain抄一下”,要么就直接上MFC/消息循环源码&…

作者头像 李华
网站建设 2026/9/8 16:52:33

传感器实战解析:从原理到选型与信号处理

传感器这东西,干我们这行的天天跟它打交道,但真要说“懂”它,很多人其实是懵的。你问一个刚入行的工程师“传感器是啥”,他能给你背出“将非电量转换为电量的器件”这种教科书答案;但你问他“为什么你的称重数据老是漂…

作者头像 李华