` WebGL1.0规范2011年公布以来，至明天2017年，通过了大概6年。当初少数浏览器最新版本曾经可能反对WebGL1.0规范，包含挪动端浏览器。贫道喜爱把团队用SolidWorks软件设计的机械零件在集体网站解析进去，工程师之间能够随时随地用手机浏览器拜访网站，关上整机互相交换，对外交换展现更加不便。贫道置信其它各个领域都有用到WebGL的我的项目，比方国内大型电商平台推动商品在线3D预览显示打算，3D成果的展现要比一张图片体验好得多；游戏行业心愿在线部署游戏，相比须要下载的游戏更加有利于推广；房地产、酒店、商场畛域心愿能够通过网页在线展现室内成果，CAD开发公司心愿能够利用WebGL技术实现在线进行三维建模。除了特定畛域的工程利用外，也有很多的计算机图形学学习者心愿用网页在线展现本人的作品、算法，相比客户端应用OpenGL开发的作品而言，应用WebGL技术实现的作品只须要给别人发送一个链接即可。事实上，越来越多的软件应用搬上了网页，浏览器的作用不仅仅用来展现网页内容，而是作为一个平台。不管学习WebGL还是学习OpenGL，其实都是学习计算机图形学及其延长利用，WebGL对应的是浏览器平台，OpenGL对应的是操作系统平台。

相比浏览器对WebGL的反对而言，WebGL短少的是遍及问题，人才需求远远大于人才供给。俗话说隔行如隔山，WebGL目前的遍及慢，除了图形学比拟难以外，也有这方面问题。WebGL前三个字母体现的是互联网平台、浏览器页面，后两个字母体现的是计算机图形学。理解前端的工程师，往往不理解图形学，理解图形学的往往又不理解网站开发，网页设计。对于图形学的学习材料往往都是应用C或C++语言编写，基于操作系统平台。

因为学员的根底、行业多样化散布，因而本系列WebGL教程尽量关照不同根底、不同畛域的人，对于前端工程师，教程为把图形学的常识零碎解说，对于曾经理解图形学的学习者，教程会解说相干的网页设计常识，只有有肯定的编程能力就行。在理论的WebGL我的项目中，除了图形学自身而言，也要学习交互界面设计，通过HTML和CSS能够实现界面的设计，通过WebGL API、着色器语言GLSL ES和Javascript语言，能够实现图形学局部的开发。如果你曾经纯熟应用HTML、CSS和Javascript语言，你只须要学习WebGL的API和GLSL ES语言，着色器语言GLSL ES相似C语言，运行在GPU上，对于少数学习过C语言的人来说并不难。对于有OpenGL根底的人而言，WebGL API只不过是OpenGL API子集的子集，更多学习的是如何过渡到互联网的生态环境下，在网页上设计利用的GUI要比操作系统平台不便的多，间接应用超文本语言HTML即可。 `

WebGL完满地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本自身实现Web交互式三维动画的制作，无需任何浏览器插件反对;第二，它利用底层的图形硬件加速性能进行的图形渲染，是通过对立的、规范的、跨平台的OpenGL接口实现的。

WebGL（全写Web Graphics Library）是一种3D绘图协定，这种绘图技术标准容许把JavaScript和OpenGL ES 2.0联合在一起，通过减少OpenGL ES 2.0的一个JavaScript绑定，WebGL能够为HTML5 Canvas提供硬件3D减速渲染，这样Web开发人员就能够借助零碎显卡来在浏览器里更流畅地展现3D场景和模型了，还能创立简单的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创立具备简单3D构造的网站页面，甚至能够用来设计3D网页游戏等等。

Three.js是一款开源的支流3D绘图JS引擎（名字Three就是3D的含意），原作者为Mr.Doob，我的项目地址为：https://github.com/mrdoob/three.js/。 咱们晓得WebGL是一种网页3D绘图规范，和jQuery简化了HTML DOM操作一样，Three.js能够简化WebGL编程。 WebGL是HTML5技术生态链中最为令人振奋的规范之一，把Web带入3D的时代，对WebGL没有概念的请浏览本站相干入门教程。

[](#javascript-3d-library)JavaScript 3D library

The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.

Examples — Documentation — Wiki — Migrating — Questions — Forum — Slack — Discord

[](#usage)Usage

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from './js/three.module.js';let camera, scene, renderer;let geometry, material, mesh;init();function init() { camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 ); camera.position.z = 1; scene = new THREE.Scene(); geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); material = new THREE.MeshNormalMaterial(); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animation ); document.body.appendChild( renderer.domElement );}function animation( time ) { mesh.rotation.x = time / 2000; mesh.rotation.y = time / 1000; renderer.render( scene, camera );}

If everything went well, you should see this.

[](#cloning-this-repository)Cloning this repository

Cloning the repo with all its history results in a ~2GB download. If you don't need the whole history you can use the depth parameter to significantly reduce download size.

git clone --depth=1 https://github.com/mrdoob/three.js.git

[](#change-log)Change log

Releases

[](#%E7%8E%AF%E5%A2%83%E6%94%AF%E6%8C%81)环境反对

  • 须要 npm install http-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.js
  • 2 http://www.yanhuangxueyuan.com/Three.js
  • 3 http://www.yanhuangxueyuan.com
  • 4 https://github.com/takahirox/takahirox.github.io (两万五千多个文件)
  • 5 https://threejs.org/
  • 6 https://www.bilibili.com/video/av909518/
  • 7 https://www.blender.org/
  • 8 https://www.blendercn.org/
  • 9 https://github.com/mrdoob/three.js
  • 10 http://www.yanhuangxueyuan.com/work.html
  • 11 http://www.yanhuangxueyuan.com/WebGL_course/preface.html
  • 12 https://blog.csdn.net/u012468376/article/details/73350998
  • 13 https://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%96
  • 14 https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/
  • 15 https://www.babylonjs.com/
  • 16 https://github.com/pixijs/pixi.js