【three.js】生成点并连线的两种方式

本文主要是介绍【three.js】生成点并连线的两种方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

第一种方式：Float32Array数组方式

第二种方式：几何体方法.setFromPoints()

---

第一种方式：Float32Array数组方式

import * as THREE from './build/three.module.js'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';// 创建3D场景对象Scene
const scene = new THREE.Scene();
const geometry = new THREE.BufferGeometry(); //创建一个几何体对象
const R = 100; //圆弧半径
const N = 50; //分段数量
const sp = 2 * Math.PI / N;//两个相邻点间隔弧度
// 批量生成圆弧上的顶点数据
const arr = [];
for (let i = 0; i < N; i++) {const angle =  sp * i;//当前点弧度// 以坐标原点为中心，在XOY平面上生成圆弧上的顶点数据const x = R * Math.cos(angle);const y = R * Math.sin(angle);arr.push(x, y, 0);
}
//类型数组创建顶点数据
const vertices = new Float32Array(arr);
// 创建属性缓冲区对象
//3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices, 3); 

这篇关于【three.js】生成点并连线的两种方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---