Three.js入门（五）场景对浏览器的自适应

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

var stats = initStats();

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

            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+=controls.rotationSpeed;
                cube.rotation.y+=controls.rotationSpeed;
                cube.rotation.z+=controls.rotationSpeed;

                step+=controls.bouncingSpeed;
                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();
        window.addEventListener('resize',onResize,false);

        function onResize(){
                camera.aspect = window.innerWidth/window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth,window.innerHeight);
        }