拉伸几何体是什么
拉伸是指我们有一个二维图形，通过针对这个二维图形进行z轴拉伸，将它转换成三维图形。例如，如果我们拉伸THREE.CircleGeometry，就会得到一个类似圆柱体的图形；如果我们拉伸THREE.PlaneGeometry，就会得到一个立方体。下面我们介绍一下常用的THREE.ExtrudeGeometry
THREE.ExtrudeGeometry简介
THREE.ExtrudeGeometry可以从一个二维图形创建出一个三维图形。
简单使用
var geometry = new THREE.ExtrudeGeometry(shapes, options);
shapes拉伸几何体需要提供一个或多个图形（THREE.Shape对象）。请看上一节options就是一写可以配置THREE.ExtrudeGeometry配置项，相关配置有：
案例代码
全部代码为下面的，可以自己copy下来跑一下
案例查看地址：/blog/threejs/-02-12/46.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style></head><body onload="draw();"></body><script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script><script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script><script>var renderer;function initRender() {renderer = new THREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);camera.position.set(0, 0, 100);}var scene;function initScene() {scene = new THREE.Scene();}var light;function initLight() {scene.add(new THREE.AmbientLight(0x404040));light = new THREE.DirectionalLight(0xffffff);light.position.set(1,1,1);scene.add(light);}//生成2d图形function drawShape() {// 实例化shape对象var shape = new THREE.Shape();// 设置开始点的位置shape.moveTo(20, 10);// 从起始点绘制直线到当前位置shape.lineTo(20, 40);//设置一条曲线到30 40shape.bezierCurveTo(15, 25, -5, 25, -20, 40);// 设置一条通过当前所有顶点的光滑曲线shape.splineThru([new THREE.Vector2(-22, 30),new THREE.Vector2(-18, 20),new THREE.Vector2(-20, 10)]);// 设置曲线回到顶点shape.quadraticCurveTo(0, -15, 20, 10);// 添加第一个眼var hole1 = new THREE.Path();hole1.absellipse(6, 20, 2, 3, 0, Math.PI * 2, true);shape.holes.push(hole1);// 添加第二个眼var hole2 = new THREE.Path();hole2.absellipse(-10, 20, 2, 3, 0, Math.PI * 2, true);shape.holes.push(hole2);// 添加嘴巴，一半的圆var hole3 = new THREE.Path();hole3.absarc(0, 5, 2, 0, Math.PI, true);shape.holes.push(hole3);// 返回shapereturn shape;}//生成模型function createMesh(geom) {//设置当前的模型矩阵沿y轴负方向偏移20geom.applyMatrix(new THREE.Matrix4().makeTranslation(0, -20, 0));// 创建法向量纹理var meshMaterial = new THREE.MeshNormalMaterial({flatShading: THREE.FlatShading,transparent: true,opacity: 0.7});// 创建一个线框纹理var wireFrameMat = new THREE.MeshBasicMaterial();wireFrameMat.wireframe = true;// 创建模型var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial,wireFrameMat]);return mesh;}//初始化性能插件var stats;function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放var controls;function initControls() {controls = new THREE.OrbitControls( camera, renderer.domElement );// 如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = false;//设置相机距离原点的最远距离controls.minDistance = 20;//设置相机距离原点的最远距离controls.maxDistance = 160;//是否开启右键拖拽controls.enablePan = true;}//生成gui设置配置项var gui,shape;function initGui() {//声明一个保存需求修改的相关数据的对象gui = {amount:2,bevelThickness:2,bevelSize:0.5,bevelEnabled:true,bevelSegments:3,curveSegments:12,steps:1,asGeom:function () {// 删除旧的模型scene.remove(shape);// 创建一个新的var options = {amount: gui.amount,bevelThickness: gui.bevelThickness,bevelSize: gui.bevelSize,bevelSegments: gui.bevelSegments,bevelEnabled: gui.bevelEnabled,curveSegments: gui.curveSegments,steps: gui.steps};shape = createMesh(new THREE.ExtrudeGeometry(drawShape(), options));// 将模型添加到场景当中scene.add(shape);}};var datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）datGui.add(gui, 'amount', 0, 20).onChange(gui.asGeom);datGui.add(gui, 'bevelThickness', 0, 10).onChange(gui.asGeom);datGui.add(gui, 'bevelSize', 0, 10).onChange(gui.asGeom);datGui.add(gui, 'bevelSegments', 0, 30).step(1).onChange(gui.asGeom);datGui.add(gui, 'bevelEnabled').onChange(gui.asGeom);datGui.add(gui, 'curveSegments', 1, 30).step(1).onChange(gui.asGeom);datGui.add(gui, 'steps', 1, 5).step(1).onChange(gui.asGeom);//调用生成一次图形gui.asGeom();}function render() {renderer.render( scene, camera );}//窗口变动触发的函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();render();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {//更新控制器controls.update();render();//更新性能插件stats.update();requestAnimationFrame(animate);}function draw() {initRender();initScene();initCamera();initLight();//initModel();initControls();initStats();initGui();animate();window.onresize = onWindowResize;}</script></html>
