`从2011年WebGL1.0标准发布到现在，从2017年到现在已经快6年了，现在大部分浏览器的最新版本都已经可以支持WebGL1.0标准了，包括手机浏览器。Pindao喜欢在他的个人网站上分析团队用SolidWorks软件设计的机械零件。工程师们可以使用手机浏览器随时随地访问网站，打开部件相互交流，对外交流和展示更加方便。拼道认为在各个领域都有使用WebGL的项目。例如，国内大型电商平台推广产品在线3D预览展示方案。3D效果的展示，远胜于画面体验；游戏行业希望将游戏部署到线上。需要下载的游戏更有利于推广；房地产、酒店、商场希望通过网页在线展示室内效果，CAD开发公司希望利用WebGL技术实现在线3D建模。除了特定领域的工程应用，还有很多计算机图形学的学生希望通过网页在线展示自己的作品和算法。与客户使用OpenGL开发的作品相比，使用WebGL技术实现的作品只需要发送给他人即可。只有一个链接。事实上，越来越多的软件应用已经搬到了网络上，浏览器的作用不仅仅是展示网络内容，而是作为一个平台。不管学习WebGL还是学习OpenGL，实际上都是在学习计算机图形学及其扩展应用。WebGL对应浏览器平台，OpenGL对应操作系统平台。与浏览器对WebGL的支持相比，WebGL缺少的是普及的问题，人才的需求远大于人才的供给。俗话说，隔行如隔山。目前WebGL的普及速度很慢。除了图形的难度，还有这方面的问题。WebGL的前三个字母表示互联网平台和浏览器页面，后两个字母表示计算机图形。懂前端的工程师往往不懂图形，懂图形的工程师往往不懂网站开发和网页设计。关于图形的学习资料通常是用C或C++语言编写的，并基于操作系统平台。由于学员背景和行业分布多样，本系列WebGL教程尽量照顾不同基础和领域的人群。针对前端工程师，教程会系统讲解图形知识。讲解相关的网页设计知识，只要你有一定的编程能力。在实际的WebGL项目中，除了图形本身，还需要学习交互界面设计。界面设计可以通过HTML和CSS完成，图形部分可以通过WebGLAPI、着色器语言GLSLES和Javascript语言完成。发展。如果你熟练使用HTML、CSS和Javascript语言，你只需要学习WebGLAPI和GLSLES语言。着色器语言GLSLES类似于C语言，运行在GPU上。对于大多数学过C语言的人来说，这并不容易。灾难。对于有OpenGL基础的人来说，WebGLAPI只是OpenGLAPI子集的一个子集，更多需要学习的是如何过渡到互联网生态环境。在web上设计应用程序的GUI比操作系统平台方便多了，直接使用超文本语言HTML就可以了。`WebGL完美解决了现有Web交互3D动画的两个问题：一是通过HTML脚本本身实现Web交互3D动画的制作，无需任何浏览器插件支持；其次，它利用底层的图形硬件加速功能进行图形渲染，通过统一、标准、跨平台的OpenGL接口实现。WebGL（全文Web图形库）是一种3D绘图协议。该绘图技术标准允许结合使用JavaScript和OpenGLES2.0。通过添加一个OpenGLES2.0的JavaScript绑定，WebGL可以为HTML5Canvas加速渲染提供硬件3D，让网页开发者可以使用系统显卡更流畅地在浏览器中显示3D场景和模型，创建复杂的导航和数据可视化.显然，WebGL技术标准省去了开发专门的网页渲染插件的麻烦，可以用来制作复杂3D结构的网站页面，甚至设计3D网页游戏等等。Three.js是一个开源的主流3D绘图JS引擎（Three的意思是3D），原作者Mr.Doob，项目地址：https://github.com/mrdoob/three.js/。我们知道WebGL是网页的3D绘图标准。正如jQuery简化了HTMLDOM操作一样，Three.js可以简化WebGL编程。WebGL是HTML5技术生态链中最激动人心的标准之一。它将Web带入3D时代。如果您对WebGL没有概念，请阅读本站相关的入门教程。[](#javascript-3d-library)JavaScript3D库该项目的目的是创建一个易于使用、轻量级、带有默认WebGL渲染器的3D库。该库还在示例中提供了Canvas2D、SVG和CSS3D渲染器。示例—文档—Wiki—迁移—问题—论坛—Slack—Discord[](#usage)用法这段代码创建了一个场景、一个相机和一个几何立方体，并将立方体添加到场景中。然后它为场景和相机创建一个WebGL渲染器，并将该视口添加到document.body元素。最后，它为camera.import*asTHREEfrom'./js/three.module.js';letcamera,scene,renderer;letgeometry,material,mesh;init();functioninit动画场景中的立方体(){camera=newTHREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.01,10);相机.position.z=1;scene=newTHREE.Scene();geometry=newTHREE.BoxGeometry(0.2,0.2,0.2);材质=新的THREE.MeshNormalMate里亚尔（）；mesh=newTHREE.Mesh(geometry,material);scene.add(网格);renderer=newTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.setAnimationLoop(动画);document.body.appendChild(renderer.domElement);}functionanimation(time){mesh.rotation.x=time/2000;mesh.rotation.y=时间/1000;renderer.render(scene,camera);}如果一切顺利，您应该会看到这个。[](#cloning-this-repository)克隆此存储库克隆存储库及其所有历史记录会导致下载约2GB。如果您不需要整个历史记录，您可以使用深度参数来显着减少下载大小。gitclone--depth=1https://github.com/mrdoob/three.js.git[](#change-log)更改日志发布[](#%E7%8E%AF%E5%A2%83%E6%94%AF%E6%8C%81)环境支持需要npminstallhttp-server-g在根目录cmd命令行执行http-server（本地启动一个node服务，用于加载图片/文件/json)复制命令行中类似http://10.10.100.20:8080的地址，点击在本地浏览器查看对应的demo（或者直接在浏览器在地址栏输入路径查看)[](#%E5%85%B6%E4%BB%96%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99)其他参考1《Three.js 入门指南》的示例代码http://zhangwenli.com/ThreeExample.js2http://www.yanhuangxueyuan.com/Three.js3http://www.yanhuangxueyuan.com4https://github.com/takahirox/takahirox.github.io（超过25,000个文件）5https://threejs.org/6https://www.bilibili.com/video/av909518/7https://www.blender。org/8https://www.blendercn.org/9https://github.com/mrdoob/three.js10http://www.yanhuangxueyuan.com/work.html11http://www.yanhuangxueyuan.com/WebGL_course/preface.html12https://blog.csdn.net/u012468376/article/details/7335099813https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20ECharts%20GL%20%E5%AE%9E%E7%8E%B0%E5%9F%BA%E7%A1%80%E7%9A%84%E4%B8%89%E7%BB%B4%E5%8F%AF%E8%A7%86%E5%8C%9614https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/15https://www.babylonjs.com/16https://www.babylonjs.com/16github.com/pixijs/pixi.js
