threejs基本场景

自己开发中经常用到的基本测试场景，包含scene, camera, renderer, light, controls等。运行成功后会显示一个随意颜色的立方体和一个球体以及一个平面。

用到的三个基本库文件。

    <script type="text/javascript" src="../js/three.js"></script>
    <script type="text/javascript" src="../js/WebGL.js"></script>
    <script type="text/javascript" src="../js/controls/OrbitControls.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden
        }
    </style>

全部代码：

<script type="text/javascript">
    if (WEBGL.isWebGLAvailable() === false) {
        document.body.appendChild(WEBGL.getWebGLErrorMessage());
    }
    function init() {
        var scene, camera, renderer, light, controls;
        var clock = new THREE.Clock();
        drawScene();

        function drawScene() {
            iniScene();
            iniLight();
            orbitControls();
            windowResize();
            cubeDr(4, 0, 2, 0);
            sphereDr(2, 0, 6, 0);
            iniPlane();
            render();
        }

        //场景
        function iniScene() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 3000);
            renderer = new THREE.WebGLRenderer();
            camera.position.set(-10, 10, 30);
            camera.lookAt(scene.position);
            renderer.setClearColor(0xffffff);
            renderer.shadowMap.enabled = true;

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

            scene.add(new THREE.AxesHelper(4));
            document.getElementById('webgl-output').appendChild(renderer.domElement);
        }

        //灯光
        function iniLight() {
            light = new THREE.AmbientLight(0x333333);
            scene.add(light);

            light = new THREE.SpotLight(0x888888);
            light.position.set(0, 40, 30);
            light.castShadow = true;
            light.shadow.mapSize.height = 4096;
            light.shadow.mapSize.width = 4096;
            scene.add(light);

            light = new THREE.HemisphereLight(0xffffff, 0x444444, 0.6);
            light.position.set(0, 200, 0);
            scene.add(light);
        }

        //地面 和 辅助网格
        function iniPlane() {
            var planeGeo = new THREE.PlaneGeometry(40, 40);
            var planeMat = new THREE.MeshPhongMaterial({color: 0x999999});
            var plane = new THREE.Mesh(planeGeo, planeMat);
            plane.receiveShadow = true;
            plane.position.y = -0.01;
            plane.rotation.x = -0.5 * Math.PI;
            scene.add(plane);

            var grid = new THREE.GridHelper(40, 20, 0x000000, 0x000000);
            grid.material.transparent = true;
            grid.material.opacity = 0.3;
            scene.add(grid);
        }

        //立方体
        function cubeDr(a, x, y, z) {
            var cubeGeo = new THREE.BoxGeometry(a, a, a);
            var cubeMat = new THREE.MeshPhongMaterial({
                color: 0xfff000 * Math.random()
            });
            var cube = new THREE.Mesh(cubeGeo, cubeMat);
            cube.position.set(x, y, z);
            cube.castShadow = true;
            scene.add(cube);
            return cube;
        }

        //球体
        function sphereDr(r, x, y, z) {
            var geometry = new THREE.SphereGeometry(r, 32, 32);
            var material = new THREE.MeshPhongMaterial({
                color: 0x33ccff,
            });
            mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(x, y, z);
            scene.add(mesh);
            return mesh;
        }

        //相机轨道控制器
        function orbitControls() {
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            //自转
            //controls.autoRotate = true;
            controls.autoRotateSpeed = 0.2;
            //阻尼 阻尼系数
            controls.enableDamping = true;
            controls.dampingFactor = 0.4;
            //缩放
            controls.enableZoom = true;
            controls.minDistance = 5;
            controls.maxDistance = 1000;
            //右键拖拽
            //controls.enablePan = false;
        }

        //改变窗口大小
        function windowResize() {
            window.addEventListener('resize', onWindowResize, false);

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

        //渲染动画
        function render() {
            var delta = clock.getDelta();
            requestAnimationFrame(render);

            renderer.render(scene, camera);

            controls.update(delta);
        }
    }
    window.onload = init;
</script>