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

时间:2013-03-03 21:03:14

标签: 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();

当我使用Directional Lights或Spot Lights时 - 场景呈现正常,我没有错误。任何想法为什么会发生这种情况?

我正在使用 r56

1 个答案:

答案 0 :(得分:2)

PointLights不会在r.56中投射阴影。

这是你的问题:

ground.receiveShadow = true;

此外,请确保您的灯光位于地平面“上方”,并且您的相机正朝着正确的方向查看。

camera.lookAt(scene.position);

three.js r.56