HTML5与WebGL编程（2）：Three.js

最新推荐文章于 2021-02-23 10:47:15 发布

CopperDong

最新推荐文章于 2021-02-23 10:47:15 发布

阅读量755

点赞数

分类专栏：游戏

本文链接：https://blog.csdn.net/QFire/article/details/79947129

版权

游戏专栏收录该内容

29 篇文章 3 订阅

订阅专栏

代表作http://www.ro.me/

Three.js的作者是巴塞罗那的Ricardo Cabello Miguel，或许你更熟悉他的另一个称呼Mr.doob。Three.js由Mr.doob早期在3D作品开发展示会上的作品发展而来。在现有工具都不能满足需求的情况下，Mr.doob开始开发自己的工具，这套工具一开始是用运行在Adobe Flash平台上的ActionScript编写的。几年后Google Chrome、高效的JavaScript以及HTML5一一登场，Mr.doob便将他的研究转移到了浏览器这个新的平台上。之后在2010年，Three.js诞生了。第一版本使用SVG和2D Canvas渲染。在此几个月后WebGL发布了，Three.js便开始移植到WebGL上进行后续开发。

Three.js也有些不擅长的事情，比方说，Three.js并不是一个游戏引擎。它缺乏一些游戏引擎所需的常用特性，如公告牌、头像、有限状态机以及物理引擎。Three.js也没有编写多人联机游戏所需的内置网络支持。你需要基于Three.js自行构建它，或是整合其他专用的代码库。同时Three.js也不是一个应用框架，它不具备一个框架应有的安装、卸载、事件处理和运行循环机制。它是一个为浏览器设计的、高性能、功能齐全、易用的3D渲染引擎。

源代码https://github.com/mrdoob/three.js/

本书使用的版本是revision 58(r58) https://github.com/mrdoob/three.js/archive/r58.tar.gz

支持WebGL 是r12 https://github.com/mrdoob/three.js/archive/r12.tar.gz

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Programming 3D Applications in HTML5 and WebGL — The Cube in Three.js</title>
<script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
<script src="../libs/three.js.r58/three.js"></script>
<script src="../libs/requestAnimationFrame/RequestAnimationFrame.js"></script>
<script type="text/javascript">
   var renderer = null,
   scene = null,
   camera = null,
   cube = null;

   var duration = 5000;  //ms
   var currentTime = Date.now();
   function animate() {
   	  var now = Date.now();
   	  var deltat = now - currentTime;
   	  currentTime = now;
   	  var fract = deltat / duration;
   	  var angle = Math.PI * 2 * fract;
   	  cube.rotation.y += angle;
   }

   function run() {
   	  requestAnimationFrame(function() { run(); });
   	  renderer.render( scene, camera );
   	  animate();
   }

   $(document).ready(
   	  function() {
   	  	var canvas = document.getElementById("webglcanvas");
   	  	//创建Three.js渲染器并将其添加到canvas中
   	  	renderer = new THREE.WebGLRenderer(
   	  		{ canvas: canvas, antialias: true } // 开启基于硬件的多重采样抗锯齿（）策略。用于使渲染的物体边缘平滑，避免呈现锯齿。
   	  	);
   	  	//设置视口尺寸
   	  	renderer.setSize(canvas.width, canvas.height);
   	  	// 场景是Three.js图形层级结构的最顶层。
   	  	scene = new THREE.Scene();
   	  	//为场景添加两个对象：一个相机和一个网格、相机定义了我们观察场景的位置
   	  	camera = new THREE.PerspectiveCamera( 45, canvas.width/canvas.height, 1, 4000 );//四个参数：45度的视野、宽高比、最近平面和最远平面的位置坐标值，
   	  	scene.add(camera);//这些参数会被用来构建成一个透视投影矩阵，用于将3D场景渲染 到2D绘图平面
                //网格包括一个几何形状（geometry）和一个材质（material）
   	  	// 纹理用来表示3D网格模型表面属性的位图，最简单的使用方法是定义一个表面颜色，而它们也可以通过组合来产生复杂的效果，例如凹凸或高光。
   	  	var mapUrl = "../images/webgl-logo-256.jpg";
   	  	var map = THREE.ImageUtils.loadTexture(mapUrl);
   	  	// 材质用于定义如何渲染物体的表面，MeshBasicMaterial类型的材质，是一个最简单的、不带光照效果处理的材质
   	  	var material = new THREE.MeshBasicMaterial({map: map});//通过材质构造时传入参数将纹理和材质结合起来
   	  	//创建一个2 x 2 x 2的立方体网格
   	  	var geometry = new THREE.CubeGeometry(2, 2, 2);
   	  	// 将它们整合到一个名为cube的THREE.Mesh对象上
   	  	cube = new THREE.Mesh(geometry, material);
   	  	//
   	  	cube.position.z = -8;
   	  	cube.rotation.x = Math.PI / 5;
   	  	cube.rotation.y = Math.PI / 5;
   	  	// 将网格添加到场景中
   	  	scene.add(cube);
   	  	run();
   	  }
   );
</script>
</head>
<body>
    <canvas id="webglcanvas" style="border: none;background-color:#000000" width="500" height="500"></canvas>
</body>
</html>

添加灯光效果

//
   	  	var light = new THREE.DirectionalLight( 0xffffff, 1.5);
   	  	light.position.set(0, 0, 1);
   	  	scene.add( light );
   	  	//
   	  	var mapUrl = "../images/webgl-logo-256.jpg";
   	  	var map = THREE.ImageUtils.loadTexture(mapUrl);
   	  	//
   	  	//var material = new THREE.MeshBasicMaterial({map: map});
   	  	var material = new THREE.MeshPhongMaterial({map: map});