无法在场景中添加点灯

Question

我试图在场景中添加一些点灯，但是该场景将停止呈现，并在控制台中记录以下错误：

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

Answer 1

PointLights在r.56中不投阴影。

这是你的问题线：

ground.receiveShadow = true;

此外，确保你的灯是“在”你的地面平面和你的相机是朝正确的方向看什么东西。

camera.lookAt( scene.position )；

three.js r.56号