Threejs——五、点线模型对象、三角形概念、几何体顶点位置，顶点索引、法线以及对几何体进行旋转缩放和平移

news2024/12/22 18:13:44

文章：

  1. Three——一、初识Three以及基础的前端场景搭建(结尾含源码)
  2. Three——二、加强对三维空间的认识
  3. Three——三、动画执行、画布大小、渲染帧率和相机适配体验
  4. Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用
  5. Three——五、点线模型对象、三角形概念、几何体顶点位置，顶点索引、法线以及对几何体进行旋转缩放和平移

关于几何体BufferGeomety

球体SphereGeometry，立方体BoxGeometry等都是属于几何体的一部分

几何体顶点位置数据和点模型

偏底层，往下看

缓冲类型几何体BufferGeometry

如果你想创作出不规则几何形状，那么就可以通过BufferGeometry来进行自定义，也就是所谓的顶点数据
例：创建一个空的几何体对象

const geometry = new Three.BufferGeometry();

利用js中的类型化数组Float32Array创建xyz坐标数据来表示顶点坐标

//类型化数组创建顶点数据
const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    0, 100, 0, //顶点3坐标
    0, 0, 10, //顶点4坐标
    0, 0, 100, //顶点5坐标
    50, 0, 10, //顶点6坐标
]);
缓冲区对象BufferAttribute表示几何体顶点数据
// 创建属性缓冲区对象
//3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices, 3);
设置几何体顶点位置.attributes.position
geometry.attributes.position = attribue;

    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      50, 0, 0, //顶点2坐标
      0, 100, 0, //顶点3坐标
      0, 0, 10, //顶点4坐标
      0, 0, 100, //顶点5坐标
      50, 0, 10, //顶点6坐标
    ])
    const attribue = new THREE.BufferAttribute(vertices, 3);
    geometry.attributes.position = attribue;
    // 材质
    material = new THREE.MeshBasicMaterial({
      color: 0x00ffff,
      transparent: true, //开启透明
      // opacity: 0.5, //设置透明度
      side: THREE.DoubleSide, //两面可见
      shininess: 500,
    });
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

请添加图片描述

点模型Points

顾名思义就是将Mesh面材质换成点
例如:

// 点渲染模式
const material = new THREE.PointsMaterial({
    color: 0x00ffff,
    size: 10.0 //点对象像素尺寸
});

将几何体转成点模型

const points = new THREE.Points(geometry, material); //点模型对象

请添加图片描述

Line线模型对象

线模型就是从第一个点开始连接，一直到最后一个点，依次连成线条

线材质对象LineBasicMaterial

我们这里保留三个点形成一个三角形

const vertices = new Float32Array([
    0, 0, 0, 
    50, 0, 0, 
    0, 100, 0, 
]);

// 线材质对象
const material = new THREE.LineBasicMaterial({
    color: 0x00ffff //线条颜色
}); 
// 创建线模型对象
const line = new THREE.Line(geometry, material);

请添加图片描述

这里会发现最后一条线没有连接起来从而展现闭合的效果，接着往下看。

线模型LineLoop

用来闭合线条

// 闭合线条
const line = new THREE.LineLoop(geometry, material);

请添加图片描述

非连续线条LineSegments

//非连续的线条
const line = new THREE.LineSegments(geometry, material);

请添加图片描述

网络模型(三角形概念)

网络模型Mesh是通过一个或多个三角形的拼接而成。使用使用网格模型Mesh渲染几何体geometry，就是几何体所有顶点坐标三个为一组，构成一个三角形，多组顶点构成多个三角形，就可以用来模拟表示物体的表面。

双面可见

前面已经所过如和让两面都可见

const material = new THREE.MeshBasicMaterial({
    color: 0x00ffff , //材质颜色
    side: THREE.FrontSide, //默认只有正面可见
});

const material = new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide, //两面可见
});


const material = new THREE.MeshBasicMaterial({
    side: THREE.BackSide, //设置只有背面可见
});

构建矩形平面几何体

关于坐标点该从哪里出发，这里正面通过逆时针去连线，反面通过顺时针连起来，逆时针(从下往上，从右往左)

请添加图片描述

所以生成一个平面正方形的坐标为

    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array([
      0, 0, 0, 
      80, 0, 0, 
      80, 80, 0, 
      
      0, 0, 0, 
      80, 80, 0, 
      0, 80, 0,
    ]);
    const attribue = new THREE.BufferAttribute(vertices, 3);

    geometry.attributes.position = attribue;
    // 材质
    material = new THREE.LineBasicMaterial({
      color: 0x00ffff,
    });
    // 换成闭合线条效果
    mesh = new THREE.LineLoop(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

咱们给场景中加一个坐标系看一下

    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OgQ4Ym4P-1683602169841)(img/Three05Img/sbx.png)]

