AR - AR.js - basic

簡介

• AR.js是一個用於Web增強現實的輕量級庫，具有基於標記和基於位置的AR等功能。
• 基於Web的：這是一個純Web解決方案，因此無需安裝。基於three.js + jsartoolkit5的完整javascript。
• AR.js使用artoolkit，因此它是基於標記的。 artoolkit是具有多年從事增強現實經驗的軟件。它可以做很多事情！
• 它支持多種標記：多種類型的標記圖案 / 條形碼同時具有 多個獨立的標記，或者多個標記充當單個標記供您選擇。
• three.js是一個出色的庫，可以在Web上進行3D，three.js的作用是實現三維顯示。
• jsartoolkit 是實現攝像頭的調用以及攝像頭所獲取影像的分析
• artoolkit three.js與jsartoolkit本來毫無關係，而artoolkit將他們聯繫到一起
• emscripten和asm.js可以將artoolkit c編譯成javascript
• chromium! thanks for being so fast!

示例：

https://jeromeetienne.github.io/AR.js/three.js/examples/basic.html

示例文件結構：

加載步驟：

1. 初始化渲染器（畫布）： var renderer = new THREE.WebGLRenderer({});
   ① 設置畫布大小、顏色、位置等參數
   ② 嵌入畫布到頁面中：document.body.appendChild(renderer.domElement);
2. 初始化場景和相機：
   ① 初始化場景：var scene = new THREE.Scene();
   ② 初始化相機：var camera = new THREE.Camera();
   ③ 在場景中添加相機：scene.add(camera);
3. 處理arToolkitSource：
   ① var arToolkitSource = new THREEx.ArToolkitSource({sourceType: ‘webcam’}); 從網絡攝像機讀取
   ② arToolkitSource.init(function onReady() {onResize()}) 和 window.addEventListener(‘resize’, function () {onResize()})：監聽頁面並調整大小
4. 初始化arToolkitContext：
   ① var arToolkitContext = new THREEx.ArToolkitContext({cameraParametersUrl: 加載相機參數})
   ② 將投影矩陣複製到相機
   ③ 在每一幀上更新artoolkit，更新scene.visible（如果看到標記），scene.visible = camera.visible;
5. 創建ArMarkerControls，創建標記控制
   ① 初始化相機控制：當我們控制相機時，設置矩陣模式:‘攝像機變換矩陣’(changeMatrixMode: ‘cameraTransformMatrix’)
   ② 正如我們所做的更改matrixmode:‘cameraTransformMatrix’，從不可見的場景開始：scene.visible = false
6. 在場景中添加對象 (通過three.js可以加載多種類型的模型，如fbx等)
7. 渲染模型到頁面上
   ① renderer.render(scene, camera);
   ② requestAnimationFrame(animate);