最新文章：
- 什么是静态服务器
- npx是什么东东，跟npm有啥关系？
- AMD宣布将在全球范围内裁员4%
- 处理Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.警告
- 什么是原子化CSS
您的位置：
富录-前端开发|web技术博客
>
Three.js >
three.js基础概念
three.js基础概念
发布时间:2018年03月17日 评论数：抢沙发阅读数： 6846
常用object对象
| 对象名 | 介绍 |
|---|---|
| plane（平面) | 作为地面的二维矩形。渲染结果是屏幕中央的一块黑色矩形 |
| Cube（方块） | 作为一个三维立方体 |
| sphere（球体） | 作为一个三维球体 |
| wireframe（线框） | 作为一个线框 |
| camera （相机） | 相机决定着你所能看到的输出结果 |
| Axes （轴） x,y,z | 辅助线，用于调试 |
| scene（场景） | 变量场景用来保存跟踪我们想要渲染的物体 |
| rendered（渲染器） | renderer对象负责计算指定角度下的浏览器中的scene（场景）的样子 |
| material（材质） | 三维物体的渲染材质 |
| stats (状态) | 在这里特指FPS帧频 |
| mesh（网格） | 三维网格 |
| Geometry（几何体） | 一般用于创建几何图形 |
2.常用方法
| 方法名 | 介绍 |
|---|---|
| reuestAnimationFrame() [HTML5api] | 用于执行renderer的动画操作 |
| setClearColorHex() | 函数告诉renderer的背景色 参数格式（十六进制颜色） |
| setSize() | 告诉函数renderer将scene渲染成多大尺寸 参数格式（int） |
| lookAt() | 告诉camera（相机）应该看向什么地方，即让相机在指定点上面聚焦 |
| stats.update() | 刷新FPS帧频 |
| THREE.fog | 为整个场景添加场景雾化效果 （color，far，near） |
注：这些方法非最重要的方法，仅仅是作者总结方便同学们阅读three.js 的入门教程
3.sence（场景）的常用方法
| 方法名 | 介绍 |
|---|---|
| add（object） | 在场景中添加对象，或者添加对象组 |
| children | 返回一个场景中所有对象的列表 ，包括相机和点光源 |
| getChildByName（name） | 创建一个对象时，可以通过name 属性为他指定一个独一无二的名字场景方法提供了这样一个可以直接根据object名字返回对象的一个方法 |
| remove（object） | 如果你在场景中引用了一个对象，那你可以通过这个方法删除他 |
| traverse（function） | children 属性返回场景中所有的子对象列表，通过一个traverse传入一个function 同样可以做到 |
| fog | 通过该属性可以设置场景的雾化效果 |
| overrideMaterial | 通过这个属性，你可以强制场景中所有物体都使用相同相同材质 |
1.网格对象和函数属性
| 属性名 | 介绍 |
|---|---|
| position（位置） | 决定该对象相对父对象的位置 一般来说父对象是sence对象 |
| rotation (旋转) | 通过这个属性可以使任何一个对象绕任何一个点旋转 |
| scale(缩放\比例) | 通过这个属性可以沿着x,y,z 缩放当前对象 |
| translateX （amount） | （X轴平移） 沿着x轴将对象平移到指定的距离 |
| translateY （amount） | （Y轴平移） 沿着y轴将对象平移到指定的距离 |
| translateZ（amount） | （Z轴平移） 沿着z轴将对象平移到指定的距离 |
| position.set (x,y,z) | 可以一次性的设置x,y,z |
本文作者：DGF
文章标题：
three.js基础概念
本文地址： https://arbays.com/post/79 本文已被百度收录！
版权声明：若无注明，本文皆为“富录-前端开发|web技术博客”原创，转载请保留文章出处。
本文地址： https://arbays.com/post/79 本文已被百度收录！
版权声明：若无注明，本文皆为“富录-前端开发|web技术博客”原创，转载请保留文章出处。
相关文章