整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
本文從繪圖基礎(chǔ)開始講起，詳細介紹了如何使用Three.js開發(fā)一個功能齊全的全景插件。
我們先來看一下插件的效果：
如果你對Three.js已經(jīng)很熟悉了，或者你想跳過基礎(chǔ)理論，那么你可以直接從全景預覽開始看起。
本項目的github地址：https://github.com/ConardLi/tpanorama
OpenGL是用于渲染2D、3D量圖形的跨語言、跨平臺的應用程序編程接口（API）。
這個接口由近350個不同的函數(shù)調(diào)用組成，用來從簡單的圖形比特繪制復雜的三維景象。
OpenGL ES 是OpenGL三維圖形API的子集，針對手機、PDA和游戲主機等嵌入式設備而設計。
基于OpenGL，一般使用C或Cpp開發(fā)，對前端開發(fā)者來說不是很友好。
WebGL把JavaScript和OpenGL ES 2.0結(jié)合在一起，從而為前端開發(fā)者提供了使用JavaScript編寫3D效果的能力。
WebGL為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創(chuàng)建復雜的導航和數(shù)據(jù)視覺化。
Canvas是一個可以自由制定大小的矩形區(qū)域，可以通過JavaScript可以對矩形區(qū)域進行操作，可以自由的繪制圖形，文字等。
一般使用Canvas都是使用它的2d的context功能，進行2d繪圖，這是其本身的能力。
和這個相對的，WebGL是三維，可以描畫3D圖形，WebGL，想要在瀏覽器上進行呈現(xiàn)，它必須需要一個載體，這個載體就是Canvas，區(qū)別于之前的2dcontext，還可以從Canvas中獲取webglcontext。
我們先來從字面意思理解下：Three代表3D，js代表JavaScript，即使用JavaScript來開發(fā)3D效果。
Three.js是使用JavaScript對 WebGL接口進行封裝與簡化而形成的一個易用的3D庫。
直接使用WebGL進行開發(fā)對于開發(fā)者來說成本相對來說是比較高的，它需要你掌握較多的計算機圖形學知識。
Three.js在一定程度上簡化了一些規(guī)范和難以理解的概念，對很多API進行了簡化，這大大降低了學習和開發(fā)三維效果成本。
下面我們來具體看一下使用Three.js必須要知道的知識。
使用Three.js繪制一個三維效果，至少需要以下幾個步驟：
拿電影來類比的話，場景對應于整個布景空間，相機是拍攝鏡頭，渲染器用來把拍攝好的場景轉(zhuǎn)換成膠卷。
場景允許你設置哪些對象被three.js渲染以及渲染在哪里。
我們在場景中放置對象、燈光和相機。
很簡單，直接創(chuàng)建一個Scene的實例即可。
_scene = new Scene();
有了場景，我們接下來就需要場景里應該展示哪些東西。
一個復雜的三維場景往往就是由非常多的元素搭建起來的，這些元素可能是一些自定義的幾何體（Geometry），或者外部導入的復雜模型。
Three.js 為我們提供了非常多的Geometry，例如SphereGeometry（球體）、 TetrahedronGeometry（四面體）、TorusGeometry（圓環(huán)體）等等。
在Three.js中，材質(zhì)（Material）決定了幾何圖形具體是以什么形式展現(xiàn)的。它包括了一個幾何體如何形狀以外的其他屬性，例如色彩、紋理、透明度等等，Material和Geometry是相輔相成的，必須結(jié)合使用。
下面的代碼我們創(chuàng)建了一個長方體體，賦予它基礎(chǔ)網(wǎng)孔材料（MeshBasicMaterial）
var geometry = new THREE.BoxGeometry(200, 100, 100);
var material = new THREE.MeshBasicMaterial({ color: 0x645d50 });
var mesh = new THREE.Mesh(geometry, material);
_scene.add(mesh);
能以這個角度看到幾何體實際上是相機的功勞，這個我們下面的章節(jié)再介紹，這讓我們看到一個幾何體的輪廓，但是感覺怪怪的，這并不像一個幾何體，實際上我們還需要為它添加光照和陰影，這會讓幾何體看起來更真實。
基礎(chǔ)網(wǎng)孔材料（MeshBasicMaterial）不受光照影響的，它不會產(chǎn)生陰影，下面我們?yōu)閹缀误w換一種受光照影響的材料：網(wǎng)格標準材質(zhì)(Standard Material)，并為它添加一些光照：
var geometry = new THREE.BoxGeometry(200, 100, 100);
var material = new THREE.MeshStandardMaterial({ color: 0x645d50 });
var mesh = new THREE.Mesh(geometry, material);
_scene.add(mesh);
// 創(chuàng)建平行光-照亮幾何體
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-4, 8, 12);
_scene.add(directionalLight);
// 創(chuàng)建環(huán)境光
var ambientLight = new THREE.AmbientLight(0xffffff);
_scene.add(ambientLight);
有了光線的渲染，讓幾何體看起來更具有3D效果，Three.js中光源有很多種，我們上面使用了環(huán)境光(AmbientLight)和平行光(DirectionalLight)。
環(huán)境光會對場景中的所有物品進行顏色渲染。
平行光你可以認為像太陽光一樣，從極遠處射向場景中的光。它具有方向性，也可以啟動物體對光的反射效果。
除了這兩種光，Three.js還提供了其他幾種光源，它們適用于不同情況下對不同材質(zhì)的渲染，可以根據(jù)實際情況選擇。
在說相機之前，我們還是先來了解一下坐標系的概念：
在三維世界中，坐標定義了一個元素所處于三維空間的位置，坐標系的原點即坐標的基準點。
最常用的，我們使用距離原點的三個長度（距離x軸、距離y軸、距離z軸）來定義一個位置，這就是直角坐標系。
在判定坐標系時，我們通常使用大拇指、食指和中指，并互為90度。大拇指代表X軸，食指代表Y軸，中指代表Z軸。
這就產(chǎn)生了兩種坐標系：左手坐標系和右手坐標系。
Three.js中使用的坐標系即右手坐標系。
我們可以在我們的場景中添加一個坐標系，這樣我們可以清楚的看到元素處于什么位置：
var axisHelper = new THREE.AxisHelper(600);
_scene.add(axisHelper);
其中紅色代表X軸，綠色代表Y軸，藍色代表Z軸。
上面看到的幾何體的效果，如果不創(chuàng)建一個相機(Camera)，是什么也看不到的，因為默認的觀察點在坐標軸原點，它處于幾何體的內(nèi)部。
相機(Camera)指定了我們在什么位置觀察這個三維場景，以及以什么樣的角度進行觀察。
目前Three.js提供了幾種不同的相機，最常用的，也是下面插件中使用的兩種相機是：PerspectiveCamera（透視相機）、 OrthographicCamera（正交投影相機）。
上面的圖很清楚的解釋了兩種相機的區(qū)別：
右側(cè)是 OrthographicCamera（正交投影相機）他不具有透視效果，即物體的大小不受遠近距離的影響，對應的是投影中的正交投影。我們數(shù)學課本上所畫的幾何體大多數(shù)都采用這種投影。
左側(cè)是PerspectiveCamera（透視相機），這符合我們正常人的視野，近大遠小，對應的是投影中的透視投影。
如果你想讓場景看起來更真實，更具有立體感，那么采用透視相機最合適，如果場景中有一些元素你不想讓他隨著遠近放大縮小，那么采用正交投影相機最合適。
我們再分別來看看兩個創(chuàng)建兩個相機需要什么參數(shù)：
_camera = new OrthographicCamera(left, right, top, bottom, near, far);
OrthographicCamera接收六個參數(shù)，left, right, top, bottom分別對應上、下、左、右、遠、近的一個距離，超過這些距離的元素將不會出現(xiàn)在視野范圍內(nèi)，也不會被瀏覽器繪制。實際上，這六個距離就構(gòu)成了一個立方體，所以OrthographicCamera的可視范圍永遠在這個立方體內(nèi)。
_camera = new PerspectiveCamera(fov, aspect, near, far);
PerspectiveCamera接收四個參數(shù)，near、far和上面的相同，分別對應相機可觀測的最遠和最近距離；fov代表水平范圍可觀測的角度，fov越大，水平范圍能觀測到的范圍越廣；aspect代表水平方向和豎直方向可觀測距離的比值，所以fov和aspect就可以確定垂直范圍內(nèi)能觀測到的范圍。
關(guān)于相機還有兩個必須要知道的點，一個是position屬性，一個是lookAt函數(shù)：
position屬性指定了相機所處的位置。
lookAt函數(shù)指定相機觀察的方向。
實際上position的值和lookAt接收的參數(shù)都是一個類型為Vector3的對象，這個對象用來表示三維空間中的坐標，它有三個屬性：x、y、z分別代表距離x軸、距離y軸、距離z軸的距離。
下面，我們讓相機觀察的方向指向原點，另外分別讓x、y、z為0，另外兩個參數(shù)不為0，看一下視野會發(fā)生什么變化：
_camera = new OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.1, 1000);
_camera.lookAt(new THREE.Vector3(0, 0, 0))
_camera.position.set(0, 300, 600); // 1 - x為0
_camera.position.set(500, 0, 600); // 2 - y為0
_camera.position.set(500, 300, 0); // 3 - z為0
很清楚的看到position決定了我們視野的出發(fā)點，但是鏡頭指向的方向是不變的。
下面我們將position固定，改變相機觀察的方向：
_camera = new OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.1, 1000);
_camera.position.set(500, 300, 600);
_camera.lookAt(new THREE.Vector3(0, 0, 0)) // 1 - 視野指向原點
_camera.lookAt(new THREE.Vector3(200, 0, 0)) // 2 - 視野偏向x軸
可見：我們視野的出發(fā)點是相同的，但是視野看向的方向發(fā)生了改變。
好，有了上面的基礎(chǔ)，我們再來寫兩個例子看一看兩個相機的視角對比，為了方便觀看，我們創(chuàng)建兩個位置不同的幾何體：
var geometry = new THREE.BoxGeometry(200, 100, 100);
var material = new THREE.MeshStandardMaterial({ color: 0x645d50 });
var mesh = new THREE.Mesh(geometry, material);
_scene.add(mesh);
var geometry = new THREE.SphereGeometry(50, 100, 100);
var ball = new THREE.Mesh(geometry, material);
ball.position.set(200, 0, -200);
_scene.add(ball);
正交投影相機視野：
_camera = new OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.1, 1000);
_camera.position.set(0, 300, 600);
_camera.lookAt(new THREE.Vector3(0, 0, 0))
透視相機視野：
_camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1100);
_camera.position.set(0, 300, 600);
_camera.lookAt(new THREE.Vector3(0, 0, 0))
可見，這印證了我們上面關(guān)于兩種相機的理論
上面我們創(chuàng)建了場景、元素和相機，下面我們要告訴瀏覽器將這些東西渲染到瀏覽器上。
Three.js也為我們提供了幾種不同的渲染器，這里我們主要看WebGL渲染器(WebGLRenderer)。顧名思義：WebGL渲染器使用WebGL來繪制場景，其夠利用GPU硬件加速從而提高渲染性能。
_renderer = new THREE.WebGLRenderer();
你需要將你使用Three.js繪制的元素添加到瀏覽器上，這個過程需要一個載體，上面我們介紹，這個載體就是Canvas，你可以通過_renderer.domElement獲取到這個Canvas，并將它給定到真實DOM中。
_container = document.getElementById('conianer');
_container.appendChild(_renderer.domElement);
使用setSize函數(shù)設定你要渲染的范圍，實際上它改變的就是上面Canvas的范圍：
_renderer.setSize(window.innerWidth, window.innerHeight);
現(xiàn)在，你已經(jīng)指定了一個渲染的載體和載體的范圍，你可以通過render函數(shù)渲染上面指定的場景和相機：
_renderer.render(_scene, _camera);
實際上，你如果依次執(zhí)行上面的代碼，可能屏幕上還是黑漆漆的一片，并沒有任何元素渲染出來。
這是因為上面你要渲染的元素可能并未被加載完，你就執(zhí)行了渲染，并且只執(zhí)行了一次，這時我們需要一種方法，讓場景和相機進行實時渲染，我們需要用到下面的方法：
window.requestAnimationFrame()告訴瀏覽器——你希望執(zhí)行一個動畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動畫。
該方法需要傳入一個回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行。
window.requestAnimationFrame(callback);
若你想在瀏覽器下次重繪之前繼續(xù)更新下一幀動畫，那么回調(diào)函數(shù)自身必須再次調(diào)用window.requestAnimationFrame()。
使用者韓函數(shù)就意味著，你可以在requestAnimationFrame不停的執(zhí)行繪制操作，瀏覽器就實時的知道它需要渲染的內(nèi)容。
當然，某些時候你已經(jīng)不需要實時繪制了，你也可以使用cancelAnimationFrame立即停止這個繪制：
window.cancelAnimationFrame(myReq);
來看一個簡單的例子：
var i = 0;
var animateName;
animate();
function animate() {
animateName = requestAnimationFrame(animate);
console.log(i++);
if (i > 100) {
cancelAnimationFrame(animateName);
}
}
來看一下執(zhí)行效果：
我們使用requestAnimationFrame和Three.js的渲染器結(jié)合使用，這樣就能實時繪制三維動畫了：
function animate() {
requestAnimationFrame(animate);
_renderer.render(_scene, _camera);
}
借助上面的代碼，我們可以簡單實現(xiàn)一些動畫效果：
var y = 100;
var option = 'down';
function animateIn() {
animateName = requestAnimationFrame(animateIn);
mesh.rotateX(Math.PI / 40);
if (option == 'up') {
ball.position.set(200, y += 8, 0);
} else {
ball.position.set(200, y -= 8, 0);
}
if (y < 1) { option = 'up'; }
if (y > 100) { option = 'down' }
}
上面的知識是Three.js中最基礎(chǔ)的知識，也是最重要的和最主干的。
這些知識能夠讓你在看到一個復雜的三維效果時有一定的思路，當然，要實現(xiàn)還需要非常多的細節(jié)。這些細節(jié)你可以去官方文檔中查閱。
下面的章節(jié)即告訴你如何使用Three.js進行實戰(zhàn) — 實現(xiàn)一個360度全景插件。
這個插件包括兩部分，第一部分是對全景圖進行預覽。
第二部分是對全景圖的標記進行配置，并關(guān)聯(lián)預覽的坐標。
我們首先來看看全景預覽部分。
文中如有錯誤，歡迎在評論區(qū)指正，如果這篇文章幫助到了你，歡迎點贊和關(guān)注。
原地址:https://github.com/ConardLi/tpanorama
根據(jù)Newzoo的《2024全球游戲市場報告》顯示，2024年全球小游戲市場預計將達到近500億美元的規(guī)模。這一增長主要得益于移動設備普及率的提高、互聯(lián)網(wǎng)接入的廣泛性以及新興市場的崛起。
根據(jù)艾瑞咨詢的報告，2024年中國小游戲市場規(guī)模預計將達到200億美元。小游戲市場主要包括H5游戲、小程序游戲和快應用。
根據(jù)QuestMobile的數(shù)據(jù)顯示，2024年中國小游戲用戶規(guī)模將達到4億，用戶主要集中在年輕群體和中低收入群體。用戶行為和需求主要表現(xiàn)為：
國內(nèi)小游戲的主要渠道和平臺包括：
根據(jù)Newzoo的報告，2024年海外小游戲市場規(guī)模預計將達到300億美元。主要市場包括北美、歐洲、東南亞和拉丁美洲。
根據(jù)Statista的數(shù)據(jù)，2024年海外小游戲用戶規(guī)模將達到10億，用戶行為和需求主要表現(xiàn)為：
海外小游戲的主要渠道和平臺包括：
人工智能（AI）和機器學習（ML）技術(shù)在小游戲中的應用日益廣泛。這些技術(shù)不僅提升了游戲的智能化水平，還改善了用戶體驗。
AR和VR技術(shù)在小游戲中的應用為用戶提供了全新的游戲體驗。盡管目前AR和VR游戲市場規(guī)模相對較小，但其增長潛力巨大。
新興市場的崛起為小游戲帶來了巨大的增長潛力。尤其是東南亞、印度和拉丁美洲市場，隨著智能手機普及率和互聯(lián)網(wǎng)接入率的提高，這些地區(qū)的小游戲用戶數(shù)量迅速增長。
小游戲的變現(xiàn)模式正在不斷多元化，除了傳統(tǒng)的廣告收入外，應用內(nèi)購買和訂閱服務也成為重要的收入來源。
小游戲市場的快速發(fā)展吸引了大量的開發(fā)者和發(fā)行商，市場競爭日益激烈。如何在眾多游戲中脫穎而出，成為開發(fā)者面臨的重大挑戰(zhàn)。
技術(shù)和內(nèi)容的快速迭代要求開發(fā)者具備較高的創(chuàng)新能力和快速反應能力。特別是在AI、AR、VR等新興技術(shù)的應用中，開發(fā)者需要不斷提升自己的技術(shù)水平。
未來，小游戲市場將繼續(xù)受到技術(shù)進步的驅(qū)動。AI、AR、VR等新技術(shù)的應用將為小游戲帶來更多的創(chuàng)新和可能性。開發(fā)者需要不斷探索和應用這些新技術(shù)，提升游戲的智能化和沉浸感。
用戶體驗和個性化將成為小游戲成功的關(guān)鍵。通過數(shù)據(jù)分析和AI技術(shù)，實現(xiàn)個性化推薦和定制化服務，可以顯著提升用戶的滿意度和留存率。開發(fā)者需要關(guān)注用戶需求，提供更加個性化和多樣化的游戲體驗。
全球市場的機遇與挑戰(zhàn)并存。隨著新興市場的崛起，小游戲的市場空間將進一步擴大。但同時，開發(fā)者也需要面對激烈的市場競爭和技術(shù)挑戰(zhàn)。通過深入的市場調(diào)研和精準的市場定位，開發(fā)者可以在全球市場中找到自己的定位和發(fā)展機會。
2024年，全球小游戲市場充滿了機遇與挑戰(zhàn)。通過深入的市場調(diào)研、技術(shù)創(chuàng)新和用戶體驗優(yōu)化，開發(fā)者可以在激烈的市場競爭中脫穎而出，實現(xiàn)從零到億的成功。希望本文的分析和見解能夠為小游戲開發(fā)者和行業(yè)從業(yè)者提供有價值的參考和指導，共同迎接小游戲市場的美好未來。
著時代的發(fā)展，智能手機的拍照功能基本淘汰了普通相機，但是現(xiàn)在又出現(xiàn)了一個新科技-VR（虛擬現(xiàn)實），于是產(chǎn)生了VR全景相機等，可以拍攝VR全景圖片、VR全景視頻等。如果把VR全景圖片在網(wǎng)站上展示，是不是很酷，其實這種技術(shù)已經(jīng)應用在很多網(wǎng)站，如百度地圖有全景預覽，可以詳細查看指定地點清晰圖片，非常方便查看實地情況。
VR全景展示這么有用，那么今天我們就探討如何在網(wǎng)站上顯示VR全景圖片。
全景圖片分類如下：
1、球面全景圖，利用一張全景圖圍成一個球，自身位置位于球體內(nèi)。由于圖片是矩形，所以最上和最下的縫合處很明顯就能夠看得出來。
2、立方體全景圖，一個立方體，有六個面組成，所以就需要六張圖片啦。自身的位置位于立方體中間。
2、柱狀全景圖，是由球面全景圖和立方體全景圖結(jié)合而成
如果按照普通網(wǎng)頁IMG標簽顯示VR全景圖片，可以顯示，但是沒有VR效果，所以傳統(tǒng)方式是絕對不行的。
展示VR全景圖片目前僅限支持WebGL和canvas的瀏覽器，主要還是HTML5的作用，HTML5確實大大增加了網(wǎng)頁瀏覽器的能力。
這里可以使用3d全景效果JS插件：ThetaViewer。
代碼非常簡單，只要引入對于的JS，然后幾行JS代碼就可以實現(xiàn)。
VR全景圖片可以展示了，很多人會問VR全景視頻可以在網(wǎng)站上展示嗎？答案是肯定的。
目前已經(jīng)有很多VR全景視頻制作的公司，也有一些開源的全景視頻制作工具，如HTML5 Pano和play2VR等。
VR全景圖片其出色的展示效果，相信5G時代的到來，一定在互聯(lián)網(wǎng)上會越來越常見。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
