three中的BufferGeoery

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

本节主要学习BufferGerery,它是所有几何体的父类

1. BufferGeometry类

我们在之前的文章中已经通过代码和gif图片体验过了几何体,比如立方体、圆柱体等

而这些几何体的父类就是BufferGerery

文档地址:threejs.org/docs/index....

2. 几何体的本质核心

所有的几何体都是由一堆顶点数据,由顶点数据构成三角形,三角形再构成任何几何体

首先是一个个点,每三个点组成一个三角形,多个三角形组成面,面可以组成几何体,

即使是球体,放大无数倍也是一样的,是有很多细小的三角形组成,可以看下面的图

3. 具体的操作

  • 通过gemotry.attributes.position 设置顶点数据(数组中重复的数据会删除)
  • 通过geometry.index直接用postion种的索引, 来设置三角形数据

核心代码如下

javascript 复制代码
import * as THREE from 'three';

const geometry = new THREE.BufferGeometry();
// 这是一个个点
const vertices = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,

    0, 100, 0,
    100, 0, 0,
    100, 100, 0
]);
// 3个点一个面,所以这是两个三角形,组成的几何体
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute;
// 设置材质
const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color('orange'),
    wireframe: true, // 线框模式
});

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

export default mesh;

运行如下

我们发现其中有些点的坐标是重叠的,试想一下如果是一个球体,那么会有成千上万的三角形,很多点都是位置都是一样的,是不是就会爆炸了

所以再优化一下把所有的点的坐标放到vertices中,重叠的部分就只写一个即可,再后面用的地方我们只需要引用vertices的对用的索引即可

优化如下:

ini 复制代码
// 将重复的点去除
const vertices = new Float32Array([
    0, 0, 0,
    100, 0, 0,
    0, 100, 0,
//     0, 100, 0,
//     100, 0, 0,
    100, 100, 0
]);

const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribute;

// 如果要去除重复的点,那么就需要设置一下,将坐标索引设置进去,因为很点是重复的
const indexes = new Uint16Array([
    0, 1, 2, 2, 1, 3
]);
geometry.index = new THREE.BufferAttribute(indexes, 1);

4. 总结

  1. `BufferGerery``这个类是所有的几何体的父类
  2. 几何体本质上有无数的三角形组成,三角形由无数的点组成
  3. 掌握BufferGerery的基本用法
相关推荐
0wioiw012 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖15 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
绅士玖42 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius1 小时前
Unity URP管线着色器库攻略part1
前端
Xy9101 小时前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端