网站首页 极客学院 视频课堂 极客论坛 下载专区 行业新闻 欢迎光临极客研究院,今天是2019-08-24 星期六
会员面板
帐号:
密码:
验证码:
极客学院
教程搜索
输入要搜索的内容:

下载专区
精品教程
   网站首页 > WEB开发 > HTML5教程 > WEBGL入门实例

WEBGL入门实例

在开始使用Three.js前,请确保你已经引用了three.js到你的HTML文件中:


<!DOCTYPE html>


<head>


   <title>我的第一个WebGL程序</title>


   <style>canvas { width: 100%; height: 100% }</style>


</head>


<body>


   <script src="../libs/three.js"></script>


   <script>


       // 我们的代码从这里开始


   </script>


</body>


</html>


设置场景


在Three.js的3D世界,我们至少需要创建以下对象:


1. 一个场景(scene)


2. 一个渲染器(renderer)


3. 一个摄像机(camera)


像这样:


//创建场景


var scene = new THREE.Scene();


//创建摄像机


var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);


//创建渲染器


var renderer = new THREE.WebGLRenderer();


//设置渲染器的大小为窗口大小


renderer.setSize(window.innerWidth, window.innerHeight);


//添加 renderer 元素到文档中


document.body.appendChild(renderer.domElement);


首先我们创建了场景、摄像机和渲染器。在Three.js中有几个不同的摄像机,这里我们不展开描述。现在,我们使用透视相机(PerspectiveCamera)。第一个参数是摄像机的垂直可视角度。


第二个参数是窗口的宽高比。值越大,摄像机也就相对越宽。


后两个参数分别是近平面和远平面的距离。如果你的对象远于远平面或者比近平面更近将不会被渲染。通常你不需要考虑这两个参数,除非你为了在游戏中获得更好的性能。


接着创建了渲染器,并设置了渲染的区域尺寸为窗口大小。


最后,我们将renderer元素添加到HTML文档中,也就是<canvas>元素。


制作模型


我们有了场景摄像机和渲染器,但事实上还没有真正的绘制。Three.js内置了一些基本的模型,比如:圆形、平面、立方体和圆环等。


现在我们添加一个立方体到场景中:


var geometry = new THREE.CubeGeometry(1,1,1);


var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );


var cube = new THREE.Mesh( geometry, material );


scene.add( cube );


camera.position.z = 5;


为了创建立方体,我们需要用到CubeGeometry。CubeGeometry有3个主要参数:宽、高和深度。


接着我们给这个几何体添加材质。Three.js有很多材质,但目前我们只需要MeshBasicMaterial。所有的材质都接收一个对象作为参数参入,在这个示例中,我们只传入一个color颜色参数,0x00ff00是绿色的hex码。


第三件事是将几何体和材质组合为一个网格模型(Mesh),最后插入到我们之前创建的场景中,默认情况下物体的位置是原点(0,0,0),这会导致摄像机和物体在一个点,为了看到物体,我们将摄像机移出来一点。


渲染场景


终于到了最后一步 —— 使用渲染器渲染整个场景。


Var render = function () {


requestAnimationFrame(render);


renderer.render(scene, camera);


}


render();


这里创建了一个循环,让渲染器以每秒60次的速度渲染场景。为什么是requestAnimationFrame而不是setInterval?简单的说requestAnimationFrame更加高效和智能,浏览器动态调整执行的间隔保证动画的流畅运行。


让物体动起来


如果你的代码没有写错,你应该可以看到一个绿色的盒子。


现在增加点乐趣,添加下面的代码到render函数里renderer.render的上面:


cube.rotation.x += 0.1;


cube.rotation.y += 0.1;


小盒子动起来了,很简单吧!


最终代码


<html>


<head>


   <title>我的第一个WebGL程序</title>


   <style> canvas { width: 100%; height: 100% } </style>


</head>


<body>


   <script src="three.min.js"></script>


   <script>


       var scene = new THREE.Scene();


       var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);


       var renderer = new THREE.WebGLRenderer();


       renderer.setSize(window.innerWidth, window.innerHeight);


       document.body.appendChild(renderer.domElement);


       var geometry = new THREE.CubeGeometry(1, 1, 1);


       var material = new THREE.MeshBasicMaterial({color: 0x00ff00});


       var cube = new THREE.Mesh(geometry, material);


       scene.add(cube);


       camera.position.z = 5;


       var render = function() {


           requestAnimationFrame(render);


           cube.rotation.x += 0.1;


           cube.rotation.y += 0.1;


           renderer.render(scene, camera);


       };


       render();


   </script>


</body>


</html>

  相关文章
本文标题:WEBGL入门实例
对本文有疑问?现在就进入论坛提问>>
 
粤ICP备18090445号