几何体顶点索引数据

减少三角形的顶点坐标数量，可以借助几何体顶点索引geometry.index来实现

const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    80, 0, 0, //顶点2坐标
    80, 80, 0, //顶点3坐标
    0, 0, 0, //顶点4坐标   和顶点1位置相同
    80, 80, 0, //顶点5坐标  和顶点3位置相同
    0, 80, 0, //顶点6坐标
]);

如果有重复的可以把重复的顶点删除

const vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    80, 0, 0, //顶点2坐标
    80, 80, 0, //顶点3坐标
    0, 80, 0, //顶点4坐标
   ]);

请添加图片描述

通过BufferAttribute来创建顶点索引.index的数据

通过js中的类型化数组Unit16Array来创建顶点索引.index的数据

const indexes = new Uint16Array([
    // 下面索引值对应顶点位置数据中的顶点坐标
    0, 1, 2, 0, 2, 3,
])

通过缓冲区对象BufferAttribute来表示几何体顶点索引.index数据

geometry.index = new THREE.BufferAttribute(indexes, 1); // 1个为一组

效果如下：
请添加图片描述

顶点法线数据

一个新的顶点数据，顶点法线(法向量)数据geometry.attributes.normal
如果将MeshBasicMaterial材质改为MeshLambertMaterial材质,这里的矩形平面无法正常渲染，因为使用受光照印象的材质，几何体必须需要定义顶点法线数据。
代码：

    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array([0, 0, 0, 80, 0, 0, 80, 80, 0, 0, 80, 0]);

    const indexes = new Uint16Array([
      // 下面索引值对应顶点位置数据中的顶点坐标
      0, 1, 2, 0, 2, 3,
    ]);
    const attribue = new THREE.BufferAttribute(vertices, 3);
    geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组
    geometry.attributes.position = attribue;
    // 材质
    material = new THREE.MeshBasicMaterial({
      color: 0x00ffff,
      transparent: true, //开启透明
      // opacity: 0.5, //设置透明度
      side: THREE.DoubleSide, //两面可见
    });
    mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

请添加图片描述

将材质换为MeshLambertMaterial后
请添加图片描述

矩形平面几何体法线————无顶点索引

Three.js中法线是通过顶点定义，默认情况下，每个顶点都有一个法线数据，就像每一个顶点都有一个位置数据。

// 矩形平面，无索引，两个三角形，6个顶点
// 每个顶点的法线数据和顶点位置数据一一对应
const normals = new Float32Array([
    0, 0, 1, //顶点1法线( 法向量 )
    0, 0, 1, //顶点2法线
    0, 0, 1, //顶点3法线
    0, 0, 1, //顶点4法线
    0, 0, 1, //顶点5法线
    0, 0, 1, //顶点6法线
]);
// 设置几何体的顶点法线属性.attributes.normal
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3);

效果：
请添加图片描述

有顶点索引

// 矩形平面，有索引，两个三角形，有2个顶点重合，有4个顶点
// 每个顶点的法线数据和顶点位置数据一一对应
const normals = new Float32Array([
    0, 0, 1, //顶点1法线( 法向量 )
    0, 0, 1, //顶点2法线
    0, 0, 1, //顶点3法线
    0, 0, 1, //顶点4法线
]);
// 设置几何体的顶点法线属性.attributes.normal
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3);

查看three.js自带几何体顶点

查看几何体顶点位置和索引数据

如果我想直接知道矩形平面的定点位置和索引数据，那么可以用属性在控制台中打印查看

// const geometry = new THREE.PlaneGeometry(100,50); //矩形平面几何体
const geometry = new THREE.BoxGeometry(100,100,100); //长方体

console.log('几何体',geometry);
console.log('顶点位置数据',geometry.attributes.position);
console.log('顶点索引数据',geometry.index);

请添加图片描述

材质属性wireframe

const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff, 
    wireframe:true,//线条模式渲染mesh对应的三角形数据
});

请添加图片描述

几何体细分数

矩形平面几何体至少需要两个三角形拼接而成。矩形几何体PlaneGeometry中参数的3,4就是表示细分数，默认值是1,1

 //矩形几何体PlaneGeometry的参数3,4表示细分数，默认是1,1
const geometry = new THREE.PlaneGeometry(100,50,1,1);

// 一个矩形一分为二，每个矩形上有两个三角形，也就是四个
const geometry = new THREE.PlaneGeometry(100,50,2,1);

// 把一个矩形分为4份，每个矩形2个三角形，总共就是8个三角形
const geometry = new THREE.PlaneGeometry(100,50,2,2);

