Three.js 无法将点光源添加到场景中

我正在尝试向场景添加一些点光源，但场景停止渲染，控制台中记录了以下错误：

ERROR: 0:113: '' : array size must be a positive integer
ERROR: 0:113: '' : array size must be a positive integer
ERROR: 0:114: '' : array size must be a positive integer
ERROR: 0:114: '' : array size must be a positive integer
ERROR: 0:115: '' : array size must be a positive integer
ERROR: 0:115: '' : array size must be a positive integer
ERROR: 0:116: '' : array size must be a positive integer
ERROR: 0:116: '' : array size must be a positive integer
ERROR: 0:117: '' : array size must be a positive integer
ERROR: 0:117: '' : array size must be a positive integer

堆栈跟踪如下所示：

getShader (type="fragment", string="precision highp float;\n..., fogFactor );\n#endif\n}")three.js line 24659
buildProgram (shaderID="phong", fragmentShader="uniform vec3 diffuse;\nu..., fogFactor );\n#endif\n}", vertexShader="#define PHONG\nvarying v...rldPosition;\n}\n#endif\n}", uniforms=Object { diffuse={...}, opacity={...}, map={...}, more...}, attributes=undefined, defines=undefined, parameters=Object { map=true, envMap=false, lightMap=false, more...})three.js line 24502
initMaterial(material=Object { id=0, side=0, opacity=1, more...}, lights=[Object { id=3,  properties={...},  parent={...},  more...}, Object { id=4,  properties={...},  parent={...},  more...}, Object { id=5,  properties={...},  parent={...},  more...}, 2 more...], fog=null, object=Object { id=8, properties={...}, parent={...}, more...})three.js line 23039
setProgram(camera=Object { id=1, properties={...}, parent={...}, more...}, lights=[Object { id=3,  properties={...},  parent={...},  more...}, Object { id=4,  properties={...},  parent={...},  more...}, Object { id=5,  properties={...},  parent={...},  more...}, 2 more...], fog=null, material=Object { id=0, side=0, opacity=1, more...}, object=Object { id=8, properties={...}, parent={...}, more...})three.js line 23109
renderBuffer(camera=Object { id=1, properties={...}, parent={...}, more...}, lights=[Object { id=3,  properties={...},  parent={...},  more...}, Object { id=4,  properties={...},  parent={...},  more...}, Object { id=5,  properties={...},  parent={...},  more...}, 2 more...], fog=null, material=Object { id=0, side=0, opacity=1, more...}, geometryGroup=Object { faces3=[0], faces4=[1], materialIndex=0, more...}, object=Object { id=8, properties={...}, parent={...}, more...})three.js line 21576
renderObjects (renderList=[Object { buffer={...},  object={...},  opaque={...},  more...}], reverse=true, materialType="opaque", camera=Object { id=1, properties={...}, parent={...}, more...}, lights=[Object { id=3,  properties={...},  parent={...},  more...}, Object { id=4,  properties={...},  parent={...},  more...}, Object { id=5,  properties={...},  parent={...},  more...}, 2 more...], fog=null, useBlending=false, overrideMaterial=null)three.js line 22248
render(scene=Object { id=2, properties={...}, children=[7], more...}, camera=Object { id=1, properties={...}, parent={...}, more...}, renderTarget=undefined, forceClear=undefined)three.js line 22122
animate() line 154
marinbezhanov.com:8080()

我的代码如下所示：

if (!Detector.webgl) Detector.addGetWebGLMessage();

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

var container, camera, scene, renderer, light1, light2, light3, light4;

var clock = new THREE.Clock();

// INIT

container = document.createElement('div');
document.body.appendChild(container);

// CAMERA

camera = new THREE.PerspectiveCamera(80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 4096);
camera.position.set(0, 512, 1024);

// SCENE

scene = new THREE.Scene();
scene.add(camera);

// LIGHTS

scene.add( new THREE.AmbientLight( 0x000000 ) );

light1 = new THREE.PointLight( 0xff0040, 2, 50 );
scene.add( light1 );

light2 = new THREE.PointLight( 0x0040ff, 2, 50 );
scene.add( light2 );

light3 = new THREE.PointLight( 0x80ff80, 2, 50 );
scene.add( light3 );

light4 = new THREE.PointLight( 0xffaa00, 2, 50 );
scene.add( light4 );

//  GROUND

var gt = THREE.ImageUtils.loadTexture("textures/texture.jpg");
var gg = new THREE.PlaneGeometry(4096, 4096);
var gm = new THREE.MeshPhongMaterial({color:0x777777, map:gt});

var ground = new THREE.Mesh(gg, gm);
ground.rotation.x = -Math.PI / 2;
ground.material.map.repeat.set(16, 16);
ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
ground.receiveShadow = true;

scene.add(ground);

// RENDERER

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

container.appendChild( renderer.domElement );

renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMapEnabled = true;

renderer.shadowMapCascade = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;

// STATS

var stats = new Stats();
container.appendChild(stats.domElement);

// CONTROLS

cameraControls = new THREE.TrackballControls( camera, renderer.domElement );
cameraControls.target.set( 0, 50, 0 );          

// ANIMATE

function animate()
{
    requestAnimationFrame(animate);
    var delta = clock.getDelta();
    cameraControls.update(delta);
    renderer.render(scene, camera);
    stats.update();
}

animate();

当我使用平行光或聚光灯取而代之时，场景渲染效果很好，我没有得到任何错误。你知道为什么会这样吗

---

我使用的是r56

点光源

在r.56中不投射阴影

这是你的问题线：

ground.receiveShadow = true;

另外，确保你的灯光“高于”你的地平面，并且你的相机正朝着正确的方向看东西

摄像机。注视（场景。位置）

---

three.js r.56

为了清晰起见，点光源并没有造成问题，而是缺少阴影投射光源。将聚光灯添加到场景中会起作用，但点光源可能会保持不变。我怀疑错误在于创建了一个“阴影”灯光数组，但它是空的。