位置: 编程技术 - 正文

Three.js源码阅读笔记(物体是如何组织的)(three.js typescript)

编辑:rootadmin
这是Three.js源码阅读笔记第三篇。之前两篇主要是关于核心对象的,这些核心对象主要围绕着矢量vector3对象和矩阵matrix4对象展开的,关注的是空间中的单个顶点的位置和变化。这一篇将主要讨论Three.js中的物体是如何组织的:即如何将顶点、表面、材质组合成为一个具体的对象。 Object::Mesh 该构造函数构造了一个空间中的物体。之所以叫“网格”是因为,实际上具有体积的物体基本都是建模成为“网格”的。 实际上,Mesh类只有两个属性,表示几何形体的geometry对象和表示材质的material对象。geometry对象在上一篇博文中已经介绍过,还有部分派生类会在这篇博文中介绍(通过这些派生类的构造过程,能更加清晰地了解到Mesh对象的工作原理);matrial对象及其派生类也将在这篇笔记中介绍。Mesh对象的这两个属性相互紧密关联,geometry对象中的face数组中,每个face对象的materialIndex用来匹配material属性对象,face对象的vertexUVs数组用以依次匹配每个顶点在数组上的取值。值得注意的是,Mesh只能有一个material对象(不知这样设计的意图何在),如果需要用到多个材质,应当将材质按照materialIndex顺序初始化在geometry本身的materials属性中。 Geometry::CubeGeometry 该构造函数创建了一个立方体对象。 构造函数做的最重要的事在buildPlane中。该函数最重要的事情就是对scope的操作(上面的代码块中,scope就是this),包括:调用scope.vertices.push(vector)将顶点加入geometry对象;调用scope.faces.push(face)将表面加入到geometry对象,调用scope.faceVertexUvs[i].push(uv)方法将对应于顶点的材质坐标加入geometry对象。代码的大部分都是关于生成立方体的逻辑,这些逻辑很容易理解,也很容易扩展到其他类型的geometry对象。构造函数的参数包括长、宽、高和三个方向的分段数。所谓分段,就是说如果将widthSeqments等三个参数都设定为2的话,那么每个面将被表现成2×2=4个面,整个立方体由个表面组成,正如同网格一样。 除了一个大部分对象都具有的clone()方法,CubeGeometry没有其他的方法,其他的XXXGeometry对象也大抵如此。没有方法说明该对象负责组织和存储数据,而如何利用这些数据生成三维场景和动画,则是在另外的对象中定义的。 Geometry::CylinderGeometry 顾名思义,该构造函数创建一个圆柱体(或圆台)对象。 有了CubeGeometry构造函数的基础,自己也应当能够实现CylinderGeometry,我们只需要注意一下构造函数各参数的意义。radiusTop和radiusBottom表示顶部和底部的半径,height表示高度。radiusSegments定义了需要将圆周分成多少份(该数字越大,圆柱更圆),heightSegments定义了需要将整个高度分成多少份,openEnded指定是否生成顶面和底面。 源码中还有两点值得注意的:该模型的本地原点是中轴线的中点,而不是重心之类的,也就是说上圆面的高度(y轴值)是height/2,下圆面是-height/2,这一点对圆柱体来说没有差异,但对于上下半径不同的圆台体就有差异了;还有就是该模型的顶面和地面采用face3类型表面,而侧面采用face4类型表面。 Geometry::SphereGeometry 该构造函数创建一个球体。 各参数的意义:radius指定半径,widthSegments表示“经度”分带数目,heightSegments表示“纬度”分带数目。后面四个参数是可选的,表示经度的起始值和纬度的起始值。熟悉极坐标的都了解,通常用希腊字母φ(phi)表示纬圈角度(经度),而用θ(theta)表示经圈角度(纬度)。这四个数的默认值分别为0,2π,0,π,通过改变他们的值,可以创造出残缺的球面(但是边缘必须整齐)。 源码中,除了北极和南极的极圈内的区域是用face3类型表面,其他部位都是用的face4型表面。本地原点为球心。 Geometry::PlaneGeometry 该构造函数创建一个平面。 各参数意义:依次为宽度、高度、宽度分段数、高度分段数。想必读者对这种构造“格网”的方式应该很熟悉了吧。 源码中得到一些其他信息:平面被构造在x-y平面上,原点即矩形中心点。 Geometry::ExtrudeGeometry 该对象现在是构造一般几何形体的方法,但是通常我们是将建模好的对象存储在某种格式的文件中,并通过loader加载进来,所以似乎鲜有直接用到该函数的机会。而且这个函数看上去还是半成品,很多设定一股脑地堆在options对象里,我也没有仔细研究。 Material::Material Material对象是所有其他种类Material的原型对象。 先看一些较为重要的属性: 属性opacity为一个0-1区间的值,表明透明度。属性transparent指定是否使用透明,只有在该值为真的时候,才会将其与混合(透明是渲染像素时,待渲染值与已存在值共同作用计算出渲染后像素值,达到混合的效果)。 属性blending,blendSrc,blendDst,blendEquation指定了混合方式和混合源Src和混合像素已有的像元值Dst的权重指定方式。默认情况下(如构造函数中赋的缺省值),新的像元值等于:新值×alpha+旧值×(1-alpha)。 我曾困惑为何Material类中没有最重要的对象,表示纹理图片的属性。后来我理解了,其实材质和纹理还是有区别的,只能说某种材质有纹理的,但也有材质是没有纹理的。材质影响的是整个形体的渲染效果,比如:“对一根线渲染为5px宽,两端点为方块,不透明的红色”这段描述就可以认为是材质,而没有涉及任何纹理。 和众多Geometry对象一样,Material对象除了通用的clone(),dellocate()和setValues()方法,没有其他方法。以下是两种最基本的材质对象。 Material::LineBasicMaterial 该构造函数创建用于渲染线状形体的材质。 属性color和linewidth顾名思义,指线的颜色和线的宽度(线没有宽度,这里的宽度是用来渲染的)。 属性linecap和linejoin指定线条端点和连接点的样式。 属性fog指定该种材质是否收到雾的影响。 Material::MeshBasicMaterial 该构造函数创建用于渲染Mesh表面的材质。 这里出现了最重要的纹理属性,包括map,lightMap和specularMap,他们都是texture类型的对象。 属性wireframe指定表面的边界线是否渲染,如果渲染,后面的若干以wireframe开头的属性表示如果渲染边界线,将如何渲染。Texture::Texture 该构造函数用来创建纹理对象。 最重要的属性是image,这是一个JavaScript Image类型对象。传入的第一个参数就是该对象,如何创建该对象在后面说。 后面的对象都是可选的,如果缺省就会填充默认值,而且往往都是填充默认值。 属性magFileter和minFileter指定纹理在放大和缩小时的过滤方式:最临近点、双线性内插等。 从url中生成一个texture,需要调用Three.ImageUtils.loadTexture(paras),该函数返回一个texture类型对象。在函数内部又调用了THREE.ImageLoader.load(paras)函数,这个函数内部又调用了THREE.Texture()构造函数,生成纹理。

