threejs绘制长方体

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>WebGL三维场景</title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
                /* 隐藏body窗口区域滚动条 */
            }
        </style>
        <!--引入three.js三维引擎-->
        <!--<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>-->
        
        <script src="js/three2.js"></script>
        <script src="js/OrbitControls2.js"></script>
        
        
        <!-- <script src="./three.js"></script> -->
        <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
    </head>

    <body>
        <script>
            //创建一个renderer ,
            var renderer = new THREE.WebGLRenderer({ antialias: true });
            //设置清空颜色，每秒会渲染60次，渲染的时候会使用此颜色先清空
            renderer.setClearColor(new THREE.Color(0x000000, 1));
            //设置渲染尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            //设置阴影允许
            renderer.shadowMapEnabled = true;
            //将webgl元素添加到body中
            document.body.appendChild(renderer.domElement);

            //创建场景
            var scene = new THREE.Scene();

            //创建一个透视相机，45是相机的视角  ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000
            var camera = new THREE.PerspectiveCamera(
                45,
                window.innerWidth / window.innerHeight,
                0.1,
                20000
            );
            //将相机放到x:1000 , y:1000 , z:1000的位置
            camera.position.set(0, 1000, 1000);
            //设置相机的朝向，可以认为与相机镜头垂直的轴线应该和哪一个轴相交
            camera.up.set(0, 1, 0);
            //将相机的镜头对准x:0 , y:0 , z:0的位置 经过这个设置相机就被固定住了
            camera.lookAt({ x: 0, y: 0, z: 0 });
            //将相机添加到场景中
            scene.add(camera);

            var lights = new Array();
            lights[0] = new THREE.PointLight(0xffffff, 1, 0);
            lights[1] = new THREE.PointLight(0xffffff, 1, 0);
            lights[2] = new THREE.PointLight(0xffffff, 1, 0);

            lights[0].position.set(0, 200, 0);
            lights[1].position.set(100, 200, 100);
            lights[2].position.set(-100, -200, -100);

            scene.add(lights[0]);
            scene.add(lights[1]);
            scene.add(lights[2]);


            var meshPolygon = createPolygon();
            scene.add(meshPolygon);
            
            

            var orbitCtl = new THREE.OrbitControls(camera);
            orbitCtl.autoRotate = false;

            var clock = new THREE.Clock();

            function threeStart() {
                var delta = clock.getDelta();
                orbitCtl.update(delta);

                renderer.clear();
                renderer.render(scene, camera);
                requestAnimationFrame(threeStart);
            }

            threeStart();


            function createPolygon(){
                var group = new THREE.Group();

                var geometry2 = new THREE.BoxGeometry(500, 500, 4000);
                
    
                
                var material2 = new THREE.MeshBasicMaterial( { color: 15245878, side: THREE.DoubleSide } );
                var mesh2 = new THREE.Mesh( geometry2, material2 ) ;
                group.add(mesh2);

                return group;
            }
            


        </script>
    </body>
</html>
###############################