Three.js 学习笔记之模型(学习中1.17更新)

文章目录

  • 模型 = 几何体 + 材质
    • 模型
      • 点模型Points - 用于显示点
      • 线模型Line | LineLoop | LineSegments
      • 网格模型mesh - 三角形
    • 几何体BufferGeometry
      • 缓冲类型几何体BufferGeometry - 没有任何形状的空几何体
      • 创建几何体的方式
      • BufferAttribute Types
        • 定义顶点法线 geometry.attributes.normal
    • 材质 Material
      • 点材质PointsMaterial - Points使用的默认材质
      • 网格材质
        • MeshLamberMaterial
        • 高光网格材质 MeshPhongMaterial

模型 = 几何体 + 材质

注意点1:Three.js的材质默认正面可见、背面不可见
解决办法:材质配置对象中设置side属性

side取值描述
THREE.FrontSide只有正面可见
THREE.DoubleSide两面可见
THREE.BackSide设置只有背面可见

模型

点模型Points - 用于显示点

语法:new Points( geometry : BufferGeometry, material : Material )

  • geometry 几何体对象(可选),BufferGeometry的实例,默认值是一个新的BufferGeometry
  • material 材质对象(可选),默认值为PointsMaterial

描述:一个用于显示点的类,将几何体geometry渲染成点。

线模型Line | LineLoop | LineSegments

语法:new Line( geometry : BufferGeometry, material : Material )

  • geometry 线段的顶点,默认值是一个新的BufferGeometry
  • material 线的材质,默认值是一个新的且随机颜色的LineBasicMaterial
线模型绘制线条的规则
Line从第一个点开始到最后一个点,依次连成线
不闭合
LineLoop从第一个点开始到最后一个点,依次连成线,并将最后一个顶点连回第一个顶点
闭合
LineSegments从第一个点开始,第一个点连接第二个点,第三个点连接第四个点…有n个点,就有n/2条线
间断

网格模型mesh - 三角形

本质:一个一个三角形拼接
说明:几何体所有顶点坐标三个为一组,构成一个三角形,多组顶点构成多个三角形,用来模拟物体的表面。
在这里插入图片描述
三角形的正反面
三个点可以构成一个三角形,从第一个点往第三个点连接

  • 正面:相机对着面,连接的顺序是逆时针
  • 反面:相机对着面,连接的顺序是顺时针

几何体BufferGeometry

常见几何体可以看成是封装后的BufferGeometry

缓冲类型几何体BufferGeometry - 没有任何形状的空几何体

描述:BufferGeometry是一个没有任何形状的空几何体,通过定义顶点数据将BufferGeometry自定义为任何几何形状。每个几何体可以看作是由多个顶点构成的图案。

BufferGeometry实例的属性与方法

属性名/方法描述
index:BufferAttribute绑定几何体的顶点索引,每个三角形都绑定了三个顶点的索引。
允许顶点坐标在三角形中复用。
attributes : Object存储该几何体相关属性的hashmap (这里直接打印看不见里面的属性)
可以通过 几何体.setAttribute几何体.getAttribute 添加和访问与当前几何体相关的属性。

BufferGeometry实例attributes的方法

属性名/方法描述
position:BufferAttribute绑定几何体的顶点坐标,每个顶点绑定三个坐标值(xyz)
normal

案例
1.使用 THREE.BufferGeometry创建一个空的几何体对象

const geometry = new THREE.BufferGeometry(); 

2.利用Float32Array定义顶点数据,使用属性缓冲区对象BufferAttribute表示threejs几何体顶点数据。

通过javascript类型化数组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坐标
]);
// 创建属性缓冲区对象,3个为一组,表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices, 3);

3.设置几何体的定点.attributes.position

// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;

4.渲染顶点

4.1使用点模型渲染顶点数据,会把几何体渲染为点,网格模型Mesh会把几何体渲染为面。

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

在这里插入图片描述

4.2使用线模型渲染顶点数据,从第一个点开始到最后一个点,依次连成线。

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

在这里插入图片描述
4.3用网格模型渲染顶点

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

在这里插入图片描述

