dragonir

摘要： 本文主要介紹 AI 繪圖開源工具 Stable Diffusion WebUI 的 API 開啟和基本調用方法，通過本文的閱讀，你將了解到 stable-diffusion-webui 的基本介紹、安裝及 API 環(huán)境配置；文生圖、圖生圖、局部重繪、后期處理等 API 接口調用；圖像處理開發(fā)中常用到一些方法如 Base64、PNG、Canvas及 URL 相互轉換、Canvas 顏色轉換等。 閱讀全文

摘要： 本文將學習如何使用滾動控制 ScrollControls 來控制模型的的動畫播放和相機動畫，通過滾動鼠標滾輪或者上下移動觸摸板，來控制模型的動畫播放進度或者相機的方位視角，從而呈現(xiàn)出驚艷的視覺效果。通過本文的閱讀和案例頁面的實現(xiàn)，你將學習到的知識包括：R3F 生態(tài)中的 ScrollControls、Html、useScroll、useGLTF、useAnimations 等組件和方法的基本用法、在 R3F 中加載模型并播放模型骨骼動畫、通過滾動控制模型動畫播放進程和相機參數、頁面元素的一些 CSS 動畫及頁面整體絲滑滾動動畫實現(xiàn)等。 閱讀全文

摘要： 本文使用 React + Three.js + React Three Fiber 技術棧，實現(xiàn)一個《塞爾達傳說：王國之淚》主題風格基于滾動控制的平滑滾動圖片展示頁面。通過本文的閱讀，你將學習到的知識點包括：了解 R3F 中 useFrame hook 及 useThree hook 基本原理及用法；了解 @react-three/drei 庫的基本組成，學習使用它提供的 Preload、useIntersect、ScrollControls、Scroll、及 Image 等組件和方法；用 CSS 生成簡單的循環(huán)懸浮動畫等。 閱讀全文

摘要： 本文使用Three.js實現(xiàn)一個可以應用到實際項目中的3D在線看房案例。通過閱讀本文和實踐案例，你將學到的知識包括：使用 Three.js 實現(xiàn)多個場景的加載和場景間的絲滑過渡切換、隨著空間一直和角度實時變化的房源小地圖、在全景場景中添加如地面指引、空間物體展示、房間標注等多種類型的交互熱點等。 閱讀全文

摘要： 3D 全景技術可以實現(xiàn)日常生活中的很多功能需求，比如地圖的街景全景模式、數字展廳、在線看房、社交媒體的全景圖預覽、短視頻直播平臺的全景直播等。Three.js 實現(xiàn)全景功能也是十分方便的，本文將介紹如何一步步優(yōu)雅實現(xiàn)在多個3D全景中穿梭漫游，達到如在真實世界中前進后退的視覺效果。全景漫游系列文章將分為上下兩篇，本篇內容我們先介紹如何通過移動相機的方法來達到場景切換的目的。通過本文的學習，你將學到的知識點包括：在 Three.js 中創(chuàng)建全景圖的幾種方式、在 3D 全景圖中添加交互熱點、利用 Tween.js 實現(xiàn)相機切換動畫、多個全景圖之間的切換等。 閱讀全文

摘要： 本文將使用技術棧 React Three Fiber 和 Cannon.js 來實現(xiàn)一個具有物理特性的乒乓球小游戲，通過本文的閱讀，你將學習到的知識點包括：了解什么是 React Three Fiber 及它的相關生態(tài)、使用 React Three Fiber 搭建基礎三維場景、如何使用新技術棧給場景中對象的添加物理特性等，最后利用上述知識點，將開發(fā)一個簡單的乒乓球小游戲。 閱讀全文

摘要： 本文內容主要匯總如何在 Three.js 創(chuàng)建的 3D 世界中添加物理效果，使其更加真實。所謂物理效果指的是對象會有重力，它們可以相互碰撞，施加力之后可以移動，而且通過鉸鏈和滑塊還可以在移動過程中在對象上施加約束。 通過本文的閱讀，你將學習到如何使用 Cannon.js 在 Three.js 中創(chuàng)建一個 3D 物理世界，并在物理世界更新對象、聯(lián)系材質、施加外力、處理多個物體中添加物體之間的碰撞效果，通過檢測碰撞激烈程度來添加撞擊聲音等。 閱讀全文

