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