创建几何体的方式

  • 直接利用顶点数据,每一个点对应一个坐标
    • new Float32Array构造坐标数组 | 32位的浮点数型数组
    • THREE.BufferAttribute(坐标数组,3) 每三个坐标为一组,构建顶点坐标。顶点的个数等于组数
    • 赋值给geometry.attributes.position
  • 利用顶点索引,多个顶点可以利用同一个坐标
    • new Float32Array构造坐标数组
    • THREE.BufferAttribute(坐标数组,3) 每三个坐标为一组,构建顶点坐标。
    • new Uint16Array 构造索引顶点数组,顶点的个数需要和索引的个数一样 | 16 位无符号整数
    • geometry.index = new THREE.BufferAttribute(indexes, 1) 通过索引去坐标数组中取顶点坐标

案例: 构建一个矩形平面几何体 - 通过顶点数据
顶点坐标:一个矩形平面,可以至少通过两个三角形拼接而成。
三角形方向:两个三角形的正面需要保持一致
在这里插入图片描述

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 attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue;

几何体顶点索引数据 - 通过顶点索引
在上述案例中,坐标4和坐标5其实是重复的坐标,重复的坐标可以复用吗?

// 删除重复的坐标
const vertices = new Float32Array([0, 0, 0, //顶点1坐标 | 索引080, 0, 0, //顶点2坐标 4坐标 | 索引180, 80, 0, //顶点3坐标 5坐标 | 索引20, 80, 0, //顶点6坐标 | 索引3
]);// Uint16Array类型数组创建顶点索引数据
const indexs = new Uint16Array([// 下面索引值对应顶点位置数据中的顶点坐标0, 1, 2, 0, 2, 3,
])// 索引数据赋值给几何体的index属性 1个为1组
geometry.index = new THREE.BufferAttribute(indexs, 1); 

BufferAttribute Types

three.js 中一共有 9 种 BufferAttribute,每种和 JavaScript 中的类型相对应Typed Arrays使用new创建BufferAttribute对象时,传入数组是什么内省,生成的BufferAttribute就是什么类型

BufferAttribute 类型对应的JS数组类型
THREE.Float64BufferAttributeFloat64Array
THREE.Uint32BufferAttributeUint32Array
THREE.Int32BufferAttributeInt32Array
THREE.Uint16BufferAttributeUint16Array
THREE.Int16BufferAttributeInt16Array
THREE.Uint8ClampedBufferAttributeUint8ClampedArray
THREE.Uint8BufferAttributeUint8Array
THREE.Int8BufferAttributeInt8Array
定义顶点法线 geometry.attributes.normal

数学上法线的概念
一个平面,法线的就是改平面的垂线,如果是光滑曲面,一点的法线就是该点切面的法线。

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

无顶点索引的使用方式

const vertices = new Float32Array([0, 0, 0, //顶点1坐标80, 0, 0, //顶点2坐标80, 80, 0, //顶点3坐标0, 0, 0, //顶点4坐标80, 80, 0, //顶点5坐标0, 80, 0, //顶点6坐标
]);
geometry.attributes.position =new THREE.BufferAttribute(vertices, 3);
const material = new THREE.MeshLambertMaterial({color: 0xff0000, //线条颜色side: THREE.DoubleSide
}); 
// 矩形平面,无索引,两个三角形,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); 

有顶点索引的使用方式

const vertices = new Float32Array([0, 0, 0, //顶点1坐标 顶点4坐标80, 0, 0, //顶点2坐标80, 80, 0, //顶点3坐标 顶点5坐标0, 80, 0, //顶点6坐标
]);
geometry.attributes.position =new THREE.BufferAttribute(vertices, 3);
// 矩形平面,有索引,两个三角形,有2个顶点重合,有4个顶点
// Uint16Array类型数组创建顶点索引数据
const indexs = new Uint16Array([// 下面索引值对应顶点位置数据中的顶点坐标0, 1, 2, 0, 2, 3,
])
geometry.index = new THREE.BufferAttribute(indexs, 1); 
// 每个顶点的法线数据和顶点位置数据一一对应
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);

材质 Material

点材质PointsMaterial - Points使用的默认材质

语法:new PointsMaterial( parameters : Object )

实例的属性和方法

