HTML5與WebGL程式設計（2）：Three.js

CopperDong發表於2018-04-15
HTMLWeb程式設計JS

   代表作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});



相關文章