011-各种曲线

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

本节主要熟悉three中画曲线的各种方法

EllipseCurve

这是画椭圆形的，当然也可以画圆

用法

/**
 * EllipseCurve 为椭圆
 * 0,0 是中心位置
 * 100 是 长轴
 * 50 为 短轴
 */
const arc = new THREE.EllipseCurve(0, 0, 100, 50)
// 从椭圆里面提取20个点
const pointList = arc.getPoints(20)
// 构建几何体
const geomerty = new THREE.BufferGeometry()
// 通过几何体的点
geomerty.setFromPoints(pointList)
/**
 * 点可以直接渲染 成 点（Ponit）
 */
// const material = new THREE.PointsMaterial({
//     color: 0xff0000,
//     // 控制点的大小
//     size: 10
// })
// const mesh = new THREE.Points(geomerty, material)

/**
 * 点也可以渲染成 线（Line）
 */
const material = new THREE.LineBasicMaterial({
    color: 0xff0000,
})
const mesh = new THREE.Line(geomerty, material)

console.log('~~~~mesh', mesh)
export default mesh

SplineCurve

根据多个点生成的曲线，只需要提供多个点即可

用法

const arr = [
    new THREE.Vector2(-100, 0),
    new THREE.Vector2(-50, 50),
    new THREE.Vector2(0, 0),
    new THREE.Vector2(50, -50),
    new THREE.Vector2(100, -30),
    new THREE.Vector2(100, 0)
]

const curve = new THREE.SplineCurve(arr)
const ponitArr = curve.getPoints(20)

const geometry = new THREE.BufferGeometry().setFromPoints(ponitArr)

const material = new THREE.LineBasicMaterial({
    color: 0x0000ff
})

const line = new THREE.Line(geometry, material)

QuadraticBezierCurve

这是2d的贝塞尔曲线，首尾两个点是谷固定的，而中间的点是决定 曲线的曲率的

用法

import * as THREE from 'three';

const p1 = new THREE.Vector2(0, 0)
const p2 = new THREE.Vector2(50, 100)
const p3 = new THREE.Vector2(100, 0)

const curve = new THREE.QuadraticBezierCurve(p1, p2, p3)
const pintArr = curve.getPoints(20)

// 通过贝塞尔曲线抽离出来的点组成的曲线
const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(pintArr), new THREE.LineBasicMaterial({ color: 0x0000ff }))

const point = new THREE.Points(new THREE.BufferGeometry().setFromPoints(pintArr), new THREE.PointsMaterial({ color: new THREE.Color('red'), size: 3 }))
line.add(point)

/**
 * 用原始的三个点来画 line 与 point
 */
const line2 = new THREE.Line(new THREE.BufferGeometry().setFromPoints([p1, p2, p3]), new THREE.LineBasicMaterial({ color: new THREE.Color('yellow') }))
const ponit2 = new THREE.Points(new THREE.BufferGeometry().setFromPoints([p1, p2, p3]), new THREE.PointsMaterial({ color: new THREE.Color('green'), size: 3 }))

line.add(line2, ponit2)
export default line

CubicBezierCurve3

与上面的一样，只不过是3维空间的，应该也很好理解

用法

import * as THREE from 'three';
//只是这里的坐标换成三位的了
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 pointsArr = curve.getPoints(20);

const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(pointsArr);

const material = new THREE.LineBasicMaterial({
    color: new THREE.Color('orange')
});

const line = new THREE.Line(geometry, material);

const geometry2 = new THREE.BufferGeometry();
geometry2.setFromPoints([p1, p2, p3, p4]);
const material2 = new THREE.PointsMaterial({
    color: new THREE.Color('pink'),
    size: 5
});
const points2 = new THREE.Points(geometry2, material2);
const line2 = new THREE.Line(geometry2, new THREE.LineBasicMaterial());
line.add(points2, line2);

export default line;

CurvePath

多个曲线组合起来变成一个全新的曲线

用法

import * as THREE from 'three';

const p1 = new THREE.Vector2(100, 100);
const p2 = new THREE.Vector2(0, 0);
const line1 = new THREE.LineCurve(p1, p2)

const p3 = new THREE.Vector2(-100, 100);
const p4 = new THREE.Vector2(0, 0);
const line2 = new THREE.LineCurve(p3, p4)

const arc = new THREE.EllipseCurve(0, 100, 100, 100, 0, Math.PI);

const curvePath = new THREE.CurvePath();

curvePath.add(line1);
curvePath.add(arc);
curvePath.add(line2);

const ponitArr = curvePath.getPoints(100);

const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(ponitArr), new THREE.LineBasicMaterial({ color: new THREE.Color('yellow') }));

export default line