属性/方法描述
size:Number设置点的大小,默认值为1.0。
color:Color材质的颜色,默认值为白色 (0xffffff)。

网格材质

在这里插入图片描述
使用收光照影响的材质时,如果没有光照默认是黑色的(renderer画布设置了颜色可以看出)

MeshLamberMaterial

对光照的反射为漫反射:光线向四周反射。
在这里插入图片描述

高光网格材质 MeshPhongMaterial
  • 语法:new MeshPhongMaterial( parameters : Object )
    参数对象的属性 = 自有属性 + Material基类继承的属性
  • 对光照的反射为镜面反射:想象一面镜子的反射,如果刚好反射光对眼睛,会非常刺眼(某个局部区域高亮,像擦了高光)

注意:AmbientLight环境光没有方向,整体改变场景的光照。所以只有环境光的,高光效果会失效。

MeshPhongMaterial高光网格材质配置参数的自有属性

属性名属性描述
shininess高亮的程度,越高的值越闪亮,默认30
specular高光颜色,默认为0x111111灰色

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maven工程 — 继承与聚合 相关知识点详解

简介:这篇帖子主要讲解Maven工程中的继承与聚合的相关知识点,用简洁的语言和小编自己的理解,深入浅出的说明Maven工程的继承与聚合。 目录 1、继承 1.1 继承关系的实现 1.2 版本锁定 2、聚合 2.1 聚合方法 3、总结 1、继承 图 1-1 继承…

2018年认证杯SPSSPRO杯数学建模C题(第一阶段)机械零件加工过程中的位置识别全过程文档及程序

2018年认证杯SPSSPRO杯数学建模 基于轮廓特征的机械零件位置识别研究 C题 机械零件加工过程中的位置识别 原题再现: 在工业制造自动生产线中,在装夹、包装等工序中需要根据图像处理利用计算机自动智能识别零件位置,并由机械手将零件自动搬…

[go语言]输入输出

目录 知识结构 输入 1.Scan ​编辑 2.Scanf 3.Scanln 4.os.Stdin --标准输入,从键盘输入 输出 1.Print 2.Printf 3.Println 知识结构 输入 为了展示集中输入的区别,将直接进行代码演示。 三者区别的结论:Scanf格式化输入&#x…

ElasticSearch(1):Elastic Stack简介

1 简介 ELK是一个免费开源的日志分析架构技术栈总称,官网https://www.elastic.co/cn。包含三大基础组件,分别是Elasticsearch、Logstash、Kibana。但实际上ELK不仅仅适用于日志分析,它还可以支持其它任何数据搜索、分析和收集的场景&#xf…

MySQL中根据出生日期计算年龄

