了解three.js中的物理正确照明

我可能误解了一些事情，但是。。。我试图在three.js中使用物理正确的照明和基于物理的渲染

我做了一个简单的场景。在这种情况下，只有一架飞机。我把灯放在飞机上方2个单位（2米）的地方。该平面使用

网格标准材料

，粗糙度为.9，金属度为0。灯的

功率设置为800，如果我理解正确的话，它是800流明，相当于一个60瓦的灯泡。我设置了renderer.physicallyCorrectLights=true

结果如下：

这个结果看起来一点也不像一个60瓦的灯泡离地板2米高

我做错什么了吗

“严格使用”；
/*全球数据*/
函数main（）{
const canvas=document.querySelector（“#c”）；
const renderer=new THREE.WebGLRenderer（{canvas:canvas}）；
renderer.physicallyCorrectLights=true；
常数fov=45；
常量方面=2；
常数zNear=0.1；
常数zFar=100；
const-camera=新的三视角摄像机（视野、方位、zNear、zFar）；
摄像机位置设置（0,10,20）；
摄像机。注视（0，5，0）；
const scene=new THREE.scene（）；
scene.background=新的三种颜色（“黑色”）；
{
常数平面尺寸=40；
const planeGeo=新的三个PlaneBuffer几何体（planeSize，planeSize）；
const planeMat=新的三点网格标准材料({
颜色：'#C84'，
三面，双面，
粗糙度：0.9，
金属度：0，
});
常量网格=新的三个网格（planeGeo、planeMat）；
mesh.rotation.x=Math.PI*-.5；
场景。添加（网格）；
}
{
常量颜色=0xFFFFFF；
常数强度=1；
恒光=新的三点光（颜色、强度）；
光功率=800；
光衰减=2；
距离=无穷远；
光。位置。设置（0，2，0）；
场景。添加（灯光）；
const helper=new THREE.PointLightHelper（灯光）；
场景.添加（助手）；
}
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
设置大小（宽度、高度、假）；
}
返回需要调整大小；
}
函数render（）{
if（ResizeRenderToDisplaySize（渲染器））{
const canvas=renderer.domeElement；
camera.aspect=canvas.clientWidth/canvas.clientHeight；
camera.updateProjectMatrix（）；
}
渲染器。渲染（场景、摄影机）；
}
render（）；
window.onresize=渲染；
}
main（）
html，正文{
保证金：0；
身高：100%；
}
#c{
宽度：100%；
身高：100%；
显示：块；
}
在制作物理场景时，必须考虑曝光（f-stop）设置。我找不到相机的专用设置来实现这一点（这可能是找到它的自然场所），但渲染器本身有一个曝光设置-

您可以使用渲染器上的设置来找到一个好的值，例如：

renderer.toneMappingExposure = Math.pow(0.7, 5.0);  // -> exposure: 0.168

例如，更真实的电力价值：

light.power = 740;  // GE Lumens @ 60W incandescent 


技术考虑：瓦特不能直接转换成流明，因为不同品牌在相同瓦特下产生不同流明值；在使用60W白炽灯的情况下，它们实际上可以在400-1000流明之间变化（GE使用740流明左右）。但这是一个侧重点：）


“严格使用”；
/*全球数据*/
函数main（）{
const canvas=document.querySelector（“#c”）；
const renderer=new THREE.WebGLRenderer（{canvas:canvas}）；
renderer.physicallyCorrectLights=true；
renderer.toneMappingExposure=Math.pow（0.7,5.0）；
常数fov=45；
常量方面=2；
常数zNear=0.1；
常数zFar=100；
const-camera=新的三视角摄像机（视野、方位、zNear、zFar）；
摄像机位置设置（0,10,20）；
摄像机。注视（0，5，0）；
const scene=new THREE.scene（）；
scene.background=新的三种颜色（“黑色”）；
{
常数平面尺寸=40；
const planeGeo=新的三个PlaneBuffer几何体（planeSize，planeSize）；
const planeMat=新的三点网格标准材料({
颜色：'#C84'，
三面，双面，
粗糙度：0.9，
金属度：0，
});
常量网格=新的三个网格（planeGeo、planeMat）；
mesh.rotation.x=Math.PI*-.5；
场景。添加（网格）；
}
{
常量颜色=0xFFFFFF；
常数强度=1；
恒光=新的三点光（颜色、强度）；
light.power=740；//GE流明@60W英寸。
光衰减=2；
距离=无穷远；
光。位置。设置（0，2，0）；
场景。添加（灯光）；
const helper=new THREE.PointLightHelper（灯光）；
场景.添加（助手）；
}
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
设置大小（宽度、高度、假）；
}
返回需要调整大小；
}
函数render（）{
if（ResizeRenderToDisplaySize（渲染器））{
const canvas=renderer.domeElement；
camera.aspect=canvas.clientWidth/canvas.clientHeight；
camera.updateProjectMatrix（）；
}
渲染器。渲染（场景、摄影机）；
}
render（）；
window.onresize=渲染；
}
main（）
html，正文{
保证金：0；
身高：100%；
}
#c{
宽度：100%；
身高：100%；
显示：块；
}
在制作物理场景时，必须考虑曝光（f-stop）设置。我找不到相机的专用设置来实现这一点（这可能是找到它的自然场所），但渲染器本身有一个曝光设置-

您可以使用渲染器上的设置来找到一个好的值，例如：

renderer.toneMappingExposure = Math.pow(0.7, 5.0);  // -> exposure: 0.168

比如一个mo