<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          javascript 3d 腳本庫 - three.js的進行簡要介紹

          時間:?2017-12-04閱讀:?1262標簽:?js腳本

          1、簡單用法

          下載壓縮版的庫文件并將其包含在HTML中,或者將其作為模塊安裝并導入,或者參閱如何自己構建庫

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

          下面這段代碼創建一個場景,一個相機和一個幾何立方體,并且將立方體添加到場景中。然后它WebGL為場景和相機創建一個渲染器,并將該視口添加到document.body元素。最后,它為場景中的立方體動畫。

          var camera, scene, renderer;
          var geometry, material, mesh;
          
          init();
          animate();
          
          function init() {
          
          	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
          	camera.position.z = 1;
          
          	scene = new THREE.Scene();
          
          	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
          	material = new THREE.MeshNormalMaterial();
          
          	mesh = new THREE.Mesh( geometry, material );
          	scene.add( mesh );
          
          	renderer = new THREE.WebGLRenderer( { antialias: true } );
          	renderer.setSize( window.innerWidth, window.innerHeight );
          	document.body.appendChild( renderer.domElement );
          
          }
          
          function animate() {
          
          	requestAnimationFrame( animate );
          
          	mesh.rotation.x += 0.01;
          	mesh.rotation.y += 0.02;
          
          	renderer.render( scene, camera );
          
          }
          

          如果一切正常和順利,你應該看到這個代碼案例效果


          2、創建一個新的場景案例

          本文的目標是對three.js進行簡要介紹。我們將從設置一個(案例)場景開始,使用一個旋轉的立方體。在頁面底部提供一個工作示例,以防您遇到困難,需要幫助。

          在我們開始之前

          在你使用 three.js 之前。你需要一個地方來展示它。將下列HTML保存到您的計算機上的一個文件,以及復制 three.js在js/目錄中,打開你的瀏覽器。

          <!DOCTYPE html>
          <html>
          	<head>
          		<meta charset=utf-8>
          		<title>My first three.js app</title>
          		<style>
          			body { margin: 0; }
          			canvas { width: 100%; height: 100% }
          		</style>
          	</head>
          	<body>
          		<script src="js/three.js"></script>
          		<script>
          			// Our Javascript will go here.
          		</script>
          	</body>
          </html>
          

          就這樣。下面的所有代碼放進的<script>標簽。

          創建場景

          為了能夠用three.js顯示任何東西,我們需要三樣東西:scene, camera 和 renderer,以便我們可以用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 );
          document.body.appendChild( renderer.domElement );
          

          讓我們花點時間來解釋這里發生了什么。現在我們已經建立了場景,我們的相機和渲染器。

          在three.js有幾個不同的相機。現在,讓我們使用PerspectiveCamera。

          第一個屬性是視野。FOV是在任何給定時刻在顯示器上看到的場景的范圍。該值以度為單位。

          第二個是寬高比。您幾乎總是希望使用元素的寬度除以高度,否則將獲得與在寬屏幕電視機上播放老電影時相同的結果 - 圖像看起來很凹陷。

          接下來的兩個屬性是近端和遠端剪切平面。這也就意味著,是對象遠離相機比的數值遠或近于附近將不會被渲染。您現在不必擔心這一點,但是您可能希望在應用中使用其他值來獲得更好的性能。

          接下來是渲染器。這是魔術發生的地方。除了我們在這里使用的WebGLRenderer之外,three.js還帶有一些其他的功能,通常用于舊版瀏覽器的用戶或者因為某些原因沒有WebGL支持的用戶。

          除了創建渲染器實例外,我們還需要設置我們希望渲染我們的應用程序的大小。使用我們想要用我們的應用程序填充的區域的寬度和高度是一個好主意 - 在這種情況下,瀏覽器窗口的寬度和高度。對于性能密集型應用程序,還可以給setSize設置較小的值,如window.innerWidth / 2和window.innerHeight / 2,這將使應用程序呈現一半尺寸。

          如果你想保持你的應用程序的大小,但是以較低的分辨率渲染它,你可以通過以false作為updateStyle(第三個參數)來調用setSize來實現。例如,setSize(window.innerWidth / 2,window.innerHeight / 2,false)將以半分辨率呈現您的應用程序,因為您的<canvas>具有100%的寬度和高度。

          最后但并非最不重要的是,我們將renderer元素添加到我們的HTML文檔中。這是渲染器用來向我們顯示場景的<canvas>元素。

          “這很好,但是你答應的那個立方體在哪里?” 我們現在添加它。

          var geometry = new THREE.BoxGeometry( 1, 1, 1 );
          var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
          var cube = new THREE.Mesh( geometry, material );
          scene.add( cube );
          
          camera.position.z = 5;
          

          要創建一個立方體,我們需要一個BoxGeometry。這是包含多維數據集的所有點(頂點)和填充(面)的對象。我們將來會更多地探討這一點。
          除了幾何外,我們還需要一種材料來為它著色。Three.js帶有幾種材料,但現在我們將堅持使用MeshBasicMaterial。所有的材料都要考慮將要應用于它們的屬性。為了保持簡單,我們只提供0x00ff00的顏色屬性,它是綠色的。這與CSS或Photoshop(十六進制顏色)中的顏色工作方式相同。
          我們需要的第三件事是一個Mesh。網格是一個對象,它需要一個幾何體,并將一個材質應用到它,然后我們可以將其插入到我們的場景中,并自由移動。
          默認情況下,當我們調用scene.add()時,我們添加的東西將被添加到坐標(0,0,0)。這將導致相機和立方體在彼此內部。為了避免這種情況,我們只需將攝像頭移出一點。

          渲染場景

          如果您將上面的代碼復制到我們之前創建的HTML文件中,您將無法看到任何內容。這是因為我們實際上并沒有渲染任何東西。為此,我們需要所謂的渲染或動畫循環。

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

          這將創建一個循環,使渲染器每秒繪制場景60次。如果你是新手,在瀏覽器中編寫游戲,你可能會說“為什么我們不創建一個setInterval?” 事情是 - 我們可以,但requestAnimationFrame有很多優點。也許最重要的是,當用戶導航到另一個瀏覽器選項卡時,它會暫停,因此不會浪費其寶貴的處理能力和電池壽命。

          動畫立方體

          如果您在開始之前將所有代碼插入到您創建的文件中,則應該看到一個綠色的框。讓我們通過旋轉它來讓它更有趣。
          在您的動畫函數中,在renderer.render調用上方添加以下內容:

          cube.rotation.x += 0.1;
          cube.rotation.y += 0.1;
          

          這將每幀運行(每秒60次),并給立方體一個不錯的旋轉動畫。基本上,任何你想移動或更改,而應用程序正在運行必須通過animate循環。你當然可以從那里調用其他函數,這樣你就不會得到一個有數百行的動畫函數。

          結果

          恭喜!你現在已經完成了你的第一個three.js應用程序。這很簡單,你必須從某個地方開始。
          完整的代碼如下。玩弄它,以更好地了解它是如何工作的。

          <html>
             <head>
               <title>My first three.js app</title>
          	<style>
          		body { margin: 0; }
          		canvas { width: 100%; height: 100% }
          	</style>
          	</head>
          	<body>
          	  <script src="js/three.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.BoxGeometry( 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 animate = function () {
          				requestAnimationFrame( animate );
          
          				cube.rotation.x += 0.1;
          				cube.rotation.y += 0.1;
          
          				renderer.render(scene, camera);
          			};
          
          			animate();
          		</script>
          	</body>
          </html>


          原文地址:github.com/mrdoob/three.js  

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/216

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网