https://github.com/alfo0924/3ddesignandeffect

3dDesignAndEffect 一個以可放大縮小、360度旋轉的3D狐狸為主題的網頁 base on fundamental frontend : html /css /js
https://github.com/alfo0924/3ddesignandeffect

3d 3d-models css fox fox3d js

Last synced: 3 months ago
JSON representation

3dDesignAndEffect 一個以可放大縮小、360度旋轉的3D狐狸為主題的網頁 base on fundamental frontend : html /css /js

• Host: GitHub
• URL: https://github.com/alfo0924/3ddesignandeffect
• Owner: alfo0924
• Created: 2025-05-13T15:20:17.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-13T15:41:19.000Z (about 1 year ago)
• Last Synced: 2025-06-02T01:59:45.227Z (about 1 year ago)
• Topics: 3d, 3d-models, css, fox, fox3d, js
• Language: JavaScript
• Homepage: https://alfo0924.github.io/3dDesignAndEffect/
• Size: 31.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
3dDesignAndEffect

## 網站分析

這是一個以展示單一3D模型（預期是狐狸）為核心的互動式網頁。它利用現代網頁技術，讓使用者可以直接在瀏覽器中與3D物件進行互動。

### 網站特點

1.  **互動式3D模型展示**：核心功能是載入一個3D狐狸模型，使用者可以透過滑鼠操作進行360度旋轉和遠近縮放。

2.  **真實感渲染**：

    *   **光照效果**：使用了環境光（AmbientLight）提供基礎照明，並用平行光（DirectionalLight）模擬類似太陽光的效果，產生方向性和更豐富的明暗對比。

    *   **陰影投射**：模型能夠將陰影投射到下方的地面（PlaneGeometry）上，增加了場景的深度和真實感。

3.  **簡潔的使用者介面**：

    *   **操作提示**：在畫面頂部有明確的文字提示，引導使用者如何操作（滑鼠拖曳旋轉，滾輪縮放）。

    *   **全螢幕畫布**：3D場景佔據整個瀏覽器視窗，提供沉浸式體驗。

    *   **游標變化**：在可拖曳的畫布上，滑鼠游標會變為「抓取」手勢，增強互動提示。

4.  **響應式設計**：網頁能自動適應瀏覽器視窗大小的變化，保持3D模型顯示的正確比例和渲染區域。

5.  **技術前瞻性**：採用了 Three.js 這個主流的 WebGL 函式庫，代表了現代網頁3D圖形技術的應用。

6.  **模型載入與處理**：

    *   使用 GLTFLoader 載入業界標準的 `.gltf` 或 `.glb` 格式的3D模型。

    *   程式碼中包含了模型載入後的自動化處理邏輯，如計算模型邊界、將模型置於場景中心並放置在地面上、自動調整攝影機視角以完整顯示模型。

    *   遍歷模型節點以啟用陰影投射。

### 網站優點

1.  **高度互動性與參與感**：使用者不再是被動觀看，而是可以主動探索模型的各個角度和細節，大大提升了參與感和趣味性。

2.  **提升產品/作品展示效果**：對於需要展示實物細節的產品（如玩具、工藝品、工業零件）或3D藝術作品，這種方式遠勝於靜態圖片或影片。

3.  **沉浸式視覺體驗**：良好的光影和3D空間感能給使用者帶來更深刻的印象。

4.  **直觀易懂的操作**：滑鼠拖曳和滾輪縮放是使用者普遍熟悉的操作方式，學習成本低。

5.  **跨平台兼容性**：基於網頁技術，只要有支援WebGL的現代瀏覽器（PC、平板甚至部分手機），就能訪問和互動。

6.  **易於嵌入與分享**：作為一個網頁，它可以輕易地嵌入到其他網站中，或透過連結分享。

### 使用者族群

這個網站（或類似技術）非常適合以下族群：

1.  **電商平台/品牌方**：希望以更生動的方式展示其產品，尤其是玩具、模型、收藏品、客製化商品等。

2.  **3D藝術家/設計師**：需要一個平台來展示他們的3D建模作品集。

3.  **教育機構/博物館**：用於展示3D化的教學模型、文物、生物標本等，提供互動學習體驗。

4.  **遊戲開發者/工作室**：在宣傳或開發過程中預覽遊戲角色、道具等3D資產。

