小程序使用threejs第三篇—介绍几种几何模型

在上一篇小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转中，我们还遗留了一个小问题，就是展示的立方体如何随手势旋转缩放，当我们处理了这个问题，接下来介绍几种几何模型，大家可以试着把他们添加到场景下再渲染出来…

好，先处理手势控制旋转缩放

上篇说过，基于微信官方的threejs-miniprogram要实现手势控制功能很难，所以我们需要考虑是不是有其他大神是不是已经完成这部分工作，幸运找到了。
手势控制其实只需要将OrbitControls类文件注入到threejs中即可，方便起见，还是直接拷贝吧
代码过大，提供一下下载链接：
threejs工具类库
首先需要在canvas上注册touch事件

<canvas type="webgl" id="webgl" style="width: 100%; height:100%;" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel"></canvas>

这时候我们需要引入OrbitControls.js这个类，字面理解是轨道控制的意思，

import { OrbitControls } from '../../jsm/controls/OrbitControls'

接下来初始化OrbitControls，并调用其update方法

const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

最后把canva的触摸事件传递给THREE就好了

touchStart(e) {console.log('canvas', e)THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e)},touchMove(e) {console.log('canvas', e)THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e)},touchEnd(e) {console.log('canvas', e)THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e)},

效果如下：

直接体验

接下来介绍几种模型

先看效果：

可以试着把他们添加到场景下再渲染出来
1、BoxBufferGeometry：几何盒子模型
效果：

使用方法：

var geometry = new THREE.BoxBufferGeometry(width, height, depth)

2、CircleBufferGeometry:几何圆形模型
效果：

使用方法：

//segments是圆形边数，值越大越接近圆
var geometry =  new THREE.CircleBufferGeometry(radius, segments)

3、ConeBufferGeometry:几何圆锥模型
效果：

使用方法：

//segments是圆形边数，值越大越接近圆
var geometry =  new THREE.ConeBufferGeometry(radius, height, segments)

4、CylinderBufferGeometry:几何圆柱模型
效果：

使用方法：

//segments是圆形边数，值越大越接近圆
var geometry =  new THREE.CylinderBufferGeometry(radiusTop, radiusBottom, height, segments)

5、DodecahedronBufferGeometry:几何十二面体模型
效果：

使用方法：

var geometry =  new THREE.DodecahedronBufferGeometry(radius)

6、ExtrudeBufferGeometry:几何立体化模型—心形盒子
效果：

使用方法：

{const shape = new THREE.Shape();const x = -2.5;const y = -5;shape.moveTo(x + 2.5, y + 2.5);shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);const extrudeSettings = {steps: 2,depth: 2,bevelEnabled: true,bevelThickness: 1,bevelSize: 1,bevelSegments: 2,};var geometry =  new   THREE.ExtrudeBufferGeometry(shape, extrudeSettings));}

7、IcosahedronBufferGeometry:几何二十面体模型
效果：

使用方法：

var geometry =  new THREE.IcosahedronBufferGeometry(radius)

8、LatheBufferGeometry:几何车床加工模型
效果：

使用方法：

const points = [];
for (let i = 0; i < 10; ++i) {points.push(new THREE.Vector2(Math.sin(i * 0.2) * 3 + 3, (i - 5) * .8));
}
var geometry =  new THREE.LatheBufferGeometry(radius)

9、OctahedronBufferGeometry:几何八面体模型
效果：

使用方法：

var geometry =  new THREE.OctahedronBufferGeometry(radius)

10、ParametricBufferGeometry:几何参数化模型
效果：

使用方法：

 function klein(v, u, target) {u *= Math.PI;v *= 2 * Math.PI;u = u * 2;let x;let z;if (u < Math.PI) {x = 3 * Math.cos(u) * (1 + Math.sin(u)) + (2 * (1 - Math.cos(u) / 2)) * Math.cos(u) * Math.cos(v);z = -8 * Math.sin(u) - 2 * (1 - Math.cos(u) / 2) * Math.sin(u) * Math.cos(v);} else {x = 3 * Math.cos(u) * (1 + Math.sin(u)) + (2 * (1 - Math.cos(u) / 2)) * Math.cos(v + Math.PI);z = -8 * Math.sin(u);}const y = -2 * (1 - Math.cos(u) / 2) * Math.sin(v);target.set(x, y, z).multiplyScalar(0.75);}const slices = 25;const stacks = 25;var geometry = new THREE.ParametricBufferGeometry(klein, slices, stacks);

