乐趣区

关于html5:threejsWebGL引擎用于数据3D可视化展示

jiezi

` 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
退出移动版