5.  **建築/室內設計師**：初步展示建築或空間的3D模型。

6.  **任何需要進行3D物件細節展示的個人或企業**。

## 程式碼原理及運作邏輯

這個網站的核心運作依賴於 HTML、CSS 和 JavaScript (Three.js)。

### HTML (index.html)

*   **結構搭建**：

    *   ``：定義文件類型。

    *   `` 和 ``：設定編碼和視口，確保跨裝置的正確顯示。

    *   ``：網頁標題。

    *   ``：引入CSS樣式表。

    *   `...`：顯示操作提示的區塊。

    *   ``：這是最重要的元素，Three.js 將會在這個畫布上繪製3D場景。

    *   `` 標籤：

        *   依序引入 Three.js 核心庫 (`three.min.js`)、GLTF模型載入器 (`GLTFLoader.js`)、軌道控制器 (`OrbitControls.js`)。這些是外部函式庫，提供了3D渲染、模型載入和互動控制的功能。

        *   最後引入我們自己編寫的邏輯腳本 `app.js`。

### CSS (style.css)

*   **視覺表現**：

    *   `body, html`：移除了預設的邊距和內邊距，設定背景色，並透過 `overflow: hidden` 防止因畫布超出視窗而出現滾動條。

    *   `#bearCanvas`：設定畫布佔滿整個視窗 (`width: 100%; height: 100%;`)，並改變滑鼠游標樣式以提示互動。

    *   `#instructions`：設定操作提示區塊的樣式，如背景、邊框、定位（使其懸浮在畫布上方中央）。

### JavaScript (app.js) - 核心邏輯

這是網站功能的核心，它使用 Three.js 函式庫來實現3D場景的創建、渲染和互動。

1.  **初始化 (DOM載入完成後)**：

    *   透過 `document.addEventListener('DOMContentLoaded', ...)` 確保在HTML結構完全載入後才執行腳本。

    *   獲取 `` 元素。

2.  **Three.js 基本組件設定**：

    *   **場景 (Scene)**：`const scene = new THREE.Scene();`

        *   創建一個場景物件，它是所有3D物體、光源、攝影機的容器。

        *   `scene.background = new THREE.Color(0xd3e0ea);` 設定場景的背景顏色。

    *   **攝影機 (Camera)**：`const camera = new THREE.PerspectiveCamera(...);`

        *   創建一個透視攝影機，模擬人眼視覺。參數包括：視野角度(FOV)、長寬比(aspect ratio)、近裁剪面(near)、遠裁剪面(far)。

        *   `camera.position.set(0, 1.5, 7);` 設定攝影機的初始位置。

    *   **渲染器 (Renderer)**：`const renderer = new THREE.WebGLRenderer(...);`

        *   創建WebGL渲染器，它負責將攝影機看到的場景內容繪製到HTML的``上。

        *   `renderer.setSize(...)`：設定渲染尺寸。

        *   `renderer.setPixelRatio(...)`：處理高DPI螢幕的像素比。

        *   `renderer.shadowMap.enabled = true;`：啟用陰影貼圖功能，這是實現陰影的基礎。

3.  **光源 (Light)**：

    *   **環境光 (AmbientLight)**：`new THREE.AmbientLight(0xffffff, 0.7);` 提供均勻的、無方向性的基礎光照，使場景中沒有被直接照射的區域也不會完全黑暗。

    *   **平行光 (DirectionalLight)**：`new THREE.DirectionalLight(0xffffff, 0.9);` 模擬遠處光源（如太陽），光線是平行的。

        *   `directionalLight.position.set(...)`：設定光源方向（從該位置照向原點）。

        *   `directionalLight.castShadow = true;`：使此光源能夠投射陰影。

        *   `directionalLight.shadow.mapSize.width/height` 等屬性：配置陰影的品質和範圍。

4.  **輔助物件 (如地面)**：

    *   `const planeGeometry = new THREE.PlaneGeometry(30, 30);`：創建一個平面幾何體。

    *   `const planeMaterial = new THREE.MeshStandardMaterial(...);`：創建標準物理材質。

    *   `const groundPlane = new THREE.Mesh(planeGeometry, planeMaterial);`：組合成一個網格物件（Mesh）。

    *   `groundPlane.rotation.x = -Math.PI / 2;`：將平面旋轉使其水平。

    *   `groundPlane.position.y = 0;`：設定地面位置。

    *   `groundPlane.receiveShadow = true;`：使該平面能夠接收其他物體投射的陰影。

