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 );

three.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;
}

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

2 个答案: