使用three.js實現炫酷的酸性風格3D頁面
背景 近期學習了 WebGL 和 Three.js 的一些基礎知識，於是想結合最近流行的酸性設計風格，裝飾一下個人主頁，同時總結一些學到的知識。本文內容主要介紹，通過使用 React + three.js 技術棧，加載 3D模型、添加 3D文字、增加動畫、點擊交互等，配合樣式設計，實現充滿 ...
原文：使用Three.js網頁引擎創建酷炫的3D效果的標簽牆
使用Three.js引擎 這是開源的webgl三維引擎，gitgub 進行一個簡單應用。 做一個酷炫的 d效果的標簽牆 已經放在我的博客首頁的右下角，pc可見 ， 去我的博客首頁看看實際效果 www.songshizhao.com 靜態效果如下圖所示： 讓所有的標簽組成一個球體，並且運動起來。可以手動拖拽，點擊可以跳轉等等。。 做完之后小小的總結一下。最后我會把本文的代碼整理為html分享在這篇文 ...
2017-03-13 20:46 0 2556 推薦指數：
相關推薦
網頁3D效果庫Three.js初窺
背景 一直想研究下web頁面的3D效果，最后選擇了一個比較的成熟的框架Three.js下手 ThreeJs官網 ThreeJs-github; 接下來我會陸續翻譯 Three.js官網的文檔，部分文字和代碼為我個人添加。 第一部分：three.js介紹 創建場景 這部分的目標 ...
使用three.js創建3D機房模型-分享一
序：前段時間公司一次研討會上，一市場部同事展現了同行業其他公司的3D機房，我司領導覺得這個可以研究研究，為了節約成本，我們在網上大量檢索，派本人研究一下web3D的技術，於是乎便有了下面的技術分享。 其它相關文章： 使用webgl(three.js)創建3D機房，3D機房微模塊詳細介紹(升級版 ...
使用webgl(three.js)搭建一個3D智慧園區、3D建築，3D消防模擬，web版3D,bim管理系統——第四課（炫酷版一）
這節課我們主要講解園區三維可視化炫酷感官技術方案 前言： 當基礎技術達到普及狀態，應用就趨向於極致，在三維可視化領域也是這個道理。各大可視化公司都追求美觀最大化，這時候美工的作用就不容忽視了。 背景說明： A、經濟背景：經濟下行的大環境下，各大有社會責任的企業與部門開始拉動 ...
酷炫的3D照片牆
今天給大家分享的案例是酷炫的3D照片牆 這個案例主要是通過 CSS3 和原生的 JS 來實現的，接下來我給大家分享一下這個效果實現的過程。博客上不知道怎么放本地視頻，所以只能放兩張效果截圖了. 1.實現靜態的散開的效果圖 HTML內容 ...
用three.js在網頁實現3D模型
首先，下載three.js文件，在threejs官網能下，這里附上地址鏈接一條https://threejs.org/ 然后，下載解壓，會得到three.js-master文件，在build目錄找到three.js，這個是three.js的核心功能庫。在example/js/loaders目錄 ...
拜托，使用Three.js讓二維圖片具有3D效果超酷的好嗎 💥
聲明：本文涉及圖文和模型素材僅用於個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。 背景 逛 sketchfab 網站的時候我看到有很多二維平面轉 3D 的模型例子，於是仿照他們的例子，使用 Three.js + React 技術棧，將二維 ...
使用Three.js實現神奇的3D文字懸浮效果
聲明：本文涉及圖文和模型素材僅用於個人學習、研究和欣賞，請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。 背景 在 Three.js Journey 課程示例中，提供了一個使用 Three.js 內置方法實現的 3D 文字懸浮效果的例子，本文使用 React ...