小程序使用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 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))

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