WebGL，Three.js-灯光、阴影

我对灯光对目标的聚焦有问题（需要聚焦在主角身上，使背景更暗）。第二个问题是，阴影不起作用。下面是处理灯光和阴影的部分代码。有什么想法吗

index.html文件

//////////////////////////////////////////////////////////////////////////////////
//      renderer setup                          //
//////////////////////////////////////////////////////////////////////////////////

var renderer    = new THREE.WebGLRenderer();
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//////////////////////////////////////////////////////////////////////////////////
//      default 3 points lightning                  //
//////////////////////////////////////////////////////////////////////////////////

var ambientLight= new THREE.AmbientLight( 0x020202 )
scene.add( ambientLight)

var frontLight  = new THREE.DirectionalLight('white', 1)
frontLight.position.set(0.5, 0.5, 0.5)
frontLight.castShadow = true
scene.add( frontLight )

var backLight   = new THREE.DirectionalLight('white', 0.5)
backLight.position.set(-0.5, -0.5, -0.5)
scene.add( backLight )

frontLight.shadowMapSize = new THREE.Vector2( 512, 512 )
frontLight.shadowCamera = new THREE.OrthographicCamera( 0, 0, 0, 0, 0.5, 500 )

var pointLight  = new THREE.SpotLight('white', 0.1)
pointLight.position.set(0,5,5)
scene.add( pointLight )

//////////////////////////////////////////////////////////////////////////////////
//      obstacle (short version)                                            //
//////////////////////////////////////////////////////////////////////////////////

scene.add(obstacle)
obstacle.position.x = 0.00
obstacle.castShadow = true

//////////////////////////////////////////////////////////////////////////////////
//      Init floor                  //
//////////////////////////////////////////////////////////////////////////////////
function generateRoad(z){
    var road = THREEx.Environment.road()
    road.receiveShadow =  true
    scene.add(road)
    var velocity    = new THREE.Vector3(0, 0, z);
    road.position.add(velocity)
}

---

一般来说，您的代码是有效的。唯一的问题是阴影摄影机，它在x和y方向的范围为0.0。把它改成这样：

frontLight.shadow.camera = new THREE.OrthographicCamera( -10, 10, 10, -10, 0.5, 500 );

请注意，定义视图矩阵和正交投影矩阵

投影矩阵描述从场景的三维点到视口的二维点的映射。投影矩阵从视图空间变换到剪辑空间。通过与剪辑坐标的

w

分量相除，剪辑空间中的坐标转换为（-1，-1，-1）至（1,1,1）范围内的归一化设备坐标（NDC）。NDC之外的每个几何体都会被剪裁。
在正交投影时，眼睛空间中的坐标线性映射到标准化设备坐标

当您使用三个正交摄影机（0,0,0,0,0,0.5500）时，则

左侧

，

右侧

，

顶部

和

底部

为0。这意味着您尝试将0.0和0.0之间的区域映射到NDC

请参阅代码片段：

var渲染器、场景、控件、摄影机；
var init=函数（）{
场景=新的三个。场景（）；
renderer=new THREE.WebGLRenderer（）；
var color=新的三种颜色（“rgb（200250250）”；
renderer.setClearColor（新的THREE.Color（Color））；
renderer.setSize（window.innerWidth、window.innerHeight）；
摄像头=新的三透视摄像头（45，window.innerWidth/window.innerHeight，0.11000）；
camera.position.x=-20；
摄像机位置y=-30；
摄像机位置z=20；
camera.up=新的三个矢量3（0,0,1）；
摄像机。注视（场景。位置）；
控制装置=新的三个控制装置（摄像机）；
var环境光=新的三个环境光（0x02002）
场景。添加（环境光）
var frontLight=新的三个方向灯（“白色”，1）
前照灯位置设置（0.5,0.5,0.5）
frontLight.castShadow=true
场景.添加（前照灯）
var背光=新的三方向光（'白色'，0.5）
背光.位置.设置（-0.5，-0.5，-0.5）
场景.添加（背光）
frontLight.shadowMapSize=新的3.Vector2（512）；
frontLight.shadow.camera=新的三个正交摄影机（-10,10,10，-10,0.5500）；
var pointLight=新的三点聚光灯（'白色'，0.1）
点光源位置设置（0,5,5）
场景.添加（点光源）
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；//默认值THREE.PCFShadowMap
var ejesAyuda=新的三个。AxesHelper（20）；//儿子是阿尤达·克鲁
场景。添加（ejesAyuda）；
var planeGeometry=新的三个平面几何体（60,20）；
var planeMaterial=new THREE.MeshLambertMaterial（{color:0xCCCC}）；
var立方计量法=新的三个立方计量法（4,4,4）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xff0000}）；
var障碍=新的三网格（立方测量法、立方材料）；
障碍物.castShadow=true；//con esto le indicamos que queremos que emita sombra
障碍物位置x=0；
场景。添加（障碍物）；
发电机负载（-3）；
document.getElementById（“WebGL salida”）.append（renderer.doElement）；
调整大小（）；
window.onresize=调整大小；
};
函数生成器AD（z）{
var planeGeometry=新的三个平面几何体（60,20）；
var planeMaterial=new THREE.MeshLambertMaterial（{color:0xCCCC}）；
var road=新的三个网格（平面几何体、平面材质）；
//var road=THREEx.Environment.road（）
road.receiveShadow=true
场景.添加（道路）
var速度=新的三个矢量3（0，0，z）；
道路。位置。添加（速度）
}
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}
函数resize（）{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
}
init（）；
制作动画（）

您的阴影摄影机的大小为
0,0,0,0
，在three.js的最新版本中，阴影摄影机应为
shadow.camera
。明白了，我明白了。是的，我有旧版本的Three.js和shadowCamera，但我会尝试固定大小。谢谢你们。@DonMcCurdy我试着改变相机的尺寸，但没用。@Rabbid76这和我用的是一样的。谢谢你们，但还有其他想法吗？