Threejs入门

标签：三维分类： Javascript 创建时间：2020-04-23 08:06:27 更新时间：2024-11-12 12:53:37

这篇文章开始，进入三维开发的学习中。三维开发，其实在很多地方都有其现实存在的意义，本着多学一门技能，也不会被压死的理念，着手进行三维技术的学习。开发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

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

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.

幸福是年华的沉淀，微笑是寂寞的悲伤。