【JS】three.js-WebGL引擎,用于数据3D可视化展示。

` 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" title="three.js">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

以上是 【JS】three.js-WebGL引擎,用于数据3D可视化展示。 的全部内容, 来源链接: utcz.com/a/99398.html

回到顶部