文章目录1 灯光的类型2 材质3 如何场景有影子3 平行光4 聚光灯5 点光源1 灯光的类型平行光点光面光 无阴影射灯2 材质以下材质会接受光照MeshStandardMaterial 标准PBR材质主要用这个MeshPhysicalMaterial 高级物理材质 没用MeshLambertMaterial 兰伯特材质 没用MeshPhonMaterial Phon材质 没用MeshToonMaterial 卡通材质MeshBasicMaterial 不接受光照只能使用光照贴图模拟光照效果3 如何场景有影子1 渲染器打开阴影渲染默认关闭2 灯光打开阴影渲染默认关闭3 物体打开投射阴影和接受阴影默认关闭和物体材质无关3 平行光关键代码//创建渲染器constrenderernewTHREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);//把画布添加到div容器里//创建材质constmaterial_standardnewTHREE.MeshStandardMaterial();//创建模型constshpereGeometrynewTHREE.SphereGeometry(1,16,16);constplaneGeometrynewTHREE.PlaneGeometry(10,10);//创建网格letsphereMeshnewTHREE.Mesh(shpereGeometry,material_standard);letplaneMeshnewTHREE.Mesh(planeGeometry,material_standard);planeMesh.position.y-1;planeMesh.rotation.x-Math.PI/2;scene.add(sphereMesh);scene.add(planeMesh);//创建环境光constambientLightnewTHREE.AmbientLight(0xffffff,1);scene.add(ambientLight);//创建平行光constdirectionalLightnewTHREE.DirectionalLight(0xffffff,1);directionalLight.position.set(10,10,10);//position定义的是光源的位置默认照向(0,0,0)scene.add(directionalLight);//打开阴影投射renderer.shadowMap.enabledtrue;//开启渲染器渲染阴影directionalLight.castShadowtrue;//开启光源投射阴影sphereMesh.castShadowtrue;//开启模型投射阴影planeMesh.receiveShadowtrue;//开启模型接收阴影运行效果## 平行光可选参数directionalLight.shadow.radius10;//阴影的模糊度越小越锐利directionalLight.shadow.mapSize.set(1024,1024);//阴影贴图的大小越大越清晰长宽不必一致但必须是2的整幂次。默认值为512*512directionalLight.shadow.camera.near0.1;//阴影的近裁剪面directionalLight.shadow.camera.far100;//阴影的远裁剪面 用来设置阴影的最大投射距离4 聚光灯//创建环境光constambientLightnewTHREE.AmbientLight(0xffffff,1);scene.add(ambientLight);//创建聚光灯constspotLightnewTHREE.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.enabledtrue;//开启渲染器渲染阴影spotLight.castShadowtrue;//开启光源投射阴影聚光灯可选参数spotLight.shadow.radius10;//阴影的模糊度越小越锐利spotLight.shadow.mapSize.set(1024,1024);//阴影贴图的大小越大越清晰spotLight.shadow.camera.near0.1;//阴影的近裁剪面spotLight.shadow.camera.far100;//阴影的远裁剪面 用来设置阴影的最大投射距离5 点光源//创建环境光constambientLightnewTHREE.AmbientLight(0xffffff,1);scene.add(ambientLight);//创建点光源constpointLightnewTHREE.PointLight(0xffffff,10);//参数 1 为颜色2 为强度pointLight.position.set(0,2,0);//position定义的是光源的位置 点光源没有朝向scene.add(pointLight);//打开阴影投射renderer.shadowMap.enabledtrue;//开启渲染器渲染阴影pointLight.castShadowtrue;//开启光源投射阴影