创建student表 mysql> create table student( -> sid int primary key comment 学生号, -> sname varchar(20) comm…

Android Studio由于开启代理无法下载依赖,一直在Build model

一、问题描述 正常打开AS项目,一直显示Build model就是不下载依赖 二、问题解决 1、首先选择No Proxy,可以看到这位同学之前是使用的代理。 2、打开下面文件,然后删除某尾的4行。 3、面对提示框,直接点击OK。 4、然后停…

IIS 缓存, 更新后前端资源不能更新问题

解决办法: 通常只需要index.html 不缓存即可, 其他文件都是根据index.html 中的引用去加载; 正确的做法是在 站点下增加 web.config 文件, 内容如下: 我这个是因为目录下有个config.js 配置文件, 也不能缓存, 所以加了两个 <?xml version"1.0" encoding&quo…

基于Python flask的猫眼电影票房数据分析可视化系统,可以定制可视化

技术方案 猫眼电影票房数据分析可视化系统是基于Python Flask框架开发的一款用于分析和展示猫眼电影票房数据的Web应用程序。该系统利用Flask提供了一个简单而强大的后端框架&#xff0c;结合Request库进行网络爬虫获取猫眼电影票房数据&#xff0c;并使用Pyecharts进行可视化…

消息中间件面试题

目录 一.为什么使用消息队列 二.RabbitMQ 1.RabbitMQ如何保证消息不丢失 2.RabbitMQ消息的重复消费问题 3.RabbitMQ延迟队列 4.RabbitMQ消息堆积 5.RabbitMQ高可用机制 三.Kafka 1.Kafka如何保证消息不丢失 2.Kafka如何保证消费消息的顺序性 3.Kafka高可用机制 4.Ka…

黑马程序员——javase基础——day05——面向对象基础

目录&#xff1a; 面向对象 面向对象介绍为什么要用面向对象编程面向对象.重点学习什么?类和对象 什么是类什么是对象对象的属性和行为类的定义对象的使用学生类的定义和使用对象内存图 Java内存分配单个对象多个对象思考&#xff1a;多个引用指向相同成员变量和局部变量的区…

未来能源转型之路:2023年第十三届中国国际储能大会启示录

在2023年第十三届中国国际储能大会上&#xff0c;全球各地的能源专家、学者和企业代表齐聚一堂&#xff0c;共同探讨了储能技术在推动能源转型中的重要作用。对于我们普通人来说&#xff0c;从这场大会中可以学到什么呢&#xff1f; 一、储能技术是未来能源发展的关键 随着可再…

html+js网页连接MQTT服务器new Paho.MQTT.Client

网页完整代码示例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&quo…

YOLOv5改进 | 检测头篇 | 利用DynamicHead增加辅助检测头进行针对性检测(让小目标无所遁形)

一、本文介绍 本文给大家带来的改进机制是针对性的改进,针对于小目标检测增加P2层,利用DynamicHead(原版本一比一复现,全网独一份,不同于网上魔改版本)进行检测,其中我们增加P2层其拥有更高的分辨率,这使得模型能够更好地捕捉到小尺寸目标的细节。在这些的基础上配合Dyn…

基于springboot+vue的社区团购系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…

人工智能 AI 如何让我们的生活更加便利

每个人都可以从新技术中获益&#xff0c;一想到工作或生活更为便利、简捷且拥有更多空余时间&#xff0c;谁会不为之高兴呢&#xff1f;借助人工智能&#xff0c;每天能够多一些空余时间&#xff0c;或丰富自己的业余生活&#xff0c;为培养日常兴趣爱好增添一点便利。从电子阅…

微信小程序(六)tabBar的使用

注释很详细&#xff0c;直接上代码 新增内容&#xff1a; 1. 标签栏文字的内容以及默认与选中颜色 2. 标签栏图标的默认样式与选中样式 3. 标签选项路径页面 4.标签栏背景颜色 &#x1f43c;&#xff08;文末补充&#xff09;设置标签栏后为什么navigator标签无法跳转页面了 温…

【Dynamo学习笔记】Dynamo for Revit建模基础

目录 前言1 Revit模型的结构2 图元的操作2.1 图元的选择2.2 图元参数的读取和写入2.3 图元的创建2.3.2 创建轴网2.3.2 创建结构柱2.3.3 创建结构框架2.3.4 创建墙体 3 自定义节点 参考资料&#xff1a; &#xff08;1&#xff09; 罗嘉祥&#xff0c;宋姗&#xff0c;田宏钧. 《…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK使用相机日志跟踪功能(C#)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK使用相机日志跟踪功能&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机NEOAPI SDK和短曝光功能的技术背景Baumer工业相机通过NEOAPI SDK使用相机日志跟踪功能1.引用合适的类文件2.通过NEOAPI SDK使用相机日志跟踪功能3.通…

burp靶场--ssrf

burp靶场–ssrf 1.什么是ssrf 服务器端请求伪造是一种 Web 安全漏洞&#xff0c;允许攻击者导致服务器端应用程序向非预期位置发出请求。 在典型的 SSRF 攻击中&#xff0c;攻击者可能会导致服务器连接到组织基础设施内的仅供内部使用的服务。在其他情况下&#xff0c;他们可…

python数字图像处理基础(七)——直方图均衡化、傅里叶变换

目录 直方图均衡化均衡化原理均衡化效果标准直方图均衡化自适应直方图均衡化 傅里叶变换原理低通滤波高通滤波 直方图均衡化 均衡化原理 图像均衡化是一种基本的图像处理技术&#xff0c;通过更新图像直方图的像素强度分布来调整图像的全局对比度。这样做可以使低对比度的区域…