Blender 建模
Three.js电子书
WebGL电子书
threejs入门
    从2015年第一次接触WebGL,我就相信会有越来越多的3D应用云化。 WebGL的出现为Web端实现3D交互提供了技术基础,虽然不是所有的Web项目都有3D化的需求, 比如人和人建立联系的Web站点往往对3D的需求不大, 但是人与物建立链接,人需要去查看物的状态,甚至控制物的运行, 比如智能家居中的家电设备、工厂机械设备的状态显示,远程交互操作, 如果通过Web管理这些物,3D的交互方式显然要比2D的交互更为直观。 随着物联网的发展,人与人之间的互联时代开始逐步进入人与物、物与物的互联时代。人的数量级是十亿,对于物来说,在未来的20年,物联网设备的数量将要达到万亿级别。 而5G和物联网的发展,对于WebGL技术在前端的推广无疑是一个好消息。

     如果是为了开发运行在Web上的云3Dmax、云PhotoShop等软件,前端工程师是前端工程师,WebGL工程师是WebGL工程师,但是如果开发的Web项目,用到的计算机图形学知识并不像3dmax、ps等软件那么复杂,往往会把Web 3D技能作为前端技能之一,不能说必备,至少会是一个加分项。在未来的发展中,企业前端工程师招聘中,了解或熟悉WebGL的类似要求会越来越多。无论你现在的项目用到WebGL技术, 还是为了未来的发展进行知识储备,都有必要学习原生WebGL和传播最为广泛的WebGL 3D引擎Three.js。 我相信所有学习前端的程序员,都有过想通过HTML/CSS实现一个酷炫效果的冲动, 其实你完全可以把这种实现酷炫效果的想法,转化成为你学习Web3D技术的动力。 最后祝愿大家的Web3D技术在WebGL技术越来越流行的发展进程中突飞猛进。

  • Three.js文章
  • 柏林噪声perlin
  • Three.js剖切面
  • Three.js 大数据可视化
  • 模型压缩、谷歌工具draco
  • Three.js 小游戏
  • Three.js 三角剖分
  • ImprovedNoise生成山脉地形数据
  • Three.js射线碰撞检测
  • threejs与tween.js
  • 沿着几何体法线方向平移
  • 保持模型相对曲面表面姿态
  • Three.js背景颜色
  • 图片作为Three.js背景
  • Three.js背景完全透明(模型悬浮在网页上)
  • Three.js渲染视口.setViewport()
  • Three.js画布上局部渲染(渲染器剪裁setScissor)
  • 两个相机信息同步
  • Three.js帧缓冲区(.render()两次渲染结果叠加)
  • Three.js材质深度测试depthTest
  • Three.js 融合 .blending
  • Three.js光柱效果(两个矩形交叉)
  • 渲染性能优化
  • Three.js模型加载速度(模型太大)
  • Three.js加载进度条
  • Three.js更新
  • npm nodejs three.js
  • Three.js和前端结合
  • Three.js和Vuejs结合
  • Three.js模型居中
  • 模型几何体自动全屏
  • 改变网格模型旋转轴
  • 三维坐标系 AxesHelper
  • Three.js 坐标网格 GridHelper
  • 相机对象.lookAt()方法
  • 相机对象上方向属性.up
  • 相机位置属性.position
  • 模型圆周运动(绕轴旋转)
  • 圆弧轨迹线
  • 模型沿着任意轨迹线运动
  • 锯齿
  • 时钟Clock
  • Three.js控制渲染帧数
  • Threejs圆形平面CircleGeometry
  • Threejs球体SphereGeometry
  • compouser后处理 锯齿
  • Three.js模型朝向某个对象
  • Three.js透明度设置
  • Three.js物理材质玻璃效果
  • Three.js矩形平面PlaneGeometry
  • Three.js圆柱CylinderGeometry
  • Three.js删除模型
  • Three.js雾化效果
  • Three.js层级细节Lod
  • Three.js图层Layers
  • Three.js点击选中多个模型
  • Three.js边界线框EdgesGeometry
  • Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial
  • Three.js音频
  • Three.js局部区域渲染
  • Three.js窗口尺寸变化
  • Three.js光照阴影实时计算
  • canvas画布作为Three.js纹理贴图
  • 视频作为Three.js纹理贴图
  • Three.js光照贴图添加阴影
  • Three.js高光贴图
  • Three.js环境贴图
  • 数据纹理对象DataTexture
  • Three.js帧动画
  • Three.js材质side属性
  • Three.js、unity3D和UE4
  • Three.js三维模型空心吗
  • Three.js加载.GLTF格式模型
  • Three.js本地矩阵.materix和世界矩阵.matrixWorld
  • three.js原点或圆圈效果
  • Three.js骨骼动画(SkinnedMesh)
  • Three.js精灵模型Sprite
  • Three.js获得世界坐标
  • Three.js层级模型Group
  • Three.js保存导出.ply、.obj、.GLTF等格式三维模型
  • Three.js变形动画geometry.morphTargets
  • Three.js全景
  • 获取buffergeometry的顶点个数
  • three.js如何三维建模
  • Three.js模型几何体面积、体积计算
  • Three.js剪裁模型
  • OrbitControls.js相机控件
  • three.js场景过暗
  • three.js加载solidworks模型
  • 几何体Geometry
  • Three.js几何体顶点纹理坐标UV
  • Three.js材质设置金属效果
  • Three.js法线贴图.normalMap
  • Three.js获取模型顶点数据
  • 缓冲区类型几何体BufferGeometry
  • Three.js几何体顶点颜色和材质颜色区别
  • Three.js线宽.lineWidth无效
  • 纹理叠加混合(Three.js/WebGL)
  • Three.js模型隐藏或显示
  • BufferGeometry和Geometry有什么不同
  • Three.js次时代和PBR(MeshPhongMaterial和MeshStandardMaterial)
  • 自发光贴图emissiveMap
  • 向量Vector3
  • 矩阵Matrix4
  • 如何学习WebGL和Three.js
  • Three.js几何计算Line3、Triangle、Ray、Plane
  • Three.js包围盒Box3
  • Three.js投影矩阵、视图矩阵
  • 旋转矩阵、平移矩阵、缩放矩阵
  • 欧拉对象Euler和四元数Quaternion
  • UV动画
  • 纹理贴图映射、彩色图转灰度图
  • three.js-master目录结构
  • 《Three.js开发指南》
  • Three.js跨域问题
  • Three.js实现虫洞特效
  • WebGLRenderTarget(离屏渲染)
  • Three.js自定义着色器shader
  • 着色器——矩阵变换
  • Three.js模型添加标签
  • 自定义着色器程序
  • 可视化操作三维模型
  • 选择三维模型对象(射线拾取)
  • 世界坐标转化为屏幕坐标
  • 加载三维模型文件
  • 投影相机
  • 光照模型
  • 纹理贴图
  • 材质
  • 三维模型阵列
  • 三维模型复制、克隆
  • 几何变换(旋转、缩放、平移)