Three.js入门篇之1 - WebGL on HTML

时间:2021-11-02 03:27:44

一. 何为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/  ,下图是第一个例子效果:

        Three.js入门篇之1 - WebGL on HTML


二. 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 入门!