11、PlaneBufferGeometry:几何平面模型
效果：

使用方法：

var geometry =  new THREE.PlaneBufferGeometry(width, height, widthSegments, heightSegments)

12、PolyhedronBufferGeometry:几何多面体模型
效果：

使用方法：

 const verticesOfCube = [-1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1,-1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1,];const indicesOfFaces = [2, 1, 0, 0, 3, 2,0, 4, 7, 7, 3, 0,0, 1, 5, 5, 4, 0,1, 2, 6, 6, 5, 1,2, 3, 7, 7, 6, 2,4, 5, 6, 6, 7, 4,];const radius = 7;const detail = 2;var geometry = new THREE.PolyhedronBufferGeometry(verticesOfCube, indicesOfFaces, radius, detail)

13、RingBufferGeometry:几何环面模型
效果：

使用方法：

var geometry =  new THREE.RingBufferGeometry(innerRadius, outerRadius, segments)

14、ShapeBufferGeometry:几何形状模型—心形面
效果：

使用方法：

 const shape = new THREE.Shape();const x = -2.5;const y = -5;shape.moveTo(x + 2.5, y + 2.5);shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);var geometry = new THREE.ShapeBufferGeometry(shape);

15、 SphereBufferGeometry:几何球体模型
效果：

使用方法：

var geometry =  new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments)

16、TetrahedronBufferGeometry:几何四面体模型
效果：

使用方法：

var geometry =  new THREE.TetrahedronBufferGeometry(radius, widthSegments, heightSegments)

17、TextBufferGeometry:几何字体模型
效果：

使用方法：

 {const loader = new THREE.FontLoader();// promisify font loadingfunction loadFont(url) {return new Promise((resolve, reject) => {loader.load(url, resolve, undefined, reject);});}async function doit() {const font = await loadFont('https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/font/customfont.json?sign=9dde05b906d604a4945a2a78f6c1ab1d&t=1582637030');const geometry = new THREE.TextBufferGeometry('THREEJS', {font: font,size: 3.0,height: .2,curveSegments: 12,bevelEnabled: true,bevelThickness: 0.15,bevelSize: .3,bevelSegments: 5,});const mesh = new THREE.Mesh(geometry, createMaterial());geometry.computeBoundingBox();geometry.boundingBox.getCenter(mesh.position).multiplyScalar(-1);const parent = new THREE.Object3D();parent.add(mesh);addObject(0, -3, parent);}doit();}

18、TorusBufferGeometry:几何圆环立体模型
效果：

使用方法：

var geometry =  new THREE.TorusBufferGeometry(radius, tubeRadius, radialSegments, tubularSegments)

19、TorusKnotBufferGeometry:几何环形结立体模型
效果：

使用方法：

const radius = 3.5;
const tube = 1.5;
const radialSegments = 8;
const tubularSegments = 64;
const p = 2;
const q = 3;
var geometry =  new THREE.TorusKnotBufferGeometry(radius, tube, tubularSegments, radialSegments, p, q)

20、TubeBufferGeometry:几何管道立体模型

使用方法：

 {class CustomSinCurve extends THREE.Curve {constructor(scale) {super();this.scale = scale;}getPoint(t) {const tx = t * 3 - 1.5;const ty = Math.sin(2 * Math.PI * t);const tz = 0;return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);}}const path = new CustomSinCurve(4);const tubularSegments = 20;const radius = 1;const radialSegments = 8;const closed = false;var geometry =  new THREE.TubeBufferGeometry(path, tubularSegments, radius, radialSegments, closed);}

21、EdgesGeometry:几何四面体网格模型
效果：

使用方法：

 const width = 8;const height = 8;const depth = 8;const thresholdAngle = 15;var geometry =  new THREE.EdgesGeometry(new THREE.BoxBufferGeometry(width, height, depth),thresholdAngle)

22、WireframeGeometry:几何线框四面体模型
效果：

使用方法：

    var geometry =  new THREE.WireframeGeometry(new THREE.BoxBufferGeometry(width, height, depth))

下一篇我们将介绍如何加载3D模型