为什么“ light.castShadow = true”会导致场景破裂？

Question

我正在尝试使用threejs构建一个包含太阳，地球和月亮的简单太阳系。该系统包括照明和阴影。

我唯一的问题是，当创建从大地投射到月球，反之亦然的阴影时，我的脚本将停止工作。

控制台给我一个错误，“未定义isMultiSample”。

我曾尝试在网上搜索，但找不到导致错误发生的任何解决方案。

引起问题的部分：

var sunLight = new THREE.PointLight(0x404040, 10, 1000000);
                sunLight.position.set(0, 0, 0);
                sunLight.castShadow = true; // This line will cause the error

完整代码：

<script>
        var camera, scene, renderer;
        var spaceBox, sunPivot, earthPivot, moonPivot;;

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 4000000 );
            camera.position.z = 2400;

            scene = new THREE.Scene();
            // Surrounding space
            var texture = new THREE.TextureLoader().load( 'space.jpg' );

            var skygeometry = new THREE.BoxBufferGeometry( 15000, 15000, 15000 );
            var skymaterial = new THREE.MeshBasicMaterial({ map: texture, side : THREE.DoubleSide});


            spaceBox = new THREE.Mesh(skygeometry, skymaterial);
            scene.add(spaceBox);

            // Sun, earth and moon textures
            var sunTexture = new THREE.TextureLoader().load('sun.jpg')
            var sunGeometry = new THREE.SphereBufferGeometry(800, 32, 32);
            var sunMaterial = new THREE.MeshPhongMaterial({ map: sunTexture });

            var earthTexture = new THREE.TextureLoader().load('earth.jpg')
            var earthGeometry = new THREE.SphereBufferGeometry(250, 32, 32);
            var earthMaterial = new THREE.MeshPhongMaterial({ map: earthTexture, side: THREE.DoubleSide });

            var moonTexture = new THREE.TextureLoader().load('moon.jpg')
            var moonGeometry = new THREE.SphereBufferGeometry(80, 32, 32);
            var moonMaterial = new THREE.MeshPhongMaterial({ map: moonTexture, side: THREE.DoubleSide });

            // LIGHTS
            var ambientLight = new THREE.AmbientLight(0x404040,3); // soft white light
            scene.add(ambientLight);

            var sunLight = new THREE.PointLight(0x404040, 10, 1000000);
            sunLight.position.set(0, 0, 0);
            //sunLight.castShadow = true;

            sunLight.shadow.mapSize.width = 1024;
            sunLight.shadow.mapSize.height = 1024;

            sunLight.shadow.camera.near = 500;
            sunLight.shadow.camera.far = 10000;
            sunLight.shadow.camera.fov = 30;

            scene.add(sunLight);



            // Add sun, earth and moon rotating around eachother      
            sun = new THREE.Mesh(sunGeometry, sunMaterial);
            scene.add(sun);

            earthPivot = new THREE.Object3D();                
            sun.add(earthPivot);      
            earth = new THREE.Mesh(earthGeometry, earthMaterial);
            earth.position.x = 4000;
            earth.castShadow = true; 
            earth.receiveShadow = true; 
            earthPivot.add(earth); 

            moonPivot = new THREE.Object3D();
            earth.add(moonPivot);         
            var moon = new THREE.Mesh(moonGeometry, moonMaterial);
            moon.position.x = 750;
            moon.castShadow = true;
            moon.receiveShadow = true; 
            moonPivot.add(moon);


            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio(window.devicePixelRatio);

            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;

            //
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {
            earthPivot.rotation.y += 0.002;
            moonPivot.rotation.y += 0.005;


            requestAnimationFrame( animate );
            controls.update();
            renderer.render( scene, camera );

        }</script>