昨天我們已經實做出全景圖的雛型(Day18)，接下來加入使用者互動的部分：

• 滾動滑鼠時，可以做放大、縮小的效果：這部分可以用 camera 的 fov 參數來做到，我們只要監聽 wheel 事件並且對偏移量做一些處理即可
• 移動滑鼠時，可以移動 camera 的視角
• 如果視窗大小有改變，重新設置畫布的大小

加入 wheel 事件

var pointerX = 0;
var pointerY = 0;

function registerInteractionEvents() {
	var on = document.addEventListener.bind(document);
	var isMousePressed = false;

	on('wheel', function(e) {
		camera.fov += e.deltaY  * 0.02;
	}, false);
}

registerInteractionEvents();

為了統一事件處理，我將監聽事件的部分統一放入到 registerInteractionEvents 當中。設置的方式非常簡單，監聽 wheel 事件，並且加上適當的參數即可。（每次的滾動會增加 0.02 的視野）

加入滑鼠事件

on('mousedown', function(e) {
    isMousePressed = true;
    pointerX = e.clientX;
    pointerY = e.clientY;
}, false);

on('mousemove', function(e) {
    if (isMousePressed) {
        lontitude = ( pointerX - e.clientX ) * 0.02 + lontitude;
        latitude = ( e.clientY - pointerY ) * 0.02 + latitude;
    } 

    return ;
}, false);

on('mouseup', function(e) {
    isMousePressed = false;
}, false);

首先我們加入一個 flag 來記錄目前的滑鼠按下的狀態，並且監聽 mousedown mouseup 來修改目前的滑鼠狀態。

這邊並不會講解太多程式面的東西，各位可以依照自己喜好的方式來控管滑鼠的狀態，例如 Rx.js 或是 Redux 等等......。

mousemove

計算偏移量之後再賦值給 lontitude 跟 latitude 這兩個變數。之後的 animate 方法會重新計算並且重繪畫面。這樣子一來我們的全景圖實作就完成了。

美中不足的部分

• 全景圖非常注重解析度。如果解析度不夠的話，映射到幾何圖形中畫質會變得很差。
• 如果往上拉或往下拉的話會發現，上面（天空）及下面（地面）好像集中於同一點而非無限延伸。因為我們選擇的幾何圖形的關係，再加上視野的設定，所以尖端的部分仍然保留在畫面中。調整的部分就交給各位讀者了。

demo