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

一. 何为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 入门！

秒客网

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

相关文章