文章目录
- 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;//开启光源投射阴影