three.js에서 포인트 라이트를 구성하는 방법

나는 three.js에 대한 시작 튜토리얼을 따라 갔지만 장면에 포인트 라이트를 추가하려고 꽤 빨리 막혔습니다. 내 코드를 어떻게 처리 할지라도 점 광원은 큐브에 결코 불이 들어오지 않습니다.three.js에서 포인트 라이트를 구성하는 방법

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, 
      window.innerWidth/window.innerHeight, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 

document.body.appendChild(renderer.domElement); 

camera.position.z = 55; 

var light = new THREE.PointLight(0xff0000, 1, 100, 2); 
light.position.set(20,0,20); 
light.castShadow = true; 

scene.add(light); 

var spheresize = 1; 
var pointLightHelper = new THREE.PointLightHelper(light, spheresize); 
scene.add(pointLightHelper); 

var ambient = new THREE.AmbientLight(0x303030); 
scene.add(ambient); 

var cube_geometry = new THREE.BoxGeometry(10,10,10); 
var cube_material = new THREE.MeshLambertMaterial({color:0x00ff00}); 
var cube = new THREE.Mesh(cube_geometry, cube_material); 
scene.add(cube); 

animate(); 


function animate(){ 
    requestAnimationFrame(animate); 

    cube.rotation.y += 0.01; 

    renderer.render(scene, camera); 
}

위의 코드에서, I는 광 헬퍼가 표시되고, 녹색 큐브 주변 광에 의해 조명되어 있지만 광은 점 광원 (첨부 이미지 참조)로부터 온다 볼 수있다. 나는 무엇을 놓쳤는가? 큐브를 조명하기 위해 포인트 라이트를 얻으려면 어떻게해야합니까?