"I love WebGL"

2022-05-05 16:38:18

郭隆邦_技术博客 首页 Three.js中文文档 3D案例 Three.js教程 WebGL教程 工具资源 Threejs中文文档 Three.js电子书 WebGL电子书 从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技术越来越流行的发展进程中突飞猛进。 WebGL绘制一个点认识HTML文档Canvas画布Javascript脚本语言WebGL着色器语言GLSL ESWebGL APIWebGL绘制一个矩形WebGL坐标系WebGL三角形平移变换WebGL绘制立方体WebGL索引法绘制几何体WebGL着色器语言varying变量和颜色插值WebGL绘制立方体立方体(每个面不同色)WebGL光照渲染立方体光照模型立方体添加平行光顶点法向量矩阵变换立方体添加点光源WebGL实现立方体旋转动画WebGL绘制两个立方体WebGL纹理贴图纹理贴图WebGL片元着色器代码实现彩色图转灰度图WebGL立方体添加局部贴图(切换着色器程序)WebGL渲染管线片元测试和帧缓冲区WebGL透明度与α融合深度测试与α融合WebGL离屏渲染WebGL总结WebGL图形系统WebGL API文档获取WebGL上下文类型数组和顶点缓冲区配置编译着色器程序给uniform和attribute变量传入数据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模型添加标签 自定义着色器程序 可视化操作三维模型 选择三维模型对象(射线拾取) 世界坐标转化为屏幕坐标 加载三维模型文件 投影相机 光照模型 纹理贴图 材质 三维模型阵列 三维模型复制、克隆 几何变换(旋转、缩放、平移) 本站版权所有，本站任何内容未经允许不得转载备案号：豫ICP备16004767号 QQ群：187740169 (WebGL-Three.js教程) 邮箱：[email protected]