threejs拉伸几何合体(ExtrudeBufferGeometry)的两种使用方式

本文主要是介绍threejs拉伸几何合体(ExtrudeBufferGeometry)的两种使用方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

拉伸几何体有两种使用方式，一种是配置extrudePath，一种是不配置extrudePath 。该属性指定图形沿着什么路径（THREE.CurvePath）拉伸。如果没有指定，则图形沿着z轴拉伸更直观的理解见下文。

一、不配置extrudePath

中文手册给的也是这种，我就直接放中文手册的案例了；

在extrudeSettings 没有配置extrudePath这一项。

var length = 12, width = 8;var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );var extrudeSettings = {steps: 2,depth: 16,bevelEnabled: true,bevelThickness: 1,bevelSize: 1,bevelSegments: 1
};var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

这种出来的就是垂直于shape面，直直的向一个方向拉伸depth的距离，形成一个几何体。如下图，shape分别为正方形，三角形，圆形，向上拉伸不同depth。

二、配置extrudePath

第二种我当时也折腾了半天

手册写的说要用CurvePath对象

        let value = this.linePointList;let curvePath = new THREE.CurvePath();for (let i = 0; i < value.length - 1; i++) {let curve3 = new THREE.LineCurve3(value[i], value[i + 1]);curvePath.add(curve3);}let extrudeSettings = {steps: 200,bevelEnabled: true,bevelThickness: 100,extrudePath: curvePath,};var pts = [];const thickness = 2;const dept = 60;pts.push(new THREE.Vector2(0, -0.5 * thickness));pts.push(new THREE.Vector2(-dept, -0.5 * thickness));pts.push(new THREE.Vector2(-dept, 0.5 * thickness));pts.push(new THREE.Vector2(0, 0.5 * thickness));var shape = new THREE.Shape(pts);var geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);var material2 = new THREE.MeshLambertMaterial({color: 0xe0e0e0,wireframe: false,});var mesh = new THREE.Mesh(geometry, material2);

curvePath是“W"形状的curve曲线，shape则是侧面的