Three.js教程:Face3对象定义Geometry的三角形面

这篇具有很好参考价值的文章主要介绍了Three.js教程:Face3对象定义Geometry的三角形面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

推荐:将 NSDT场景编辑器 加入你的3D工具链
其他系列工具: NSDT简石数字孪生

Face3对象定义Geometry的三角形面

几何体Geometry的三角面属性geometry.faces和缓冲类型几何体BufferGeometry顶点索引属性BufferGeometry.index类似都是顶点位置数据的索引值,用来组织网格模型三角形的绘制。

学习本节课最好对照2.4 顶点索引复用顶点数据学习。

下面代码自定义了一个由两个三角形构成的几何体,两个三角形有两个顶点坐标位置是重合的。

Three.js教程:Face3对象定义Geometry的三角形面

var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry

var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3,p4);

// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
//三角面每个顶点的法向量
var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
// 设置三角面Face3三个顶点的法向量
face1.vertexNormals.push(n1,n2,n3);

// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
// 设置三角面法向量
face2.normal=new THREE.Vector3(0, -1, 0);

//三角面face1、face2添加到几何体中
geometry.faces.push(face1,face2);

设置四个顶点

两个三角形有6个顶点,但是两个顶点位置重合的,可以设置4个顶点即可。

var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3,p4);

Face3构建三角形

threejs提供了Face3对象构建三角形,通过Face3构建一个三角形,不要设置顶点位置坐标数据,只需要通过数组索引值从geometry.vertices数组中获得顶点位置坐标数据。

geometry.vertices数组索引0, 1, 2对应的顶点位置坐标数据表示三角形1的三个顶点坐标,索引0, 2, 3对应的顶点位置坐标数据表示三角形2的三个顶点坐标。

// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
// 三角面2
var face2 = new THREE.Face3(0, 2, 3);

三角形法线设置

前面课程将结果网格模型Mesh的几何体Geometry本质上都是一个一个三角形拼接而成,所以可以通过设置三角形的法线方向向量来表示几何体表面各个位置的法线方向向量。

设置三角形法线方向向量有两种方式,一种是直接定义三角形面的法线方向,另一个是定义三角形三个顶点的法线方向数据来表示三角形面法线方向。

使用三维向量THREE.Vector3表示三角形法线方向数值,然后赋值给三角形对象Face3的法线属性Face3.normal

// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
// 设置三角面法向量
face2.normal=new THREE.Vector3(0, -1, 0);

换另一种方式,通过三角形面Face3Face3.vertexNormals属性给三角形的三个顶点分别设置一个顶点法线方向数据。

// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
//三角面每个顶点的法向量
var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
// 设置三角面Face3三个顶点的法向量
face1.vertexNormals.push(n1,n2,n3);

三角形颜色设置

三角形颜色设置和三角形法线方向设置类型,可以直接设置三角形颜色,也可以设置三角形三个顶点的颜色。

// 三角形1颜色
face1.color = new THREE.Color(0xffff00);
// 设置三角面face1三个顶点的颜色
face1.color = new THREE.Color(0xff00ff);

通过三角形面Face3.vertexColors属性设置三角形三个顶点颜色。

三个顶点颜色不同三角形面渲染的时候会进行颜色插值计算,测到一个颜色渐变效果。

face1.vertexColors = [
  new THREE.Color(0xffff00),
  new THREE.Color(0xff00ff),
  new THREE.Color(0x00ffff),
]

使用顶点颜色数据的时候,注意设置材质的属性vertexColors属性值为THREE.VertexColors

注意设置三角形Face3的颜色对threejs网格模型Mesh有效,对于点模型Points、线模型Line是无效果,如果想设置点、线模型对应的几何体Geometry的顶点颜色,可以通过Geometry的顶点颜色属性geometry.colors实现。

3D建模学习工作室

上一篇:Three.js教程:设置Geometry顶点位置、顶点颜色数据 (mvrlink.com)

下一篇:Three.js教程:访问几何体对象的数据 (mvrlink.com)文章来源地址https://www.toymoban.com/news/detail-425545.html

到了这里,关于Three.js教程:Face3对象定义Geometry的三角形面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 第3章 开源大模型框架概览3.2 PyTorch与Hugging Face3.2.3 PyTorch在大模型中的应用

    在过去的几年里,人工智能技术的发展取得了显著的进展,尤其是自然语言处理(NLP)和计算机视觉等领域。这些技术的核心驱动力是大型神经网络模型,如Transformer、GPT、BERT等。这些模型的训练和部署需要一些高效的深度学习框架来支持。PyTorch是一种流行的深度学习框架,

    2024年01月18日
    浏览(38)
  • three.js——模型对象的使用材质和方法

    BufferGeometry通过.scale()、.translate()、.rotateX()、.rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。 官网的模型和材质使用 线条模式渲染,查看几何体三角形结构

    2024年02月07日
    浏览(43)
  • Three Js实现颜色自定义变换

    Three js的官方文档教程中给予了很多的Geomerty来构造不同类别的三维多边形,例如立方体BoxGeometry、圆柱体CylinderGeometry、球体SphereGeometry等Three.js几何体类都是基于基类BufferGeometry二次封装。Geometry对原生WebGL中的顶点位置position、顶点法向量normal、顶点颜色color、顶点纹理坐标

    2024年02月10日
    浏览(43)
  • 【Three.js】Three.js快速上手教程

    官网对 Three.js 的介绍非常简单:“Javascript 3D library”。 即: three.js 是 JavaScript 编写的 WebGL 第三方库。提供了非常多的3D显示功能,是一个常见的 web 3D 库。 相关概念解释:three.js webGL openGL openGL 是一个跨平台3D/2D的绘图标准, webGL 则是 openGL 在浏览器上的一个实现。 web前端

    2024年01月16日
    浏览(56)
  • three.js从入门到精通系列教程003 - three.js透视相机(PerspectiveCamera)

    透视相机(PerspectiveCamera) 它是用来模拟人眼所看到的景象,它也是3D场景的渲染中使用得最普遍的投影模式。呈现的效果,类似眼睛看东西,近大远小 源码下载地址: three.js从入门到精通系列教程002 - three.js透视相机(PerspectiveCamera)

    2024年01月19日
    浏览(54)
  • three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera

    正投影相机-OrthographicCamera,通过正投影相机渲染出来的物体的尺寸都一样,不会因为观察距离的远近而出现近大远小的情况 源码下载地址 three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera

    2024年01月20日
    浏览(48)
  • 『Three.js』入门教程

    1.官网地址 Github:https://github.com/mrdoob/three.js  我们可以直接下载压缩包并解压或使用 git clone url 若 github 过慢,则使用 gitee 对应镜像仓库:three.js: mrdoob/three.js 同步库 2.目录解析 3.启动方式 在three.js项目根目录下执行如下命令,yarn可使用 npm install yarn -g 安装 浏览器访问: 1.简

    2024年02月03日
    浏览(91)
  • three.js从入门到精通系列教程004 - three.js透视相机(PerspectiveCamera)滚动浏览全景大图

    源码下载地址 three.js从入门到精通系列教程004 - three.js透视相机(PerspectiveCamera)滚动浏览全景大图

    2024年01月23日
    浏览(64)
  • Three.js教程:第一个3D场景

    推荐:将 NSDT场景编辑器加入你3D工具链 其他工具系列: NSDT简石数字孪生 下面的代码完整展示了通过three.js引擎创建的一个三维场景,在场景中绘制并渲染了一个立方体的效果,为了大家更好的宏观了解three.js引擎, 尽量使用了一段短小但完整的代码实现一个实际的三维效果

    2023年04月12日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包