iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 34
1
Modern Web

30天學習30套前端技術(2018年)系列 第 34

[十分鐘學習] three.js - 動畫繪製評價最高的神器

example1

易於使用且輕量級3D函式庫,提供canvas、svg、CSS3D和WebGL渲染器

GitHub Star: 38,000
Javascripting Overall: 97%
瀏覽器: ChromeFirefoxIE11+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

    <!-- three.js v89 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
    
  • npm

     $ npm install three
    

《範例》

  • 正方體旋轉

    <script>
    	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; // 三維(x,y,z)位置,z軸為1
    
    		scene = new THREE.Scene(); // 建立新場景
    
    		geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); // 建立四邊形
    		material = new THREE.MeshNormalMaterial(); // 建立RGB的材質
    
    		mesh = new THREE.Mesh( geometry, material ); // 建立模型
    		scene.add( mesh ); // 將模型匯入至產景
    
    		renderer = new THREE.WebGLRenderer( { antialias: false } ); // 使用渲染器,並消除鋸齒
    		renderer.setSize( window.innerWidth, window.innerHeight ); // 設定渲染器長寬
    		document.body.appendChild( renderer.domElement ); // 將渲染器匯入至網頁
    
    	}
    
    	function animate() {
    
    		requestAnimationFrame( animate ); // 啟動動畫(60FPS) 
    
    		mesh.rotation.x += 0.01; // 模型X軸旋轉幅度
    		mesh.rotation.y += 0.02; // 模型Y軸旋轉幅度
    
    		renderer.render( scene, camera ); // 將場景匯入至渲染器中
    
    	}
    </script>
    

    函式列表

    函式 描述
    PerspectiveCamera( 【可見範圍角度】, 【可見範圍長寬比】, 【相對深度切面近距離】, 【相對深度切面近遠距立】 ) 建立相機
    BoxGeometry( 【寬度】, 【高度】, 【深度】 ) 建立模型
    Mesh( 【模型】, 【材質】 ) 建立物件

《延伸》

  1. three.js - Javascript 3D library
  2. mrdoob/three.js: JavaScript 3D library.

上一篇
[十分鐘學習] Slidebars - 簡易導入側欄選單
下一篇
[十分鐘學習] Videos.js - HTML5影片播放器
系列文
30天學習30套前端技術(2018年)61

1 則留言

0
QQBoxy
iT邦新手 5 級 ‧ 2018-01-23 10:07:33

除了Three.js以外,Babylon.js也是一個不錯的選擇唷。
看看效果:
https://www.babylonjs.com/demos/pbrglossy/

mfhsueh iT邦新手 4 級‧ 2018-01-23 10:13:13 檢舉

Awesome!

我要留言

立即登入留言