three.js pointlight似乎不工作

我对webgl和three.js也很陌生,所以这可能是一个非常基本的问题,总是有人问过。

我在玩我的代码是制造小太阳系。

我使用聚光灯和聚光灯助手,以及聚光灯和聚光灯助手。 我用的几何是盒形几何和球度测量。虽然BoxGeometry似乎从PointLight得到了一束光,但是球体测量学却没有。

你认为我做错了什么问题? 提前感谢您抽出时间。

var width, height;
    var camera, renderer, scene;

    var position = {
        earth: {
            x: 200,
            y: 1,
            z: 0,
            theta: 0,
            traceRadius: 200
        }
    };

    width = window.innerWidth;
    height = window.innerHeight;

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45,        // Field of view
        400 / 400,  // Aspect ratio
        .1,         // Near
        10000       // Far);
    );
    camera.lookAt(scene.position);
    camera.position.set(0, 0, 1000);
    scene.add(camera);

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x000000, 1);
    renderer.setSize(width, height);
    renderer.shadowMapEnabled = false;

    var sunGeo = new THREE.SphereGeometry(70, 128, 128);
    var sunMat = new THREE.MeshLambertMaterial({color: 0x00ff00});
    var sunMesh = new THREE.Mesh(sunGeo, sunMat);
    sunMesh.position.set(0, 0, 0);
    sunMesh.castShadow = true;
    sunMesh.receiveShadow = false;
    scene.add(sunMesh);

    var boxGeo = new THREE.BoxGeometry(50, 50, 50);
    var boxMat = new THREE.MeshLambertMaterial({color: 0xfff0f0});
    var boxMesh = new THREE.Mesh(boxGeo, boxMat);
    boxMesh.position.set(-100, 100, 0);
    boxMesh.castShadow = true;
    scene.add(boxMesh);

    var earthTraceGeo = new THREE.CircleGeometry(position.earth.traceRadius, 128, 128);
    var edges = new THREE.EdgesGeometry(earthTraceGeo);
    var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}));
    scene.add(line);

    var earthGeo = new THREE.SphereGeometry(30, 128, 128);
    var earthMat = new THREE.MeshLambertMaterial({color: 0x0000ff});
    var earthMesh = new THREE.Mesh(earthGeo, earthMat);
    earthMesh.position.set(position.earth.traceRadius, 0, 0);
    earthMesh.castShadow = true;
    earthMesh.receiveShadow = true;
    scene.add(earthMesh);

    var lightSize = 250;
    var pointLight = new THREE.PointLight(0xff0000, 1000, lightSize, 2);
    pointLight.position.set(110, 0, 110);
    pointLight.castShadow = true;
    scene.add(pointLight);

    var spotLight = new THREE.SpotLight(0xffffff, 1, 1000);
    spotLight.position.set(-200, 120, 200);
    spotLight.castShadow = true;
    scene.add(spotLight);

    var spotLightHelper = new THREE.SpotLightHelper( spotLight, 0xffbbaa);
    scene.add( spotLightHelper );

    var pointLightHelper = new THREE.PointLightHelper( pointLight, lightSize );
    scene.add( pointLightHelper );

    var ambientLight = new THREE.AmbientLight(0x404040);
//    scene.add(ambientLight);
    renderer.render(scene, camera);

    render();
    document.getElementById("WebGL-output").appendChild(renderer.domElement);

    function render() {
//        spotLightHelper.update();

        position.earth.theta += 1;
        position.earth.x = getX(0, position.earth.theta, position.earth.traceRadius);
        position.earth.y = getY(0, position.earth.theta, position.earth.traceRadius);
        earthMesh.position.set(position.earth.x, position.earth.y, 0);

        renderer.render(scene, camera);

        requestAnimationFrame(render);
    }

    function getX(x, theta, radius) {
        return x + Math.cos((Math.PI / 180) * theta) * radius;
    }

    function getY(y, theta, radius) {
        return y + Math.sin((Math.PI / 180) * theta) * radius;
    }

链接如下: https://jsfiddle.net/ne7gjdnq/623/