球体SphereGeometry的细分数

参数2,3分别代表宽高两个方向上的细分数，默认32，61，具体情况根据版本为准
例如：

 const geometry = new THREE.SphereGeometry(100, 10,10);

请添加图片描述

细分数越多，这个球体就会越圆润
请添加图片描述

关于三角形的数量和性能

对于一个曲面而言，细分数越大，表面越光滑，但是三角形和顶点数量却越多。
几何体三角形数量或者说顶点数量直接影响Three.js的渲染性能，在不影响渲染效果的情况下，一般尽量越少越好。、

旋转、缩放、平移几何体

BufferGeinetry几何体可以通过css3属性来进行旋转缩放平移等操作
缩放.scale()，平移.translate()，旋转rotateX、Y、Z()

// 长宽高缩放
geometry.scale(2, 2, 2);
// x轴偏移50px
geometry.translate(50, 0, 0);
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);

请添加图片描述

居中.center()

如果几何体已经发生了偏移，那么执行ceenter可以重新与坐标原点重合

geometry.center();

请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/505062.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于主从博弈的综合能源服务商动态定价策略研究（Matlab代码实现）

基于主从博弈的综合能源服务商动态定价策略研究（Matlab代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…
阅读更多...
使用 Sa-Token 完成踢人下线功能

使用 Sa-Token 完成踢人下线功能

一、需求 在企业级项目中，踢人下线是一个很常见的需求，如果要设计比较完善的话，至少需要以下功能点： 可以根据用户 userId 踢出指定会话，对方再次访问系统会被提示：您已被踢下线，请重新登录。…
阅读更多...
05/09报告

05/09报告

1. 使用10w条数据 评分分布情况： 2. 训练集、测试集、验证集为7:2:1 1）2分类（3分及以下标签为0，3分以上标签为1） 模型评估： 测试评论： 预测结果： 2）5分类（标签…
阅读更多...
Kyligence Zen 产品体验 ——AI数据指标洞察专家

Kyligence Zen 产品体验 ——AI数据指标洞察专家

大势所趋：从报表模式到指标模式 Kyligence Zen----一个立志于打造一个人人可用的敏捷指标工具 一、基本信息 体验时间 2023年5月 体验博主 风尚云网 目标产品 Kyligence Zen 开发团队 跬智信息（Kyligence）由 Apache Kylin 创始团队于…
阅读更多...
干货！ICLR：基于学习的分布式多视角图像压缩

干货！ICLR：基于学习的分布式多视角图像压缩

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入！ 作者介绍 张鑫杰 香港科技大学电子与计算机工程系在读博士生，研究方向为图像视频压缩， 个人主页为https://xinjie-q.github.io/ 内容简介 多视角图像压缩在3D相关应用程序中起着至关重要…
阅读更多...
搞定面试官-JUC面试专题强化

搞定面试官-JUC面试专题强化

JUC是java.util.concurrent包的简称。 1. AQS高频问题 1.1 AQS是什么？ 先看类位置 AQS是JUC下大量工具的基础类，很多工具都基于AQS实现的，比如lock锁, CountDownLatch，Semaphore，线程池等等都用到了AQS。 AQS中有一…
阅读更多...
联合群美叶彦文:坚持，只要有一口气，能坚持多久，就坚持多久

联合群美叶彦文:坚持，只要有一口气，能坚持多久，就坚持多久

创业之路的成败得失就看有多坚持。 成功并不是终点，失败并不是终结，只有勇气才是永恒。 Success is not final,failure is not fatal,it is the courage to continue that counts. ——温斯顿丘吉尔 迪斯雷利曾经说过：“成功的奥秘在于目标…
阅读更多...
sqli-labs通关（十八）~（二十二）

sqli-labs通关（十八）~（二十二）

第十八关 输入正确的账号密码，就会返回显示我们的User Agent信息，这是在我们的post请求里面的信息 所以我们用burp suite拦截抓包 那我们就可以对这个User Agent下手进行注入 当我们把它改成1时，出现如下报错信息，可以知道语句…
阅读更多...
看完这篇文章你就彻底懂啦｛保姆级讲解｝-----（LeetCode刷题349两个数组的交集） 2023.5.9

看完这篇文章你就彻底懂啦｛保姆级讲解｝-----（LeetCode刷题349两个数组的交集） 2023.5.9

目录 前言算法题（LeetCode刷题349两个数组的交集）—（保姆级别讲解）分析题目：什么是哈希表？什么是冲突？常见的三种哈希结构选择正确的哈希结构 算法思想（画图展示）&#x…
阅读更多...
手写MyBatis第1-10章的总览

手写MyBatis第1-10章的总览

