012-自定义几何体

该系类文章主要用于记录学习three.js的过程，包括做的一些demo，笔记，以及个人思考；主要学习的课程是 神光的小册《three.js通关秘籍》，感兴趣的可以购买学习，质量还是可以的

一般创建几何体，很多自带的类都是比较固定的几何体，比如圆柱体、正方体等等，但是如果我们要创建的就是一个自定义的几何体改怎么办，就是本节的内容

LatheGeometry

解释

主要是根据几个点来确定一个形状，再绕着Y轴转一圈就是一个实体

用法

const pointsArr = [
    new THREE.Vector2(0, 0),
    new THREE.Vector2(50, 50),
    new THREE.Vector2(20, 80),
    new THREE.Vector2(0, 150)
];

const geometry = new THREE.LatheGeometry(pointsArr);

const materail = new THREE.MeshLambertMaterial({
    color: new THREE.Color('pink'),
    side: THREE.DoubleSide
});

const mesh = new THREE.Mesh(geometry, materail);

示例图

TubeGeometry

解释

根据一条曲线形成一个管道

用法

const p1 = new THREE.Vector3(-100, 0, 0);
const p2 = new THREE.Vector3(50, 100, 0);
const p3 = new THREE.Vector3(100, 0, 100);
const p4 = new THREE.Vector3(100, 0, 0);

const curve = new THREE.CubicBezierCurve3(p1, p2, p3, p4);

const geometry = new THREE.TubeGeometry(curve, 50, 20, 20);

const materail = new THREE.MeshLambertMaterial({
    color: new THREE.Color('orange'),
    side: THREE.DoubleSide,
    wireframe: true
});

const mesh = new THREE.Mesh(geometry, materail);

示意图

Shape+ShapeGeometry

解释

Shape就是形成一个多边形，再通说ShapeGeometry来画成线

用法

const pointsArr = [
    new THREE.Vector2(100, 0),
    new THREE.Vector2(50, 20),
    new THREE.Vector2(0, 0),
    new THREE.Vector2(0, 50),
    new THREE.Vector2(50, 100)
];

const shape = new THREE.Shape(pointsArr);

const geometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshLambertMaterial({
    color: new THREE.Color('lightgreen')
});

const mesh = new THREE.Mesh(geometry, material);

示例图

Shape+ExtrudeGeometry

解释

Shape形成多边形，通过ExtrudeGeometry拉升成一个实体

用法

onst pointsArr = [
    new THREE.Vector2(100, 0),
    new THREE.Vector2(50, 20),
    new THREE.Vector2(0, 0),
    new THREE.Vector2(0, 50),
    new THREE.Vector2(50, 100)
];
/**
 * 将上面几个点组成一个多边形
 */
const shape = new THREE.Shape(pointsArr);
/**
 * 将多边形绘制出来
 */
// const geometry = new THREE.ShapeGeometry(shape);

/**
 * 将多边形拉升，就是一个多边形几何体
 */

const geometry = new THREE.ExtrudeGeometry(shape, {
    depth: 100,
});

const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color('orange'),
    side: THREE.DoubleSide
});

const mesh = new THREE.Mesh(geometry, material);

示例图