在上一篇小程序使用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 loading function 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))
GIF
PNG
JPEG