WebGL初探

最新推荐文章于 2024-08-22 21:42:07 发布

疯狂木头人

最新推荐文章于 2024-08-22 21:42:07 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： function 浏览器 chrome javascript microsoft 文本编辑

本文链接：https://blog.youkuaiyun.com/mushubingfeng/article/details/7562426

一、什么是WebGL?

“WebGL -OpenGL ES 2.0 for the Web”这是WebGL的官网首页上最明显的标题，可以说是对WebGL简明扼要的概括，那么是什么意思呢？就是网页版的OpenGL ES 2.0。可能有人会问什么是OpenGL ES 2.0，这里就暂不讨论。

对于WebGL，官方给出的进一步解释是：一个基于OpenGL ES 2.0的跨平台，免税的用于开发低级别的3D图形的API Web标准，它通过HTML5的Cavnas元素作为对象模型的借口展示出来。

二、WebGL能做什么？

WebGL使得浏览器拥有不用插件就可以展示3D特性的权利。

三、那些浏览器支持WebGL?

苹果的Safari，谷歌的Chrome，FireFox（火狐）,Opera等主要浏览器（IE反对采用WebGL，因为一直以来OpenGL 和开发InternetExplore 的Microsoft公司独自开发的三维图形API(DirectX)处于竞争者关系。）

四、如何使用WebGL？

1. 环境要求：

１．文本编辑器（什么都没有也没关系）

２．运行WebGL的浏览器（推荐：Google Chrome）

３．调试器（推荐：Google Chrome）

４．WebGL库 Three.js

2. 获取Tree.js：

登录https://github.com/mrdoob/three.js/，点击下图红框部分进行下载：

3. 使用WebGL：

解压下载好的zip文件（我的是mrdoob-three.js-r49-0-g40649e0.zip）,拷贝build里面的Tree.js到你要使用WebGL网页所在的工作目录,在html文件中通过“<script src="Three.js"></script>”语句引入Tree.js文件，然后就可以在javaScript中使用WebGL

4、WebGL试运行

在任意位置创建文件夹dirname，按照第三步将Tree.js拷贝到该文件夹中,创建文本文档，将以下代码拷贝到其中，并保存为test.html,然后点击即可在支持WebGL的浏览器中看到一个红色的长方体了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js测试</title>
<script src="Three.js"></script>
<style type="text/css">
div#canvas-frame{
  border: none;
  cursor: pointer;
  width: 600px;
  height: 600px;
  background-color: #EEEEEE;
}
</style>
<script>
  var renderer;
  function initThree(){
    width = document.getElementById('canvas-frame').clientWidth;
    height = document.getElementById('canvas-frame').clientHeight;
    renderer =new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(width, height );
    document.getElementById('canvas-frame').appendChild(renderer.domElement);
    renderer.setClearColorHex(0xFFFFFF,1.0);
  }
 
  var camera;
  function initCamera(){
    camera =new THREE.PerspectiveCamera(45, width / height ,1,10000);
    camera.position.x=100;
    camera.position.y=20;
    camera.position.z=50;
    camera.up.x=0;
    camera.up.y=0;
    camera.up.z=1;
    camera.lookAt({x:0, y:0, z:0});
  }
  var scene;
  function initScene(){   
    scene =new THREE.Scene();
  }
  var light;
  function initLight(){
    light =new THREE.DirectionalLight(0xFF0000,1.0,0);
    light.position.set(100,100,200);
    scene.add(light);
  }
  var cube;
  function initObject(){  
    cube =new THREE.Mesh(
         new THREE.CubeGeometry(50,50,50),                //设定形状
         new THREE.MeshLambertMaterial({color: 0xff0000})//设定材质
    );
    scene.add(cube);
    cube.position.set(0,0,0);
  }
  function threeStart(){		//
    initThree();
    initCamera();
    initScene();   
    initLight();
    initObject();
    renderer.clear();
    renderer.render(scene, camera);
  }
</script>
</head>
 
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

效果图如下：

五、使用Tree.js的步骤参照如下：

1. 画布的准备：

在HTML文件中直接添加Cavans元素，或者通过javaScript向HTML文件添加Cavans，如document.getElementById('canvas-frame').appendChild(renderer.domElement);

注意：最好要给Cavans元素设置id或名字

2. Three.js的初始化（initThree()）

三维空间里的物体映射到二维平面的过程被称为三维渲染。一般来说我们都把进行渲染操作的软件叫做渲染器。

上例进行下面这些处理：

(0) 声明全局变量（对象）
(1) 获取画布的大小
(2) 生成渲染器对象（属性：抗锯齿效果为设置有效）
(3) 指定渲染器的高宽（和画布框大小一致）
(4) 追加【canvas】元素
(5) 设置渲染器的清除色(clearColor)

3. 相机的准备（initCamera()）

OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在 Three.js 也能够指定透视投影和正投影两种方式的相机。

上例按照以下的步骤设置透视投影方式。

(0) 声明全局的变量（对象）
(1) 设置透视投影的相机
(2) 设置相机的位置坐标
(3) 设置相机的上为「z」轴方向
(4) 设置视野的中心坐标

4. 场景的准备（initScene()）

场景就是一个三维空间。用 [Scene] 类声明一个叫 [scene] 的对象。

5. 光源的准备（initLight()）

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。作为对应，Three.js中可以设置点光源(Point Light)、聚光灯(Spot Light)、平行光源(Direction Light)和环境光(Ambient Light)。在一个场景中可以设置多个光源。基本上，都是环境光和其他几种光源进行组合。如果不设置环境光，那么光线照射不到的面会变得过于黑暗。

上例中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。
(0) 声明全局变量(对象)
(1) 设置平行光源
(2) 设置光源向量
(3) 追加光源到场景

6. 物体的装备（initObject()）

按照已设定的相机来观察场景中的物体的方式来进行实际绘制。

7. 执行绘制（threeStart()）

本文大力参考了一下文章：http://www.hiwebgl.com/?p=1058