手写Mybatis的第一章到第十章的代码都放在了GitHub上，GIT地址： my-mybatis/my-mybatis at master dufGIT/my-mybatis (github.com) 从第一章到第十章目前已经涉及很多类了，但是它整体的模块还是很清晰的，我将这十章大致的内容用…
阅读更多...
Java基础语法（十五）：List、Set和Map

Java基础语法（十五）：List、Set和Map

目录 前言 一、List 二、Set 三、Map 总结 前言 Java是一种很流行的编程语言，拥有很多被广泛应用的数据结构，其中List、Set和Map是最常用的几个。本文将为您介绍这三种数据结构的基本概念和用法。 从上面的集合框架图可以看到，Java 集合…
阅读更多...
企企通携手「大自然家居」，启动供应链与采购数字化项目启动

企企通携手「大自然家居」，启动供应链与采购数字化项目启动

“大自然家居_我爱大自然”。健康环保，是大自然家居独特价值，也是大自然发展的DNA。 当大家对家居行业还停留在低效耗能、环境污染的传统印象时，作为“亚洲品牌500强”的「大自然家居（中国）有限公司」（以下…
阅读更多...
【LLM系列之FLAN-T5/PaLM】Scaling Instruction-Finetuned Language Models

【LLM系列之FLAN-T5/PaLM】Scaling Instruction-Finetuned Language Models

论文题目：《Scaling Instruction-Finetuned Language Models》 论文链接：https://arxiv.org/pdf/2210.11416.pdf github链接：https://github.com/google-research/text-to-text-transfer-transformer#released-model-checkpoints huggingface…
阅读更多...
量子计算（13）基础知识4：量子测量

量子计算（13）基础知识4：量子测量

量子测量是量子电路中最后一个元素，在电路中我们经常用到。下面，我将描述量子测量的数学依据以及与量子测量相关的科学定理。 目录 一、量子测量 1、理论知识 2、计算基下测量单量子比特 二、两个原理 1、延迟测量原理 2、隐含测量原理 一、量子测…
阅读更多...
RDA5850蓝牙多合一芯片之测试与调试

RDA5850蓝牙多合一芯片之测试与调试

上次说到一款比较经典的蓝牙芯片《一款非常经典的蓝牙多媒体芯片RDA5850》，于是就用那块二手音箱小板来试试能不能调通。首先看芯片手册发现 有HST_TXD和HST_RXD两个引脚。通过以往的经验就可以分析出 这两个就是用来调试烧写的引脚。 再看前篇文章（同下图）的引脚分布，同样…
阅读更多...
[论文笔记]SimMIM:a Simple Framework for Masked Image Modeling

[论文笔记]SimMIM:a Simple Framework for Masked Image Modeling

文章地址：https://arxiv.org/abs/2111.09886 代码地址：https://github.com/microsoft/SimMIM 文章目录 摘要文章思路创新点文章框架Masking strategyPrediction headPrediction targetEvaluation protocols 性能实验实验设置Mask 策略预测头目标分辨率预…
阅读更多...
科大讯飞股价迅飞 大模型逊色

科大讯飞股价迅飞 大模型逊色

5月8日，科大讯飞的股价开盘后放量涨停，报63.86元。5月6日，这家公司赶在A股周末休市前一天发布了自家的自然语言大模型“讯飞星火认知大模型”（以下简称“星火”）。 自OpenAI发布GPT-4后，国内的百度、华为、…
阅读更多...
Linux Crontab 使用详解

Linux Crontab 使用详解

什么是 crontab？ crontab 是一个定时执行任务的工具，在 Linux 系统中广泛使用。它可以让用户在指定的时间自动执行某个指令或脚本，例如自动备份数据、清除日志、定时运行程序等。 crontab 的工作原理 crontab 依赖于系统 crond 守护进程&a…
阅读更多...
视频监控系统选择硬盘，绿盘、蓝盘、紫盘、黑盘、红盘到底选择哪个？

视频监控系统选择硬盘，绿盘、蓝盘、紫盘、黑盘、红盘到底选择哪个？

前言 随着科技的不断进步和安全意识的提高，视频监控系统越来越普及，同时对于视频存储设备的要求也越来越高。硬盘作为视频存储设备的核心部件之一，选择一款适合的硬盘是保证视频存储和播放效果的关键。但是，市面上各种类型的硬盘…
阅读更多...
C++ 类的继承与派生

C++ 类的继承与派生

目录 1、继承的概念 2、继承（Inherit） 3、继承方式 4、父子同名成员并存 5、虚函数（virtual） 6、纯虚函数 1、继承的概念 以李白为例 类1是类2的基类（父类），类2是类3的基类（父类…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023