Threejs入门

标签: 三维 分类: Javascript 创建时间:2020-04-23 08:06:27 更新时间:2025-09-26 04:44:39

这篇文章开始,进入三维开发的学习中。三维开发,其实在很多地方都有其现实存在的意义,本着多学一门技能,也不会被压死的理念,着手进行三维技术的学习。开发threejs一般有如下几步:

  • 创建场景
  • 创建相机
  • 创建渲染器
  • 添加物体到场景
  • 渲染场景

参考文章:
1.Three.js 现学现卖
2.Three.js 中文教程
3.Three.js学习总结-入门
4.Treejs的入门教程
5.坐标系统

1.场景

场景,就是一个舞台,所有的物体,内容和动画,都是在一个舞台上进行的展示的。

参考文章:
1.创建一个场景(Creating a scene)
2.Three.js开发指南-Scene

2.渲染器

渲染器,我觉得应该是一个画笔,将不同的物体绘制到舞台上。

3.照相机

照相机,就类似于我们的眼睛,我们的眼睛在哪里,就可以看到物体不同的方面。

4.几何体

几何体,就是简单的一个个物体,球、正方体、圆柱体等等。

5.纹理及纹理坐标

纹理,其实就是一张皮,附着在物体表面的颜色或者是一张图片。

参考文章:
1.OpenGL入门 (八) —— 纹理坐标解析
2.入门 » 纹理

6.Mesh

有了几何体,有了附着在几何体上面的图片,最后就是把两者结合起来,使用Mesh进行两者的集合,这样就将光秃秃的几何体和有颜色的纹理绑定到一起了。

7.UV映射

UV映射(UV Mapping)和纹理映射(Texture Mapping)通常一起讲。贴图是通过将图像应用到对象的一个或多个面,来为3D对象添加细节的一种方法。”UV”这里是指u,v纹理贴图坐标的简称(它和空间模型的X, Y, Z轴是类似的)。 它定义了图片上每个点的位置的信息。这些点与3D模型是相互联系的, 以决定表面纹理贴图的位置。 UV就是将图像上每一个点精确对应到模型物体的表面. 在点与点之间的间隙位置由软件进行图像光滑插值处理。这就是所谓的UV贴图。 UV贴图是用于轻松包装纹理的3D模型表面的平面表示。创建UV贴图的过程称为UV展开。U和V指的是2D空间的水平轴和垂直轴,因为X,Y和Z已在3D空间中使用。

我理解的UV映射,就是将一张平面图,贴到一个三维的物体上去,这就产生了一个平面二维坐标,到三维坐标的一个映射关系。例子就是,将一张

参考文章:
1.Three.js进阶篇之9 - 纹理映射和UV映射
2.什么是UV贴图和展开?
3.网格UV展开
4.UV Mapping(UV贴图) (这篇文章可以参考下)
5.UV纹理与贴图

8.智慧城市

参考文章:
1. 从零开始搭建开源智慧城市项目(一)初始化场景 使用threejs开发的智慧城市项目,一些基本的技术和方法说明。
2.ThreeJS集成地图瓦片
3.Three.js - 绘制中国地图
4.three-geo加载地形的实际应用
5.threejs-实战打造科技风智慧城市效果-持续更新中
6.Three.js项目 智慧城市(一)

9.碰撞

参考文章:
1.Three.js 进阶之旅:物理效果-碰撞和声音 对于 3D 物理库,主要有以下三个:Ammo.js、Cannon.js 和 Oimo.js 。对于 2D 物理库,有很多,下面列出了比较流行的几个:Matter.js、P2.js、Planck.js、Box2D.js

小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件(ititchuan@gmail.com)通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
ititchuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。