摘要： 兔年到了，祝大家身體健，康萬事順利。本文內容作為兔年新春紀念頁面，將使用 Three.js 及 其他前端開發(fā)知識，創(chuàng)建一個以兔子為主題的 3D 簡單的趣味頁面 Rabbit craft go。本文內容包括使用純代碼創(chuàng)建三維浮島、小河、樹木、兔子、胡蘿卜以及兔子的運動交互、浮島的動畫效果等。本文包含的知識點相對比較簡單，主要包括 使用 Three.js 網格立方體搭建三維卡通場景、鍵盤事件的監(jiān)聽與三維場景動畫的結合等，如果仔細閱讀并實踐過本專欄《Three.js 進階之旅》的話，非常容易掌握。 閱讀全文

摘要： 不知不覺，掘金關注者人數已經超過 1000 人，因此特地做了這個頁面紀念一下，感謝大家關注 ??? ，希望博客園的粉絲也漲漲。后續(xù)也將繼續(xù)努力，持續(xù)輸出一些有價值的文章。本文內容涉及的技術棧為 React + Three.js + Stulus，本文中主要包含的知識點包括：圓錐幾何體 ConeGeometry、圓柱幾何體 CylinderGeometry、材質捕捉紋理材質 MeshMatcapMaterial、文字創(chuàng)建和修飾的 FontLoader 和 TextGeometry、使用 Gsap 和它的插件 Physics2DPlugin 創(chuàng)建一些動畫、rotateOnAxis 方法實現(xiàn)繞軸自轉等。 閱讀全文

摘要： 在前端開發(fā)過程中，我們也有可能遇到噪點插畫風格的設計稿，應用基礎的前端開發(fā)知識，能不能實現(xiàn)噪點風格的樣式呢，本文主要內容主要就是通過幾個示例來實現(xiàn)幾種噪點效果。本文包含的知識點包括：CSS 屬性 mask 遮罩、SVG 濾鏡 feTurbulence、CSS 屬性 filter 濾鏡、CSS 屬性 mix-blend-mode 元素混合、CSS 屬性 image-rendering 圖像縮放等。 閱讀全文

摘要： 如果你有玩過 ?? 《王者榮耀》、《陰陽師》 等手游，一定注意到過它的啟動動畫、皮膚立繪卡片等場景，經常采用靜態(tài)底圖加局部液態(tài)流動效果的簡單動畫，本文使用前端開發(fā)技術，結合 SVG 和 CSS 來實現(xiàn)類似的液化流動效果。本文包含的知識點主要包括：mask-image 遮罩、feTurbulence 和 feDisplacementMap 濾鏡、filter 屬性、canvas 繪制方法、TimelineMax 動畫以及input[type=file] 本地圖片資源加載等。 閱讀全文

摘要： 近期工作有涉及到數字大屏的需求，于是利用業(yè)余時間，結合 Three.js 和 CSS實現(xiàn)賽博朋克2077風格視覺效果 實現(xiàn)炫酷 3D 數字地球大屏頁面。頁面使用 React + Three.js + Echarts + stylus 技術棧，本文涉及到的主要知識點包括：THREE.Spherical 球體坐標系的應用、Shader 結合 TWEEN 實現(xiàn)飛線和沖擊波動畫效果、dat.GUI 調試工具庫的使用、clip-path 創(chuàng)建不規(guī)則圖形、Echarts 的基本使用方法、radial-gradient 創(chuàng)建雷達圖形及動畫、GlitchPass 添加故障風格后期、Raycaster 網格點擊事件等。 閱讀全文

摘要： 深居內陸的人們，大概每個人都有過大海之夢吧。夏日傍晚在沙灘漫步奔跑；或是在海上沖浪游泳；或是在海島游玩探險；亦或靜待日出日落……本文使用 React + Three.js 技術棧，實現(xiàn) 3D 海洋和島嶼，主要包含知識點包括：Tone Mapping、Water 類、Sky 類、Shader 著色、ShaderMaterial 著色器材質、Raycaster 檢測遮擋以及 Three.js 的其他基礎知識，讓我們在這個夏天通過此頁面共赴大海之約。 閱讀全文

