到目前為止，我們已經有了基礎了 three.js 知識，現在就讓我們一起來實作一些有用的效果吧！

three.js 能實作的特效非常多樣，隨便在網路上或是 codepen 上都有看不完的特效，所以我們只介紹如何活用 three.js 的 API。

1. 設定基本環境

第一件要做的事，當然就是先建置基本環境囉！

var camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 1;
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var container = document.getElementById( 'panorama' );
var geometry = new THREE.SphereGeometry( 400, 60, 40 );

geometry.scale( -0.7, 0.7, 0.7 );

先設定 camera, scene, renderer。

2. 將紋理應設至幾何圖形當中

var textureLoader = new THREE.TextureLoader().load('panorama.jpg', draw);

我們利用 textureLoader 載入紋理，這個方法第一個參數為圖片的 URL 路徑，第二個參數為成功時的 callback，第三個參數為載入時的 callback，第四個參數則為失敗時的 callback，算是幫我們處理了常用的狀況。一般的使用方式會像這樣：

var textureLoader = new THREE.TextureLoader().load('panorama.jpg', function(texture){}, function(xhr) {} /*progress*/, function(xhr){}/* fail */ );

這邊我們將紋理當作 material 映射至幾何圖形中。我們的 draw function 看起來像這樣：

function draw(texture) {
	var material = new THREE.MeshBasicMaterial( {
		map: texture
	} );
	var mesh = new THREE.Mesh( geometry, material );

	scene.add( mesh );

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( renderer.domElement );
}

為什麼我們選擇使用 Sphere 當做全景圖的幾何圖形呢？因為在實務上這個圖形會比較符合人觀看景物的方式，不過實際套用之後，我們發現還有很多參數需要調整。

demo

原本的圖被放大太多，所以畫質馬上變得很糟糕，雖然基本的效果有出來，但是圖片不美麗，對使用者體驗完全大打折扣。

我們需要改進的地方有：

1. 圖片的解析度
2. 視野的流暢度
3. 使用者可以自由拖拉視角
4. 當視窗有更變時，會自動調整圖片尺寸

明天，我們會繼續實作較為細節的內容，讓使用者的操作體驗更加流暢！

結論

這種全景圖的瀏覽方式，很適合用在景點介紹、旅遊、或是介紹某個店面的景色，雖然實作起來很簡單，但實際上要考慮的東西也不少，各位前端工程師們也可以思考，如何運用這些簡單的特效打動使用者的心吧！