圖片來源 每個場景都有OrbitControl，就好像每個賽道都有彎道一樣。要是你沒有Orbitcontrol，那就像你沒有「圓弧的藝術家」或是「弧線的教授」...
DAY 22. Three.js 總結 前面連續幾天陸陸續續介紹了關於Three最重要的幾個重點因為每天時間有限的關係沒辦法給予很詳細的介紹，但希望有給大家一些...
成品 看完這篇文章，你將能用three.js開發出地球。 如同前一篇所說，地球可以應用在很多場景上，例如：行銷網站、企業形象網站、活動網站、全球數位戰情室、...
尋日寫錯咗今日先第三日 首先,我的電腦配置:11th Gen Intel(R) Core(TM) i5-1135G716GB Ram512 GB Hard Di...
圖片出處 我們都要有矢量（向量）操作能力 只是差別是，我們不需要像一方通行那樣，吸入必要的氧氣防止能力消失，我們學會了就可以操作！ 向量一般來說，是指一個同時...
在前幾天的準備之後，我們終於要開始規劃APP的畫面了。首先，根據【Day - 1】所設立的目標，第一步就是要在首頁中央放置一個3D模型機器人。提到3D模型，我們...
前端介面的呈現我們使用Vue+three.js。 Vue我們不選用vue-cli來建置專案，而是使用Vite，以求更好的性能。 然後再利用Vue 3D plug...
圖片來源 七原罪中的梅利奧達斯有一招叫做「全反擊」，基本上可以把所有攻擊全部彈回去。招數有夠猛。而我們這次所做的特效也是相當兇猛，基本上用上，整個質感就不一樣...
Day3 - 進入Three.js的領域 這裡是「Three.js學習日誌」的第3篇，本篇的主旨是透過試做一個Three.js的Hello World案例，來...
陰影集合了3D視覺特效中相當核心、基礎、深奧的一面。它很好實作但又不好抓Bug，且時不時出現「怪怪的」地方。本篇將介紹陰影，他的強大就像鹿丸的影子模仿數一樣。閱...
Day16 - 金屬球範例試作(3) - Material解密(六) 這裡是「Three.js學習日誌」的第16篇，這是Material章節的最後一篇，主旨是...
Day17 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第17篇，本篇主旨是在講解要怎麼讓Three.js與滑鼠的動作相聯繫...
three.js的光 圖片來源 有看過航海王的人，應該對這句話非常有印象：「你有被光速踢過嗎？」。 身為海軍三大將的黃猿，最能利用光速打敗對手。跟我們的視覺特...
Day2 - 從webGL的基礎開始?(二) 這裡是「Three.js學習日誌」的第2篇，本篇的主旨是藉由描述一些簡單的webGL基礎，來做為引導three....
Day9 - 「點點到位」 - 幾何結構Geometry(三) 這裡是「Three.js學習日誌」的第9篇，本篇的主旨是要介紹Geometry的概念，還有一些...
Shader是什麼 我們所稱呼的Shader，其實是Fragment Shader以及Vertex Shader的合稱。這兩個出現在Program上，使得我們最...
大家好, 今日在講 object rotation 前先介紹一下scale, scale 就是將object按數值放大 如果我想將x-axis 長度放大1.5倍...
本篇將透過鏡頭追蹤實作，使得我們能夠建立一個第三人稱是角，捕捉拓海的蹤影。 鏡頭追蹤與飄移基本上綜合前面好幾篇多種原理組成。 鏡頭是網頁特效中重要的戰場。網頁由...
本篇內容 一、全視角的內光暈 二、內光暈在地球的應用 成品 一、全視角的內光暈 前一篇我們完成了具有內光暈的球體。 但是最大的問題，就是當鏡頭轉向時，會...
Day25 - 打造質感系3D聊天室 - three.js + socket.io (三) 這裡是「Three.js學習日誌」的第25篇，這篇是在講解使用th...
安裝Node.js Node.js官網: https://nodejs.org/en/安裝完後可以透過node --version指令檢查是否安裝成功 安裝Ex...
Day26- 打造質感系3D聊天室- 部屬Websocket專案到Fly.io - three.js + socket.io(四) 這裡是「Three.js學...
先跟著官網簡單的範例創建第一個3D場景，連接到 Day3 新增的按鈕 index.js 修改 index.js 新增當 day3 按鈕按下時指定呈現 day...
Three.js提供了各種輔助工具幫助開發 ArrowHelper 用於可視化方向的3D箭頭ArrowHelper(dir : Vector3, origi...
前一篇我們初步修改Shader，並且介紹GLSL的型別、函式、程式進入點、程式最終任務。 本篇將繼續介紹： 實作即時變化的環境光 實作即時變化的環境光：回顧...
本篇內容 vertexNormal 是什麼？ 兩個Shader之間的傳值方式 WebGLProgram 添加變數的特性 vertexNormal 從哪裡來？...
Day0 - 為什麼想要寫這個主題? 這裡是「Three.js學習日誌」的第0篇，本篇的主旨在於講述本次參賽的想法 心理的嚮往 四年前我剛成為前端工程師的時...
圖片來源 線段是什麼？ 點線面構成一切，而目前為止，我們都在花時間在點(Vector)跟面(Mesh)上。 線段由點產生，它也組成面，這之間需要轉換API。除...
成品 本篇我們將完成圖中的地球畫面，從介紹貼圖開始。 做一個地球可以幹嘛？——地球的應用 地球的應用：B2C應用 B2C主要是行銷網站、企業形象網站、活動網站...
Day27 - 打造質感系3D聊天室 - three.js + socket.io(五) 這裡是「Three.js學習日誌」的第27篇，這篇是「打造質感系3D...
伍瑪斯
Cian
Barry Lam
momochenisme
Ivan
Mizok
Yingge170
iThome鐵人賽
看影片追技術