推荐整理分享Three.js源码阅读笔记(物体是如何组织的)(three.js typescript),希望有所帮助,仅作参考,欢迎阅读内容。

Three.js源码阅读笔记(物体是如何组织的)(three.js typescript)

文章相关热门搜索词:three.js入门指南,three. js,d3.js源码,three.js typescript,javascript源码阅读,threejs源码解析,基于threejs的开源项目,javascript源码阅读,内容如对您有帮助,希望把文章链接给更多的朋友!

Three.js源码阅读笔记(Object3D类) 这是Three.js源码阅读笔记的第二篇,直接开始。Core::Object3DObject3D似乎是Three.js框架中最重要的类,相当一部分其他的类都是继承自Object3D类,比如场景类

Three.js源码阅读笔记(基础的核心Core对象) Three.js是一个比较伟大的webgl开源库,它简化了浏览器3D编程,使得使用JavaScript在浏览器中创建复杂的场景变得容易很多。Github上众多webgldemo令我兴奋不

JS声明变量背后的编译原理剖析 只要是写过点JS代码,很简单一个var就完事了。那对于JS编译器背后它又发生了什么呢?那就一步步通过代码来讲起。x=1;alert(x);vary=function(){alert(x);varx=2;a

标签: three.js typescript

本文链接地址:https://www.jiuchutong.com/biancheng/379215.html 转载请保留说明!

上一篇:Three.js源码阅读笔记(光照部分)(threejs 源码)

下一篇:Three.js源码阅读笔记(Object3D类)(three.js入门指南)

  • 固定资产怎么进行折旧处理
  • 生育津贴到公司账上怎么发给员工
  • 长期待摊费用摊销会计分录
  • 小规模纳税人季度不超45万免增值税
  • 计提社保贷方科目是什么
  • 以前年度损益调整借贷方向
  • 桐木板芯销售
  • 一次性筷子的消费税
  • 去年多计提了费用今年怎么办
  • 无形资产土地需要折旧吗
  • 费用科目如何结转
  • 免税和应税无法划分
  • 财务负责人和办税人员哪个责任大
  • 企业应交增值税的计算公式
  • 应交税金的明细科目
  • 购买加油卡能否开发票
  • 职工养老金怎么交费
  • 机关党建经费提取比例
  • 企业银行存款转定期分录怎样操作
  • i5 8500装win10
  • 穿越火线封号查询官网
  • 泡脚有什么好处和作用
  • 理财收益的增值怎么算
  • 预提费用新会计准则叫什么科目
  • 企业合并案例
  • 电子商务公司的简介
  • 静默安装命令
  • 电脑legacy是什么意思
  • php时间戳相减
  • 特许权使用费属于销售收入吗
  • vue 实战
  • 公司支付员工生育津贴怎么做账
  • php和mysql的联合使用
  • 金蝶利息收入结转怎么弄
  • css设置3d
  • vscode的常用插件
  • extrim命令详解
  • mzip命令 控制磁盘驱动器
  • 厂区租赁 法律规定
  • 财政补助结转和财政补助结余
  • 判断文件是否存在,存在则删除
  • 保单的增值税发票能抵税吗
  • 固定资产货币化,货币资产保险化,保险资产信托化
  • 企业应付账款科目的借方余额反映的是
  • access里面也暗含了sql
  • 一步一步的简单
  • 非民营企业会计账务处理
  • 公司买手表可以抵扣增值税吗
  • 一般纳税人销售旧货
  • sql怎么搜索表
  • 个人工资税收怎么计算年收入
  • 会计凭证的做账原则
  • 公司员工机票可以抵扣多少呢
  • 补提折旧以前年度损益调整
  • 退货收到红字发票怎么办
  • 单位起诉员工赔偿算劳动争议
  • 虚开发票但是没有成本如何做账?
  • 因企业增资而产生的费用
  • 预借差旅费的借贷方
  • 带折扣的发票如何开具
  • 汇票本票支票的联系
  • 连接mysql数据出错1045
  • WIN7系统如何设置自动关机
  • linux怎么用命令
  • linux怎么安装c语言编程软件
  • 短链接生成app
  • win7弹出cmd窗口瞬间消失
  • Win10更新后浏览器不能联网怎么办
  • VS2012中C++,#include无法打开源文件
  • javascript基础编程
  • jsp手机号验证
  • 如何大小写字母转换
  • jQuery实现ToolTip元素定位显示功能示例
  • python例题讲解
  • python面向什么编程
  • 用javascript
  • 经营所得个人所得税税率表
  • 税务总局着装管理办法
  • 其他收入工会经费必须申报吗
  • 国家税务总局税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设