摘要： 《聲生不息》 是芒果TV、香港電視廣播有限公司和湖南衛(wèi)視聯(lián)合推出的港樂競唱獻禮節(jié)目，聽著音樂仿佛回到了那個令人懷念的港風席卷整個亞洲的年代。該節(jié)目 Logo 采用經典紅藍配色，無限符號 ∞ 造型，滿滿的設計感。本文在僅采用原生 CSS 的情況下，盡量還原實現(xiàn)該 Logo 造型，本文內容雖然非常簡單，但是用到的知識點挺多的，比如：repeating-linear-gradient、clip-path、background-clip、Window.getComputedStyle()、CSSStyleDeclaration.getPropertyValue() 等。 閱讀全文

摘要： 2545光年之外的開普勒1028星系，有一顆色彩斑斕的宜居星球 ??，星際移民 ????? 必須穿戴基地發(fā)放的防輻射服才能生存。阿貍 ?? 駕駛星際飛行器 ?? 降臨此地，快幫它在限定時間內使用輪盤移動找到基地獲取防輻射服吧！本文使用 Three.js + React + CANNON 技術棧，實現(xiàn)通過滑動屏幕控制模型在 3D 世界里運動的 Low Poly 低多邊形風格小游戲。本文主要涉及到的知識點包括：Three.js 陰影類型、創(chuàng)建粒子系統(tǒng)、cannon.js 基本用法、使用 cannon.js 高度場 Heightfield 創(chuàng)建地形、通過輪盤移動控制模型動畫等。 閱讀全文

摘要： 《艾爾登法環(huán)》是最近比較火的一款游戲，觀察可以發(fā)現(xiàn)它的 Logo 是由幾個圓弧和線段構成。本文使用 React + Three.js 技術棧，實現(xiàn)具有火焰效果艾爾登法環(huán) Logo，本文中涉及到的知識點包括：Fire.js 基本使用方法及 Three.js 的其他基礎知識。 閱讀全文

摘要： 在 Three.js Journey 課程示例中，提供了一個使用 Three.js 內置方法實現(xiàn)的 3D 文字懸浮效果的例子，本文使用 React + Three.js 技術棧，參照示例實現(xiàn)類似的效果。本文中涉及到的知識點主要包括：CSS 網格背景、MeshNormalMaterial 法向材質、FontLoader 字體加載器、TextGeometry 文本緩沖幾何體、TorusBufferGeometry 圓環(huán)緩沖幾何體、ConeBufferGeometry 圓錐緩沖幾何體、OctahedronBufferGeometry 八面緩沖幾何體、Three.js 后期渲染、GlitchPass 通道、Element.requestFullscreen、Document.exitFullscreen 等。 閱讀全文

摘要： 本文使用 Three.js + React 技術棧，將二維漫畫圖片轉化為三維視覺效果。本文包含的內容主要包括：THREE.Group 層級模型、MeshPhongMaterial 高光網格材質、正弦余弦函數 創(chuàng)建模型移動軌跡等。 閱讀全文

摘要： 迎冬奧，一起向未來！2022冬奧會馬上就要開始了，本文使用 Three.js + React 技術棧，實現(xiàn)冬日和奧運元素，制作了一個充滿趣味和紀念意義的冬奧主題 3D 頁面。本文涉及到的知識點主要包括：TorusGeometry 圓環(huán)面、MeshLambertMaterial 非光澤表面材質、MeshDepthMaterial 深度網格材質、custromMaterial 自定義材質、Points 粒子、PointsMaterial 點材質等。 閱讀全文

摘要： 本文使用 React + Three.js 技術棧，實現(xiàn)粉絲突破 1000 的 3D 紀念頁面，包含的主要知識點包括：Three.js 提供的光源、DirectionLight 平行光、HemisphereLight 半球光源、AmbientLight 環(huán)境光、獎牌素材生成、貼圖知識、MeshPhysicalMaterial 物理材質、TWEEN 鏡頭補間動畫、CSS 禮花動畫等。 閱讀全文