THREE.JS--Geometry

body { margin: 0;   overflow: hidden;}
<div id="Stats-output"></div>
<div id="WebGL-output"></div>

<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>

<script type="text/javascript">
    function init() {
        var stats = initStats();
        //场景
        var scene = new THREE.Scene();
        // 透视相机：视角，长宽比，近距，远距
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        // 渲染器
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));  //清除颜色
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);  //大小
        webGLRenderer.shadowMapEnabled = true;   //阴影
        var plane = createMesh(new THREE.PlaneGeometry(10, 14, 4, 4));  //平面
        scene.add(plane);

        // 相机位置，相机头顶方向，相机指向
        camera.position.x = -20;
        camera.position.y = 30;
        camera.position.z = 40;
        camera.up.x = 0 ;
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt(new THREE.Vector3(10, 0, 0));
        // 聚光灯
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        scene.add(spotLight);
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        var step = 0;
        var controls = new function () {
        this.width = plane.children[0].geometry.parameters.width;
        this.height = plane.children[0].geometry.parameters.height;
        this.widthSegments = plane.children[0].geometry.parameters.widthSegments;
        this.heightSegments = plane.children[0].geometry.parameters.heightSegments;

        this.redraw = function () {
            scene.remove(plane);
            plane = createMesh(new THREE.PlaneGeometry(controls.width, controls.height,
            Math.round(controls.widthSegments), Math.round(controls.heightSegments)));
            scene.add(plane);
        };
};

var gui = new dat.GUI();
gui.add(controls, 'width', 0, 40).onChange(controls.redraw);
gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw);
gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw);
render();

function createMesh(geom) {
var meshMaterial = new THREE.MeshNormalMaterial();
meshMaterial.side = THREE.DoubleSide;
var wireFrameMat = new THREE.MeshBasicMaterial();
wireFrameMat.wireframe = true;
var plane = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
return plane;
}

function render() {
        stats.update();
        plane.rotation.y = step += 0.01;
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);
}

function initStats() {
    var stats = new Stats();
    stats.setMode(0); // 0: fps, 1: ms
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.getElementById("Stats-output").appendChild(stats.domElement);
    return stats;
}
}
window.onload = init;
</script>