自定义几何体

/** * Created by 12204 on 2016/11/12. */ function init() {  var stats = initStats();//初始化2监视器         //创建一个场景        var scene = new THREE.Scene();        // 创建一个相机        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);        // 创建一个渲染器        var renderer = new THREE.WebGLRenderer();        renderer.setClearColorHex();        renderer.setClearColor(new THREE.Color(0xEEEEEE));        renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;//告诉渲染器我需要影子        // 把坐标轴显示出来        var axes = new THREE.AxisHelper(20);        scene.add(axes);        // 创建一个平面var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});//新的材质对光源有反应        var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.receiveShadow = true;//我接受影子照在我身上        //旋转平面的位置因为默认是与x轴平行的        plane.rotation.x = 1.5 * Math.PI;//-1.5到到0.5其实是一样的反向的问题//所以也可以这么写//plane.rotation.x = -0.5 * Math.PI;        plane.position.x = 0;        plane.position.y = 0;        plane.position.z = 0;        // 添加到场景中去        scene.add(plane);               // 相机放在哪里其实就是从哪个位置看        camera.position.x = -30;        camera.position.y = 40;        camera.position.z = 30;        camera.lookAt(scene.position);// 添加光照效果但是没有材质的话没啥区别var spotLight = new THREE.SpotLight(0xffffff);        spotLight.position.set(-60, 60, -10);        spotLight.castShadow = true;        scene.add(spotLight);        // 获取上下问创建一个渲染的位置        document.getElementById("WebGL-output").appendChild(renderer.domElement);//scene.fog=new THREE.FogExp2(0xffffff,0.015);//scene的属性之一可以添加雾化效果参数指定的是颜色和浓度//scene.fog=new THREE.Fog(0xffffff,0,100);//指定渐进的浓度//强制使用同一个材质//scene.overrideMaterial=new THREE.MeshLambertMaterial({color:0xffffff});这么写也可以        //渲染场景        renderer.render(scene, camera);var step = 0;        var vertices = [            new THREE.Vector3(1, 3, 1),            new THREE.Vector3(1, 3, -1),            new THREE.Vector3(1, -1, 1),            new THREE.Vector3(1, -1, -1),            new THREE.Vector3(-1, 3, -1),            new THREE.Vector3(-1, 3, 1),            new THREE.Vector3(-1, -1, -1),            new THREE.Vector3(-1, -1, 1)        ];//使用自己定义的几何体首先定义其八个顶点的位置        var faces = [            new THREE.Face3(0, 2, 1),            new THREE.Face3(2, 3, 1),            new THREE.Face3(4, 6, 5),            new THREE.Face3(6, 7, 5),            new THREE.Face3(4, 5, 1),            new THREE.Face3(5, 0, 1),            new THREE.Face3(7, 6, 2),            new THREE.Face3(6, 3, 2),            new THREE.Face3(5, 7, 0),            new THREE.Face3(7, 2, 0),            new THREE.Face3(1, 3, 4),            new THREE.Face3(3, 6, 4),        ];//然后定义每一个面使用的是哪几个顶点        var geom = new THREE.Geometry();//Geometry是一个三维空间中的点集        geom.vertices = vertices;        geom.faces = faces;        geom.computeFaceNormals();//计算各个顶点连成的面        var materials = [            new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),            new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})        ];//设定需要使用的材质1        var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);        mesh.children.forEach(function (e) {            e.castShadow = true        });//        mesh.children[0].translateX(0.5);//        mesh.children[0].translateZ(0.5);        scene.add(mesh);        function addControl(x, y, z) {            var controls = new function () {                this.x = x;                this.y = y;                this.z = z;            };            return controls;        }        var controlPoints = [];        controlPoints.push(addControl(3, 5, 3));        controlPoints.push(addControl(3, 5, 0));        controlPoints.push(addControl(3, 0, 3));        controlPoints.push(addControl(3, 0, 0));        controlPoints.push(addControl(0, 5, 0));        controlPoints.push(addControl(0, 5, 3));        controlPoints.push(addControl(0, 0, 0));        controlPoints.push(addControl(0, 0, 3));        var gui = new dat.GUI();        gui.add(new function () {            this.clone = function () {                var clonedGeometry = mesh.children[0].geometry.clone();                var materials = [                    new THREE.MeshLambertMaterial({opacity: 0.6, color: 0xff44ff, transparent: true}),                    new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})                ];                var mesh2 = THREE.SceneUtils.createMultiMaterialObject(clonedGeometry, materials);                mesh2.children.forEach(function (e) {                    e.castShadow = true                });                mesh2.translateX(5);                mesh2.translateZ(5);                mesh2.name = "clone";                scene.remove(scene.getChildByName("clone"));                scene.add(mesh2);            }        }, 'clone');        for (var i = 0; i < 8; i++) {            f1 = gui.addFolder('Vertices ' + (i + 1));            f1.add(controlPoints[i], 'x', -10, 10);            f1.add(controlPoints[i], 'y', -10, 10);            f1.add(controlPoints[i], 'z', -10, 10);        }        render();        function addCube() {        }        function render() {            stats.update();            var vertices = [];            for (var i = 0; i < 8; i++) {                vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));            }            mesh.children.forEach(function (e) {                e.geometry.vertices = vertices;                e.geometry.verticesNeedUpdate = true;                e.geometry.computeFaceNormals();            });            // render using requestAnimationFrame            requestAnimationFrame(render);            renderer.render(scene, camera);        }        function initStats() {            var stats = new Stats();            stats.setMode(0); // 0: fps, 1: ms            // Align top-left            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

以上的代码我稍后会修改一下更加好理解一点