Three.js入门篇之1 - WebGL on HTML
2017-03-10 22:54
483 查看
一. 何为WebGL?
WebGL 是基于Web的 三维渲染接口,与OpenGL的不同之处在于,添加了对 JavaScript 的支持,能够为 HTML5 提供硬件加速的三维图形渲染(通过Canvas来和DOM打交道)。
WebGL 是基于 OpenGL ES 2.0 的 Javascript API。通过 HTML5 的 Canvas 来和 DOM 打交道。
讲到这里,总结一下:
1. 如果你是OpenGL程序员,学习WebGL对你来讲会是非常简单的;
你只需要熟悉 JS 语法 和WebGL对应的API就好了,大多数人两个月能够入门。
2. 如果你只是熟悉 Web,那么GL对你来讲也许是个挑战;
你要熟悉3D坐标系、World-View-Proj 成像、三维渲染流程、Shader等等,也许需要更多的时间。
幸运的是,Three.js 引擎已经为我们提供了底层的封装,你需要提前熟悉三维渲染流程,然后 run demo,这是最好的也是最快的入门流程。
Three.js 已在主流浏览器下得到支持,调试建议用 FireFox 或者 Chrome,下载地址:https://threejs.org/ ,下图是第一个例子效果:
二. Canvas
Canvas是 HTML5 新定义的标签,可以看成是一个矩形绘图容器,支持事件响应 与 JavaScript 绘图。
Canvas和GDI绘图接口比较类似,来看下如何采用Canvas绘制一个矩形:
三. 加载 Three.js引擎
通过 Three.js 进行渲染,需要调用 three.js 接口,这是一个 JavaScript库,简要使用方式如下:
熟悉基本知识和环境之后,下一节介绍 Hello World 入门!
WebGL 是基于Web的 三维渲染接口,与OpenGL的不同之处在于,添加了对 JavaScript 的支持,能够为 HTML5 提供硬件加速的三维图形渲染(通过Canvas来和DOM打交道)。
WebGL 是基于 OpenGL ES 2.0 的 Javascript API。通过 HTML5 的 Canvas 来和 DOM 打交道。
讲到这里,总结一下:
1. 如果你是OpenGL程序员,学习WebGL对你来讲会是非常简单的;
你只需要熟悉 JS 语法 和WebGL对应的API就好了,大多数人两个月能够入门。
2. 如果你只是熟悉 Web,那么GL对你来讲也许是个挑战;
你要熟悉3D坐标系、World-View-Proj 成像、三维渲染流程、Shader等等,也许需要更多的时间。
幸运的是,Three.js 引擎已经为我们提供了底层的封装,你需要提前熟悉三维渲染流程,然后 run demo,这是最好的也是最快的入门流程。
Three.js 已在主流浏览器下得到支持,调试建议用 FireFox 或者 Chrome,下载地址:https://threejs.org/ ,下图是第一个例子效果:
二. Canvas
Canvas是 HTML5 新定义的标签,可以看成是一个矩形绘图容器,支持事件响应 与 JavaScript 绘图。
Canvas和GDI绘图接口比较类似,来看下如何采用Canvas绘制一个矩形:
<html> <head/> <body> <canvas id="Canvas2D"/> <script type="text/javascript"> var canv=document.getElementById('Canvas2D'); var context=canv.getContext('2d'); context.fillStyle='#0000FF'; context.fillRect(10,10,120,80); </script> </body> </html>
三. 加载 Three.js引擎
通过 Three.js 进行渲染,需要调用 three.js 接口,这是一个 JavaScript库,简要使用方式如下:
<html> <head> <script type="text/javascript" src="three.js"></script> </head> <body> <canvas id="Canvas3D" width="352px" height="288px"/> <script type="text/javascript"> // render var renderer = new THREE.WebGLRenderer(); // scene var scene = new THREE.Scene(); // camera var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); renderer.render(scene, camera); </script> </body> </html>
熟悉基本知识和环境之后,下一节介绍 Hello World 入门!
相关文章推荐
- Three.JS-学习 The WebGL earth (1)---globe.html 分析
- webGL之three.js入门1
- WebGL库Three.js入门
- 利用HTML5构筑物理模拟环境~ WebGL库Three.js入门(1/3)
- webGL之three.js入门3--材料篇
- webGL之three.js入门2
- webGL之three.js入门4--ThreeJS Editor入门篇
- THREE.JS入门教程(3)着色器-下
- Three.js WebGL 绘制流程(一)
- [Three.js]WebGL心形效果
- THREE.JS入门教程(1)THREE.JS使用前了解
- [译] THREE.JS入门教程-1.开始使用THREE.JS
- [译] THREE.JS入门教程-2.着色器-上
- WebGL three.js
- THREE.JS入门教程(2)着色器-上
- THREE.JS入门教程(1)THREE.JS使用前了解
- [译] THREE.JS入门教程-4.创建粒子系统
- 【three.js详解之一】入门篇
- [译] THREE.JS入门教程-3.着色器-下
- Three.js WebGL 绘制流程(一)