javascript - 自定义着色器中的灯光位置（着色器材质）

Question

我正在用 webgl 开发体积渲染应用程序，我要做的最后一件事是创建一个光照模型。我已经准备好了一切，但我无法获得场景中的灯光位置。我以这种方式添加灯光：

 var light = new THREE.DirectionalLight(0xFFFFFF, 1);
 light.position.set(0.5, 0.5, 0.1).normalize();
 camera.add(light);

我将光连接到相机，因为如果我用相机移动，我需要有光静态。问题是，我正在使用 ShaderMaterial（自定义着色器）。我找不到任何代表光位置的统一变量。我已经搜索过，我应该设置：

material.lights = true;

但它导致了错误。

Uncaught TypeError: Cannot set property 'value' of undefined 

我试图在顶点着色器中添加常量向量，但我需要乘以逆视图矩阵（如果我是对的）。但是 GLSL 1.0 不支持反函数。我有想法通过制服将逆视图矩阵发送到着色器，但我不知道在哪里可以获得 JS 中场景的视图矩阵。

感谢帮助。我已经尝试了一切:( ...

再见。

Answer 1

如果要将灯光添加为相机的子级并设置material.lights = true，则必须将相机添加为场景的子级。

scene.add( camera );

三.js r.57

Answer 2

如果您尝试使用相机将光坐标从模型空间投影到屏幕空间，这里有一个功能（由 Thibaut Despoulain 提供）可能会有所帮助 -

var projectOnScreen = function(object, camera)
{
var mat = new THREE.Matrix4();
mat.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld);
mat.multiplyMatrices( camera.projectionMatrix , mat);

var c = mat.n44;
var lPos = new THREE.Vector3(mat.n14/c, mat.n24/c, mat.n34/c);
lPos.multiplyScalar(0.5);
lPos.addScalar(0.5);
return lPos;
}