Curve
EllipseCurve
<canvas id="EllipseCurve" width="300px" height="200px"></canvas>
<canvas id="ArcCurve" width="300px" height="200px"></canvas>
<canvas id="CurvePath" width="300px" height="200px"></canvas>
<canvas id="SplineCurve-CatmullRomCurve3" width="300px" height="200px"></canvas>
<canvas id="QuadraticBezierCurve" width="300px" height="200px"></canvas>
<canvas id="QuadraticBezierCurve3" width="300px" height="200px"></canvas>
<script type="importmap">
{
"imports": {
"three": "./js/build/three.module.js",
"three/jsm/": "./js/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
{
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("EllipseCurve"),
});
renderer.setClearColor(0x000000);
const scene = new THREE.Scene();
const ellipse = new THREE.EllipseCurve(0, 0, 50, 20, 0, 2 * Math.PI, false); // 参数：椭圆中心坐标x、y、x方向半径、y方向半径、开始角度、结束角度、是否为顺时针绘制
const pointsArr = ellipse.getPoints(50); //分段数50，返回51个顶点
console.log("曲线上获取坐标", pointsArr);
const pointsArr2 = ellipse.getSpacedPoints(50); //按照曲线长度等间距返回顶点数据
console.log("曲线上获取坐标", pointsArr2);
const geometry = new THREE.BufferGeometry(); //创建一个几何体对象
geometry.setFromPoints(pointsArr); //读取坐标数据赋值给几何体顶点
const geometry2 = new THREE.BufferGeometry();
geometry2.setFromPoints(pointsArr2);
const lineMaterial = new THREE.LineBasicMaterial({
color: 0xffffff,
});
const line = new THREE.Line(geometry, lineMaterial); // 线模型
const line2 = new THREE.Line(geometry2, lineMaterial);
line2.position.set(0, 50, 0);
scene.add(line);
scene.add(line2);
const pointsMaterial = new THREE.PointsMaterial({
color: 0xff00ff,
size: 5, //点对象像素尺寸
});
const points = new THREE.Points(geometry, pointsMaterial); // 点模型
const points2 = new THREE.Points(geometry2, pointsMaterial);
points.position.set(0, -30, 0);
points2.position.set(0, -50, 0);
scene.add(points);
scene.add(points2);
const camera = new THREE.PerspectiveCamera(30, 300 / 200, 1, 3000); //透视投影相机参数设置
camera.position.set(0, 0, 300);
camera.lookAt(0, 0, 0);
scene.add(camera);
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
renderer.render(scene, camera);
}
</script>
ArcCurve
<script>
...
const scene = new THREE.Scene();
const arc = new THREE.ArcCurve(0, 0, 50, 0, 1.5 * Math.PI, false);
const pointsArr = arc.getPoints(50);
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(pointsArr);
const material = new THREE.LineBasicMaterial({
color: 0xffffff,
});
const line = new THREE.Line(geometry, material);
scene.add(line);
...
</script>
CurvePath
<script>
...
//组合曲线
const R = 20; //圆弧半径
const H = 100; //直线部分高度
const line1 = new THREE.LineCurve(new THREE.Vector2(R, H), new THREE.Vector2(R, 0));
const arc = new THREE.ArcCurve(0, 0, R, 0, Math.PI, true);
const line2 = new THREE.LineCurve(new THREE.Vector2(-R, 0), new THREE.Vector2(-R, H));
// CurvePath创建一个组合曲线对象
const curvePath = new THREE.CurvePath();
curvePath.curves.push(line1, arc, line2); //拼接出来一个U型轮廓曲线
const pointsArr = curvePath.getPoints(16); //组合曲线上获取点
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(pointsArr); //读取坐标数据赋值给几何体顶点
const material = new THREE.LineBasicMaterial({
color: 0xffffff,
});
const line = new THREE.Line(geometry, material);
line.position.set(0, -30, 0);
scene.add(line);
...
</script>
SplineCurve、CatmullRomCurve3
<script>
...
const arr_2 = [new THREE.Vector2(-50, 0), new THREE.Vector2(0, 30), new THREE.Vector2(50, 0)];
// 二维样条曲线
const curve_2 = new THREE.SplineCurve(arr_2);
const pointsArr_2 = curve_2.getPoints(100);
const geometry_2 = new THREE.BufferGeometry();
geometry_2.setFromPoints(pointsArr_2);
const material = new THREE.LineBasicMaterial({
color: 0x99ffff,
});
const line_2 = new THREE.Line(geometry_2, material);
line_2.position.set(0, 0, 0);
scene.add(line_2);
const arr_3 = [new THREE.Vector3(-50, 0, 0), new THREE.Vector3(0, 30, 0), new THREE.Vector3(50, 0, 0), new THREE.Vector3(0, 0, 80), new THREE.Vector3(0, 0, 0)];
// 三维样条曲线
const curve_3 = new THREE.CatmullRomCurve3(arr_3);
const pointsArr_3 = curve_3.getPoints(100);
const geometry_3 = new THREE.BufferGeometry();
geometry_3.setFromPoints(pointsArr_3);
const line_3 = new THREE.Line(geometry_3, material);
line_3.position.set(0, 30, 0);
scene.add(line_3);
...
camera.position.set(100, 100, 300);
...
</script>
QuadraticBezierCurve
<script>
...
// p1、p4是曲线起始点，p2、p3是曲线的控制点
const p1 = new THREE.Vector2(-50, 0);
const p2 = new THREE.Vector2(-20, 50);
const p3 = new THREE.Vector2(20, 30);
const p4 = new THREE.Vector2(50, 0);
// 二维二次贝赛尔曲线
const curve_2 = new THREE.QuadraticBezierCurve(p1, p2, p4);
const pointsArr_2 = curve_2.getPoints(100);
const geometry_2 = new THREE.BufferGeometry();
geometry_2.setFromPoints(pointsArr_2);
const material = new THREE.LineBasicMaterial({
color: 0x22ff00,
});
const line_2 = new THREE.Line(geometry_2, material);
line_2.position.set(0, 0, 0);
scene.add(line_2);
// 二维三次贝赛尔曲线
const curve_3 = new THREE.QuadraticBezierCurve(p1, p2, p3, p4);
const pointsArr_3 = curve_3.getPoints(100);
const geometry_3 = new THREE.BufferGeometry();
geometry_3.setFromPoints(pointsArr_3);
const material1 = new THREE.LineBasicMaterial({
color: 0xffff00,
});
const line_3 = new THREE.Line(geometry_3, material1);
line_3.position.set(0, 30, 0);
scene.add(line_3);
...
camera.position.set(0, 0, 300);
...
</script>三次贝塞尔曲线似乎有点问题：
QuadraticBezierCurve3
<script>
...
// p1、p4是曲线起始点，p2、p3是曲线的控制点
const p1 = new THREE.Vector3(-80, 0, 0);
const p2 = new THREE.Vector3(-40, 50, 0);
const p3 = new THREE.Vector3(50, 50, 0);
const p4 = new THREE.Vector3(80, 0, 100);
// 三维二次贝赛尔曲线
const curve_2 = new THREE.QuadraticBezierCurve3(p1, p2, p4);
const pointsArr_2 = curve_2.getPoints(100);
const geometry_2 = new THREE.BufferGeometry();
geometry_2.setFromPoints(pointsArr_2);
const material = new THREE.LineBasicMaterial({
color: 0x22ffff,
});
const line_2 = new THREE.Line(geometry_2, material);
line_2.position.set(0, 0, 0);
scene.add(line_2);
// 三维三次贝赛尔曲线
const curve_3 = new THREE.CubicBezierCurve3(p1, p2, p3, p4);
const pointsArr_3 = curve_3.getPoints(100);
const geometry_3 = new THREE.BufferGeometry();
geometry_3.setFromPoints(pointsArr_3);
const line_3 = new THREE.Line(geometry_3, material);
line_3.position.set(0, 30, 0);
scene.add(line_3);
...
camera.position.set(100, 100, 300);
...
</script>
Geometry
BufferGeometry
所有几何体的基类
<canvas id="BufferGeometry" width="300px" height="200px"></canvas>
<canvas id="BoxGeometry" width="300px" height="200px"></canvas>
<canvas id="SphereGeometry" width="300px" height="200px"></canvas>
<canvas id="CylinderGeometry" width="300px" height="200px"></canvas>
<canvas id="PlaneGeometry" width="300px" height="200px"></canvas>
<canvas id="CircleGeometry" width="300px" height="200px"></canvas>
<canvas id="ShapeGeometry" width="300px" height="200px"></canvas>
<canvas id="TubeGeometry" width="300px" height="200px"></canvas>
<canvas id="LatheGeometry" width="300px" height="200px"></canvas>
<canvas id="ExtrudeGeometry" width="300px" height="200px"></canvas>
<canvas id="ExtrudeGeometry-path" width="300px" height="200px"></canvas>
<canvas id="EdgesGeometry" width="300px" height="200px"></canvas>
<script type="importmap">
{
"imports": {
"three": "./js/build/three.module.js",
"three/jsm/": "./js/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
{
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("BufferGeometry"),
});
renderer.setClearColor(0x000000);
const scene = new THREE.Scene();
const material = new THREE.LineBasicMaterial({
color: 0xffffff,
});
const geometry1 = new THREE.BufferGeometry();
const R = 20;
const N = 50;
const sp = (2 * Math.PI) / N;
const arr = [];
const cx = 20;
const cy = 20;
for (let i = 0; i < N; i++) {
const angle = sp * i;
const x = cx + R * Math.cos(angle);
const y = cy + R * Math.sin(angle);
arr.push(x, 0, y);
}
const vertices1 = new Float32Array(arr);
const attribue1 = new THREE.BufferAttribute(vertices1, 3);
geometry1.attributes.position = attribue1;
const line1 = new THREE.LineLoop(geometry1, material);
scene.add(line1);
const geometry2 = new THREE.BufferGeometry();
// 三维向量表示的坐标值
const pointsArr2 = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 30, 0), new THREE.Vector3(0, 30, 30), new THREE.Vector3(0, 0, 30)];
geometry2.setFromPoints(pointsArr2);
const line2 = new THREE.LineLoop(geometry2, material);
scene.add(line2);
const geometry3 = new THREE.BufferGeometry();
// 二维向量表示的坐标值
const pointsArr3 = [new THREE.Vector2(0, 0), new THREE.Vector2(50, 0), new THREE.Vector2(50, 50), new THREE.Vector2(0, 50)];
geometry3.setFromPoints(pointsArr3);
const line3 = new THREE.LineLoop(geometry3, material);
scene.add(line3);
const camera = new THREE.PerspectiveCamera(50, 300 / 200, 1, 3000); //透视投影相机参数设置
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);
scene.add(camera);
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
renderer.render(scene, camera);
}
</script>
BoxGeometry
以下所有几何体的渲染器、相机、坐标轴辅助设置均相同，代码就不重复贴上了。
<script>
...
//长方体
const geometry = new THREE.BoxGeometry(60, 40, 20);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff, //设置材质颜色
transparent: true, //开启透明
opacity: 0.5, //设置透明度
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
...
</script>
SphereGeometry
<script>
...
//球体
const geometry = new THREE.SphereGeometry(20);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
...
</script>
CylinderGeometry
<script>
...
//圆柱
const mesh = new THREE.Mesh(
new THREE.CylinderGeometry(20, 20, 30),
new THREE.MeshBasicMaterial({
color: 0x00ffff,
})
);
scene.add(mesh);
...
</script>
PlaneGeometry
<script>
...
//矩形平面
const mesh = new THREE.Mesh(
new THREE.PlaneGeometry(50, 30),
new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide, //两面可见
})
);
scene.add(mesh);
...
</script>
CircleGeometry
<script>
...
//圆形平面
const mesh = new THREE.Mesh(
new THREE.CircleGeometry(30),
new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide, //两面可见
})
);
scene.add(mesh);
...
</script>
ShapeGeometry
<script>
...
// 平面多边形轮廓
const shape = new THREE.Shape([new THREE.Vector2(-50, -50), new THREE.Vector2(-50, 50), new THREE.Vector2(50, 50), new THREE.Vector2(50, -50)]);
const geometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 平面轮廓 arc
const shape1 = new THREE.Shape();
shape1.moveTo(0, 0);
shape1.lineTo(30, 0); // 绘制直线线段
shape1.arc(0, 0, 50, 0, Math.PI / 2); //圆心坐标是相对于当前currentPoint，而不是坐标原点
shape1.lineTo(0, 50);
const geometry1 = new THREE.ShapeGeometry(shape1);
const material1 = new THREE.MeshBasicMaterial({
color: 0xff0000,
side: THREE.DoubleSide,
});
const mesh1 = new THREE.Mesh(geometry1, material1);
mesh1.position.set(0, 100, 0);
scene.add(mesh1);
// 平面轮廓 absarc
const shape2 = new THREE.Shape();
shape1.moveTo(0, 0);
shape2.lineTo(100, 0);
shape2.absarc(100, 0, 50, 0, Math.PI / 2); // absarc圆心坐标不受到currentPoint影响，以坐标原点作为参考
shape2.lineTo(0, 50);
const path2_1 = new THREE.Path(); // 圆孔
path2_1.absarc(25, 25, 20);
const path2_2 = new THREE.Path(); // 圆孔
path2_2.absarc(80, 25, 20);
shape2.holes.push(path2_1, path2_2); //内孔轮廓分别放入holes属性中
const geometry2 = new THREE.ShapeGeometry(shape2);
const material2 = new THREE.MeshBasicMaterial({
color: 0x0000ff,
side: THREE.DoubleSide,
});
const mesh2 = new THREE.Mesh(geometry2, material2);
mesh2.position.set(0, -150, 0);
scene.add(mesh2);
...
camera.position.set(0, 0, 1000);
...
</script>
<script>
...
const pointsArr = [new THREE.Vector2(0, 0), new THREE.Vector2(60, 0), new THREE.Vector2(30, 45)];
const shape = new THREE.Shape(pointsArr);
// 轮廓填充几何体
const geometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
...
</script> 
TubeGeometry
<script>
...
const p1 = new THREE.Vector3(0, 0, 100);
const p2 = new THREE.Vector3(0, 0, 30);
const p3 = new THREE.Vector3(0, 0, 0);
const p4 = new THREE.Vector3(30, 0, 0);
const p5 = new THREE.Vector3(100, 0, 0);
const line1 = new THREE.LineCurve3(p1, p2); // 3D直线线段
const curve = new THREE.QuadraticBezierCurve3(p2, p3, p4); // 三维二次贝塞尔曲线
const line2 = new THREE.LineCurve3(p4, p5);
const curvePath = new THREE.CurvePath();
curvePath.curves.push(line1, curve, line2); // 三条线拼接为一条曲线
//管道几何体
const geometry = new THREE.TubeGeometry(curvePath, 50, 15, 25); //参数：路径、沿着轨迹细分数、管道半径、管道截面圆细分数
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
...
</script> 
LatheGeometry
<script>
...
const pointsArr = [new THREE.Vector2(50, 60), new THREE.Vector2(25, 0), new THREE.Vector2(50, -60)];
// 旋转成型几何体
const geometry = new THREE.LatheGeometry(pointsArr);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
...
</script> 
ExtrudeGeometry
<script>
...
const pointsArr = [new THREE.Vector2(-50, -50), new THREE.Vector2(-50, 50), new THREE.Vector2(50, 50), new THREE.Vector2(50, -50)];
const shape = new THREE.Shape(pointsArr);
//拉伸造型几何体
const geometry = new THREE.ExtrudeGeometry(shape, { depth: 20 });
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
...
</script> 
<script>
...
const shape = new THREE.Shape([new THREE.Vector2(0, 0), new THREE.Vector2(0, 10), new THREE.Vector2(10, 10), new THREE.Vector2(10, 0)]);
const curve = new THREE.CatmullRomCurve3([new THREE.Vector3(-10, -50, -50), new THREE.Vector3(10, 0, 0), new THREE.Vector3(8, 50, 50), new THREE.Vector3(-5, 0, 100)]);
//扫描造型几何体
const geometry = new THREE.ExtrudeGeometry(
shape, //扫描轮廓
{
extrudePath: curve, //扫描轨迹
steps: 100, //沿着路径细分精度，越大越光滑
}
);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
...
</script> 
EdgesGeometry
<script>
...
// 平面轮廓 absarc
const shape = new THREE.Shape();
shape.lineTo(100, 0);
shape.absarc(100, 0, 50, 0, Math.PI / 2); // absarc圆心坐标不受到currentPoint影响，以坐标原点作为参考
shape.lineTo(0, 50);
const path1 = new THREE.Path(); // 圆孔
path1.absarc(20, 20, 20);
const path2 = new THREE.Path(); // 圆孔
path2.absarc(80, 20, 20);
shape.holes.push(path1, path2); //内孔轮廓分别放入holes属性中
const geometry = new THREE.ExtrudeGeometry(shape, {
depth: 20, //拉伸长度
bevelEnabled: false, //禁止倒角
curveSegments: 50,
});
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(geometry, material);
// 模型边界线EdgesGeometry
const edges = new THREE.EdgesGeometry(geometry);
const edgesMaterial = new THREE.LineBasicMaterial({
color: 0x00ffff,
});
const line = new THREE.LineSegments(edges, edgesMaterial);
mesh.add(line);
scene.add(mesh);
...
camera.position.set(200, 200, 500);
...
</script>
标签：...,const,Geometry,Curve,THREE,几何体,geometry,new,50 From： https://www.cnblogs.com/caroline2016/p/18115766