Three.js

不是教程，而是一次简单的分享，主旨是抛砖引玉，让有兴趣的同学可以在最短的时间里了解threejs和获取到一些教程，而非掌握，因为它真的很难。

概述

Three.js 是基于 WebGL 技术，用于浏览器中开发 3D 交互场景的 JS 引擎。

默认 WebGL 只支持简单的 点、线、三角，Three.js 就是在此 WebGL 基础之上，封装出强大且使用起来简单的 JS 3D 类库。

目前主流现代浏览器都已支持 WebGL，也意味着支持 Three.js。

Three.js优缺点

• Three.js 擅长 WebGL 场景渲染，作为 JS 类库特别原生、灵活、自由度高
• Three.js 不擅长物理碰撞，因此不适合开发 3D 游戏

  Three.js应用场景

1. 3D数据可视化场景
2. 产品720度在线预览
3. H5/微信小游戏
4. 科技教学3D模型展示
5. 网页VR、网页VR看房
6. 等等

   Three.js相关资料官网

• Three.js官网：https://threejs.org/
• threejs.org 官方教程：https://threejsfundamentals.org/threejs/lessons/zh_cn/
• Three.js Github：https://github.com/mrdoob/three.js

  Three.js核心概念

  场景(scene)

  场景是所有物体的容器。

  相机(camera)

  决定场景中哪些角度的内容会显示出来。
  PerspectiveCamera：透视相机
  OrthographicCamera ：正交相机

  渲染器(renderer)

  将 相机 中的内容渲染到浏览器页面中。

  几何体(Geometry)

  顾名思义，就是几何体，例如 球体、立方体、平面、以及自定义的几何体(汽车、动物、房子、数目等)。
  在 Three.js 中，一个几何体的来源有 3 个：

1. Three.js 中内置的一些基本几何体
2. 自己创建自定义的几何体
3. 通过文件加载进来的几何体

   材质(Material)

   几何体的表面属性，包括颜色、光亮程度。

   光亮程度是指物体表面反射光的能力值。Three.js 内置了不同的材质，不同材质对应不同的光亮程度。

内置材质 MeshBasicMaterial 是一种不可以反射光的材质，请注意这里说的不可以反射光并不是指该物体向黑洞那样连光都能吸收，而是指无论什么光源以何种角度照射到该物体上，该物体都不显示 “光亮”，而仅仅以材质本身的颜色或纹理来显示。

纹理(Texture)

纹理可以简单理解为一种图像或一张图片，用来包裹到几何体表面上。
纹理来源可以是：

1. 通过文件加载进来
2. 在画布上生成
3. 由另外一个场景渲染出

   网格(Mesh)

   一种特定的 几何体和材质 绘制出的一个特定的几何体系。

   网格包含的内容为：几何体、几何体的材质、几何体的自身网格坐标体系

同一个材质和几何体可以被多个网格对象使用。

一个场景可以同时添加多个网格。

光源(Light)

指不同种类的光。

1. 环境光（AmbientLight）
2. 半球光（HemisphereLight）
3. 方向光（DirectionalLight）
4. 点光源（PointLight）
5. 聚光灯（SpotLight）
6. 矩形区域光（RectAreaLight）

   视椎(frustum)

   透视镜头(PerspectiveCamera)所创造出的一种视觉可见空间。
   

   坐标轴

   Three.js默认是右手坐标系。
   

   教程

   最好的教程往往就是官方文档和源码，并且有非常多的例子，经常翻阅官方文档会有意想不到的收获。

• 现代计算机图形学入门-闫令琪：想要学好Threejs必须要了解图形学相关的知识，不然会一头雾水，中后期必备，前期入门并不是必须的，当然你也可以先学习这门教程，这都看你自己的安排。
• 官方教程：官方教程也写的非常好，但是有些内容并没有中文翻译，大家可以下载一个彩云小译的chrome插件，翻译英文，英文好的自行忽略。
• Three.Js Journey：是一个法国人出的教程，质量硬核，很适合作为初学者学习，强烈推荐！缺点就是全程法国口音的英文，且字幕是机翻，不过也可以忽略。
• 跃焱邵隼 ：国内的一个程序员整理的教程，还可以，配合着源码看也不错。
• 掘金上一个大哥的开源库，有很多非常有趣的demo
  • github
  • 掘金

其他教程就得各位同学在学习的过程中自行探索发现了，这里不过多展开。
本篇文章主旨就是分享。
以上。
谢谢。