function initStats(){
            var stats = new Stats();
            stats.setMode(0);
            stats.domElement.style.position='absolute';
            stats.domElement.style.left='0px';
            stats.domElement.style.top='0px';
            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }

        function init(){

            var stats = initStats();

            var scene  = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45,window.innerHeight/window.innerWidth,0.1,1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE);
            renderer.setSize(window.innerWidth,window.innerHeight);
            renderer.shadowMap.enabled=true;

            var axes = new THREE.AxesHelper(20);
            scene.add(axes);

            var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
            var planeMeterial = new THREE.MeshLambertMaterial({color:0xcccccc});

            var plane = new THREE.Mesh(planeGeometry,planeMeterial);

            plane.rotation.x=-0.5*Math.PI;
            plane.position.x=15;
            plane.position.y=0;
            plane.position.z=0;

            scene.add(plane);

            var cubeGeometry = new THREE.BoxGeometry(4,4,4);
            var cubeMeterial = new THREE.MeshLambertMaterial({color:0xff000});
            var cube = new THREE.Mesh(cubeGeometry,cubeMeterial);

            cube.position.x=-4;
            cube.position.y=3;
            cube.position.z=0;

            scene.add(cube);

            var sphereGeometry = new THREE.SphereGeometry(4,20,20);
            var sphereMeterial = new THREE.MeshLambertMaterial({color:0x7777ff});
            var sphere = new THREE.Mesh(sphereGeometry,sphereMeterial);

            sphere.position.x=20;
            sphere.position.y=4;
            sphere.position.z=2;

            scene.add(sphere);

            camera.position.x=-60;
            camera.position.y=80;
            camera.position.z=60;

            camera.lookAt(scene.position);

            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(-40,60,-10);
            scene.add(spotLight);

            plane.receiveShadow = true;
            cube.castShadow=true;
            sphere.castShadow=true;

            spotLight.castShadow=true;



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

            var step=0;
            function renderScene(){
                cube.rotation.x+=0.02;
                cube.rotation.y+=0.02;
                cube.rotation.z+=0.02;

                step+=0.04;
                sphere.position.x=20+(10*Math.cos(step));
                sphere.position.y=2+(10*Math.abs(Math.sin(step)));

                stats.update();
                requestAnimationFrame(renderScene);
                renderer.render(scene,camera);
            }

            renderScene();

        };
        window.onload=init();

屏幕快照 2018-06-11 下午8.23.00.png