Web AR--HTML5+WebGL(ThreeJS)增強現實 “我是小妖怪 逍遙又自在”

原創 allenjiao 2019-08-23 04:04

Web AR增強現實   

我是小妖怪 逍遙又自在...

 

 

更多細節和功能改進後續贅述，感興趣的可以留言或發郵件[email protected]，歡迎一起探討！如果大家想看到什麼更多的效果也可以給我留言。時間有限，很多細節沒辦法寫的很詳細，請大家包涵。 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Web 3D機房，智能數字機房HTML5 WebGL(ThreeJS)匠心打造

   在H5使用3D技術門檻比較低了，它的基礎是WebGL(ThreeJS)，一個OpenGL的瀏覽器子集，支持大部分主要3D功能接口。目前主流的瀏覽器都有較好的支持，IE需要11。最近web 3D機房研發告一段落，有時間整理這段時間的一

allenjiao 2020-07-03 22:31:50

使用gltf-pipeline的draco壓縮gltf報Draco encoding failed.

查閱這個issue得到了解答。glTF 2.0 model fails to compress with Draco compression 簡單的來講就是建模建的模型沒有三角化處理，讓建模把模型全部三角化就行了。

重复过往 2020-07-08 08:39:38

ThreeJs做智慧城市項目後記

隨着時間的推移技術的進步，前端越來越雜了，但是也越來越精彩了。只是會用一點ThreeJs，對於WebGl的原理並沒瞭解過，這並不影響我們利用ThreeJs去做出一個非常炫酷的項目。 開始 新世界的大門打開啦！ 寫在前面

重复过往 2020-07-08 08:39:38

關於 Threejs 貼圖跨域問題解決辦法

  three.js 貼圖時一直報"DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be

Five-菜鸟级 2020-07-04 15:11:15

Web 3D工廠--智慧數字可視化工廠HTML5+WebGL(ThreeJS)燒腦鉅作

   隨着IT信息技術和移動端的發展，Html5+3D(Webgl)技術已經悄然崛起，而3D工廠廠房在數字化的今天，已經被越來越多的公司和企業應用，三維數字工廠模型的應用，加快了工廠廠房，設備，傳感器、管道罐體輸送、監測控制等各個環節的效

allenjiao 2020-07-03 22:31:50

Web 3D全景圖（全景漫遊）-WebGL/Threejs技術傾心打造

全景虛擬漫遊 ThreeJS是一個3D的JS庫，封裝了WebGL的功能。而WebGL（Web Graphic Library）又是什麼呢，簡而言之，就是在瀏覽器端開發3D圖形相關的程序的一個庫或者說一個標準。 功能介紹 可以加載單張和六張

allenjiao 2020-07-03 22:31:50

3D編輯器-web在線編輯基於WebGL/Threejs技術

在線場景編輯器  3D場景在線編輯器，可導出工程、場景、物體或幾何體等。 內置多種幾何體、光源，場景支持霧效、影子、反光等。 支持導入多種不同格式的3D模型（json、obj、stl、dae等)。 可視化修改場景、相機、幾何體、材質、紋理

allenjiao 2020-07-03 22:31:50

Web 3D焦化廠-智慧數字焦化廠HTML5+WebGL(Threejs)案例實戰

    隨着IT新技術5G、人工智能、移動互聯的發展，虛擬仿真Html5+3D(Webgl)技術已經悄然崛起，而3D工廠在數字化的今天，已經被越來越多的公司和企業應用，三維數字化工廠模型的應用，加快了工廠車間、廠房，設備，傳感器、管道罐體

allenjiao 2020-07-03 22:31:50

Threejs入門進階實戰案例(1)：使用TextureLoader進行map貼圖顯示黑色的解決方案

<!-- @author Poleng @email [email protected] @create date 2020-06-28 @desc A 3D project based on three.r118.js. --

漏刻有时 2020-07-02 14:06:19

Threejs入門進階實戰案例(2)：正常靜態渲染和渲染動畫的解決方案

在場景中顯示渲染的網格模型，直接使用官方渲染器方法即可。 //執行渲染操作 指定場景、相機作爲參數 renderer.render(scene, camera); **渲染動畫，**使用requestAnim

漏刻有时 2020-07-02 14:06:19

Threejs入門進階實戰案例(5)：座標系理解時輔助座標系的使用

從2D到3D最大的思維模式就是平面思維到空間思維的模式，如果不能在腦中自動補齊3D座標軸，則後續牽涉到的網格模型(mesh)、照相機(camere)、燈光(light)以及多個幾何體(geometry)進行空間佈局時，都是嚴重的思

漏刻有时 2020-07-02 14:06:18

Threejs入門進階實戰案例(3)：視頻貼圖的解決方案

Texture紋理貼圖需要使用TextureLoader()異步加載圖片，而視頻紋理（VideoTexture）創建一個使用視頻來作爲貼圖的紋理對象時，需要在當前文檔創建使用的Video元素。 具體代碼如下： CSS： #vi

漏刻有时 2020-07-02 14:06:18

Threejs入門進階實戰案例(4)：addEventListener() 方法自適應窗口顯示的方案

addEventListener() 方法調整照相機和渲染器尺寸。 /* 窗口變動觸發 */ function onWindowResize() { camera.aspect = window.

漏刻有时 2020-07-02 14:06:18

Threejs入門進階實戰案例(6)：對象的通用屬性/函數

Threejs 3D對象的通用屬性與函數，屬性值可以直接通過console.log查看，具體如下表格： 屬性/函數 描述 position 決定對象相對於其父對象的位置，大部分情況下一個對象的父對象是THREE.Sc

漏刻有时 2020-07-02 14:06:18

使用ThreeJs搭建BIM模型瀏覽器-第十步 加載優化

最近在嘗試了新的傳輸方式。不過對QModel而言，影響不是很大，因爲QModel這個產品只有首次加載是需要從服務器下載模型數據的。   首先，把原本的模型文件拆分成多份了。原本只有一個zip數據壓縮包，現在改爲在服務端拆解爲N份，根據構件

2000年的三好学生 2020-07-02 08:26:05