MeshPhongMaterial 上的三个 js RectAreaLight 没有光反射（不支持 OES_texture_half_float）

【问题标题】：Three js RectAreaLight on MeshPhongMaterial no light reflection (OES_texture_half_float not supported)MeshPhongMaterial 上的三个 js RectAreaLight 没有光反射（不支持 OES_texture_half_float）
【发布时间】：2021-11-17 22:54:05
【问题描述】：

我想将 RectAreaLight 添加到一个 three.js 场景中，在该场景中我使用 MeshPhongMaterial 放置对象，但是对象上没有光反射。我在这里找到了一个工作示例： Link

打开开发者工具即可看到源代码。

所以我尝试将它移植到 React 并且场景渲染所有对象但有光反射。在第 46 行，抛出了 OES_texture_half_float 错误。我把这行注释掉了。或许与此有关。

这是不工作的代码框： Link

【问题讨论】：

标签： javascript reactjs three.js webgl

【解决方案1】：

您的代码中有几个问题：

您必须导入RectAreaLightUniformsLib 并调用其init() 方法。
如documentation 中所述，RectAreaLight 仅支持 PBR 材质（即MeshStandardMaterial 和MeshPhysicalMaterial）。
目前还没有阴影支持，因此设置 castShadow 和 receiveShadow 等标志不会有任何效果。

固定代码框：https://codesandbox.io/s/restless-cherry-4jh72

【讨论】：

谢谢它工作正常 :) 只是想知道第一个例子使用 MeshPhongMaterial
上述示例使用79dev。当时支持MeshPhongMaterial（但实现不正确，因为RectAreaLight的实现与phong材质不兼容）。