5.  **3D模型載入 (GLTFLoader)**：

    *   `const loader = new THREE.GLTFLoader();`：創建GLTF載入器實例。

    *   `loader.load(modelPath, onLoad, onProgress, onError);`：異步載入模型。

        *   `modelPath`：3D模型檔案的路徑 (在此範例中是一個公開的狐狸模型，使用者應替換成自己的狐狸模型路徑)。

        *   `onLoad (gltf => { ... })` (成功回調)：

            *   `model = gltf.scene;`：獲取載入的模型場景根物件。

            *   **模型處理**：

                *   計算包圍盒 (`THREE.Box3().setFromObject(model)`) 以獲取模型的中心點和尺寸。

                *   根據中心點和尺寸調整模型位置，使其居中並正確放置在地面上。

                *   `model.traverse(node => { if (node.isMesh) node.castShadow = true; });`：遍歷模型的所有網格部分，設定它們都能投射陰影。

                *   `scene.add(model);`：將處理好的模型添加到主場景中。

                *   **攝影機與控制器調整**：根據載入模型的大小和位置，動態調整攝影機的最終位置和`OrbitControls`的目標點、縮放限制，以確保模型完整可見且互動體驗良好。

        *   `onProgress (xhr => { ... })` (進度回調)：顯示模型載入進度。

        *   `onError (error => { ... })` (錯誤回調)：處理載入失敗的情況。

6.  **互動控制 (OrbitControls)**：

    *   `const controls = new THREE.OrbitControls(camera, renderer.domElement);`

        *   將攝影機和渲染器的DOM元素（即``）關聯起來，實現軌道控制。

        *   `controls.enableDamping = true;`：啟用阻尼（慣性），使拖曳旋轉停止時有平滑過渡效果。

        *   `controls.target.set(0, 1, 0);`：設定攝影機圍繞旋轉的目標點（後續會被模型位置覆蓋）。

        *   其他屬性如 `minDistance`, `maxDistance` 控制縮放範圍。

7.  **動畫迴圈 (Animation Loop)**：

    *   `function animate() { ... }`：定義一個持續執行的函數。

    *   `requestAnimationFrame(animate);`：瀏覽器提供的API，請求在下一次重繪之前調用`animate`函數。這樣就形成了一個高效的動畫迴圈 (通常約60幀/秒)。

    *   `controls.update();`：如果啟用了阻尼，則必須在動畫循環中調用此方法來更新控制器狀態。

    *   `renderer.render(scene, camera);`：**核心渲染步驟**。在每一幀，渲染器都會根據當前攝影機的視角重新繪製整個場景。

8.  **響應式處理 (Window Resize)**：

    *   `window.addEventListener('resize', () => { ... });`：監聽瀏覽器視窗大小改變事件。

    *   當視窗大小改變時：

        *   更新攝影機的長寬比 (`camera.aspect`)。

        *   更新攝影機的投影矩陣 (`camera.updateProjectionMatrix()`)。

        *   更新渲染器的尺寸 (`renderer.setSize(...)`) 和像素比。

        *   這樣可以確保3D場景在不同視窗大小下都能正確顯示，不會變形。

**運作邏輯總結**：

1.  HTML載入，引入CSS和JavaScript檔案。

2.  `app.js` 開始執行，初始化Three.js場景、攝影機、渲染器、光源和地面。

3.  GLTFLoader開始異步載入指定的3D模型。

4.  同時，OrbitControls被初始化，允許使用者開始與（尚空曠的）場景互動。

5.  `animate` 函數開始執行，形成動畫迴圈，不斷渲染場景。

6.  當3D模型載入完成後：

    *   模型被處理（調整大小、位置、陰影設定）並加入到場景中。

    *   攝影機和OrbitControls的目標點被調整以聚焦於模型。

7.  此時，使用者可以在 `animate` 迴圈的不斷渲染下，透過OrbitControls提供的滑鼠操作（拖曳旋轉、滾輪縮放）與3D模型進行實時互動。

8.  如果使用者調整瀏覽器視窗大小，resize事件處理器會更新攝影機和渲染器設置，保持顯示正常。

這個流程構成了一個動態、互動的3D網頁體驗。

---