关于网站建设的好处,咸阳营销型网站开发,网店运营论文3000字,岳阳网站设计three.js 的渲染结构
概述
three.js 封装了场景、灯光、阴影、材质、纹理和三维算法#xff0c;不必在直接用WebGL 开发项目#xff0c;但有的时候会间接用到WebGL#xff0c;比如自定义着色器。three.js 在渲染三维场景时#xff0c;需要创建很多对象#xff0c;并将它…three.js 的渲染结构
概述
three.js 封装了场景、灯光、阴影、材质、纹理和三维算法不必在直接用WebGL 开发项目但有的时候会间接用到WebGL比如自定义着色器。three.js 在渲染三维场景时需要创建很多对象并将它们关联在一起。下图便是一个基本的three.js 渲染结构 Renderer 渲染器 Renderer 是three.js 的主要对象。当你将一个场景Scene 和一个摄像机Camera 传递到渲染器的渲染方法中渲染器便会将摄像机视椎体中的三维场景渲染成一个二维图像显示在canvas 画布中。 Scene 场景对象 场景对象是树状结构的其中包含了三维对象Object3D 和灯光对象LightObject3D 是可以被直接渲染出来的Object3D是网格对象Mesh和集合对象Group的基类场景对象可以定义场景的背景色和雾效在场景对象的树状结构中每个对象的变换信息都是相对的。比如汽车和汽车里的人人的位置是相对于汽车而言的当汽车移动了人的本地坐标位坐标位虽然不变但其视界坐标位已经变了 Camera 相机对象 按理说相机对象是在场景里的但是相机对象不在它所看的场景里这就像我们自己看不见自己的眼睛一样。因此相机对象可以独立于场景之外相机对象是可以作为其它三维对象的子对象的这样相机就会随其父对象同步变换。 Mesh 网格对象 网格对象由几何体Geometry和材质Material两部分组成Geometry 负责塑形Material 负责着色Geometry 和Materia 是可以被多个Mesh 对象复用的。比如要绘制两个一模一样的立方体那只需要实例化两个Mesh 即可Geometry 和Materia可以使用一套。 Geometry 几何体对象 几何体对象负责塑形存储了与顶点相关的数据比如顶点点位、顶点索引、uv坐标等three.js 中内置了许多基本几何体也可以自定义几何体或者从外部的模型文件里加载几何体。 Material 材质对象 材质对象负责着色绘制几何体的表面属性比如漫反射、镜面反射、光泽度、凹凸等材质对象的许多属性都可以用纹理贴图表示比如漫反射贴图、凹凸贴图等。 Texture 纹理对象 纹理对象就是一张图像。纹理图像的图像源可以是Image 图片、canvas 画布、Video 视频等。 Light 光源对象 Light 对象不像Object3D 那样依托于顶点它更多的是像Object3D 里的材质Material 那样作用于物体的样式。Light 对象可以理解为在为几何体添加了材质后再利用光效配合材质对几何体的样式进行二次加工。
