{"id":28323925,"url":"https://github.com/alfo0924/3ddesignandeffect","last_synced_at":"2026-05-03T13:43:07.762Z","repository":{"id":293086579,"uuid":"982905361","full_name":"alfo0924/3dDesignAndEffect","owner":"alfo0924","description":"3dDesignAndEffect 一個以可放大縮小、360度旋轉的3D狐狸為主題的網頁  base on fundamental frontend : html /css /js ","archived":false,"fork":false,"pushed_at":"2025-05-13T15:41:19.000Z","size":32,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-02T01:59:45.227Z","etag":null,"topics":["3d","3d-models","css","fox","fox3d","js"],"latest_commit_sha":null,"homepage":"https://alfo0924.github.io/3dDesignAndEffect/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alfo0924.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-13T15:20:17.000Z","updated_at":"2025-05-13T15:43:05.000Z","dependencies_parsed_at":"2025-05-13T16:40:26.226Z","dependency_job_id":"069a64df-162c-40db-8926-7797ab17e777","html_url":"https://github.com/alfo0924/3dDesignAndEffect","commit_stats":null,"previous_names":["alfo0924/3ddesignandeffect"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alfo0924/3dDesignAndEffect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfo0924%2F3dDesignAndEffect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfo0924%2F3dDesignAndEffect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfo0924%2F3dDesignAndEffect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfo0924%2F3dDesignAndEffect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alfo0924","download_url":"https://codeload.github.com/alfo0924/3dDesignAndEffect/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfo0924%2F3dDesignAndEffect/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261586260,"owners_count":23181069,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","3d-models","css","fox","fox3d","js"],"created_at":"2025-05-25T17:09:09.766Z","updated_at":"2026-05-03T13:43:07.719Z","avatar_url":"https://github.com/alfo0924.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://alfo0924.github.io/3dDesignAndEffect/\"\u003e3dDesignAndEffect\u003c/a\u003e\n## 網站分析\n\n這是一個以展示單一3D模型（預期是狐狸）為核心的互動式網頁。它利用現代網頁技術，讓使用者可以直接在瀏覽器中與3D物件進行互動。\n\n### 網站特點\n\n1.  **互動式3D模型展示**：核心功能是載入一個3D狐狸模型，使用者可以透過滑鼠操作進行360度旋轉和遠近縮放。\n2.  **真實感渲染**：\n    *   **光照效果**：使用了環境光（AmbientLight）提供基礎照明，並用平行光（DirectionalLight）模擬類似太陽光的效果，產生方向性和更豐富的明暗對比。\n    *   **陰影投射**：模型能夠將陰影投射到下方的地面（PlaneGeometry）上，增加了場景的深度和真實感。\n3.  **簡潔的使用者介面**：\n    *   **操作提示**：在畫面頂部有明確的文字提示，引導使用者如何操作（滑鼠拖曳旋轉，滾輪縮放）。\n    *   **全螢幕畫布**：3D場景佔據整個瀏覽器視窗，提供沉浸式體驗。\n    *   **游標變化**：在可拖曳的畫布上，滑鼠游標會變為「抓取」手勢，增強互動提示。\n4.  **響應式設計**：網頁能自動適應瀏覽器視窗大小的變化，保持3D模型顯示的正確比例和渲染區域。\n5.  **技術前瞻性**：採用了 Three.js 這個主流的 WebGL 函式庫，代表了現代網頁3D圖形技術的應用。\n6.  **模型載入與處理**：\n    *   使用 GLTFLoader 載入業界標準的 `.gltf` 或 `.glb` 格式的3D模型。\n    *   程式碼中包含了模型載入後的自動化處理邏輯，如計算模型邊界、將模型置於場景中心並放置在地面上、自動調整攝影機視角以完整顯示模型。\n    *   遍歷模型節點以啟用陰影投射。\n\n### 網站優點\n\n1.  **高度互動性與參與感**：使用者不再是被動觀看，而是可以主動探索模型的各個角度和細節，大大提升了參與感和趣味性。\n2.  **提升產品/作品展示效果**：對於需要展示實物細節的產品（如玩具、工藝品、工業零件）或3D藝術作品，這種方式遠勝於靜態圖片或影片。\n3.  **沉浸式視覺體驗**：良好的光影和3D空間感能給使用者帶來更深刻的印象。\n4.  **直觀易懂的操作**：滑鼠拖曳和滾輪縮放是使用者普遍熟悉的操作方式，學習成本低。\n5.  **跨平台兼容性**：基於網頁技術，只要有支援WebGL的現代瀏覽器（PC、平板甚至部分手機），就能訪問和互動。\n6.  **易於嵌入與分享**：作為一個網頁，它可以輕易地嵌入到其他網站中，或透過連結分享。\n\n### 使用者族群\n\n這個網站（或類似技術）非常適合以下族群：\n\n1.  **電商平台/品牌方**：希望以更生動的方式展示其產品，尤其是玩具、模型、收藏品、客製化商品等。\n2.  **3D藝術家/設計師**：需要一個平台來展示他們的3D建模作品集。\n3.  **教育機構/博物館**：用於展示3D化的教學模型、文物、生物標本等，提供互動學習體驗。\n4.  **遊戲開發者/工作室**：在宣傳或開發過程中預覽遊戲角色、道具等3D資產。\n5.  **建築/室內設計師**：初步展示建築或空間的3D模型。\n6.  **任何需要進行3D物件細節展示的個人或企業**。\n\n## 程式碼原理及運作邏輯\n\n這個網站的核心運作依賴於 HTML、CSS 和 JavaScript (Three.js)。\n\n### HTML (index.html)\n\n*   **結構搭建**：\n    *   ``：定義文件類型。\n    *   `` 和 ``：設定編碼和視口，確保跨裝置的正確顯示。\n    *   ``：網頁標題。\n    *   ``：引入CSS樣式表。\n    *   `...`：顯示操作提示的區塊。\n    *   ``：這是最重要的元素，Three.js 將會在這個畫布上繪製3D場景。\n    *   `` 標籤：\n        *   依序引入 Three.js 核心庫 (`three.min.js`)、GLTF模型載入器 (`GLTFLoader.js`)、軌道控制器 (`OrbitControls.js`)。這些是外部函式庫，提供了3D渲染、模型載入和互動控制的功能。\n        *   最後引入我們自己編寫的邏輯腳本 `app.js`。\n\n### CSS (style.css)\n\n*   **視覺表現**：\n    *   `body, html`：移除了預設的邊距和內邊距，設定背景色，並透過 `overflow: hidden` 防止因畫布超出視窗而出現滾動條。\n    *   `#bearCanvas`：設定畫布佔滿整個視窗 (`width: 100%; height: 100%;`)，並改變滑鼠游標樣式以提示互動。\n    *   `#instructions`：設定操作提示區塊的樣式，如背景、邊框、定位（使其懸浮在畫布上方中央）。\n\n### JavaScript (app.js) - 核心邏輯\n\n這是網站功能的核心，它使用 Three.js 函式庫來實現3D場景的創建、渲染和互動。\n\n1.  **初始化 (DOM載入完成後)**：\n    *   透過 `document.addEventListener('DOMContentLoaded', ...)` 確保在HTML結構完全載入後才執行腳本。\n    *   獲取 `` 元素。\n\n2.  **Three.js 基本組件設定**：\n    *   **場景 (Scene)**：`const scene = new THREE.Scene();`\n        *   創建一個場景物件，它是所有3D物體、光源、攝影機的容器。\n        *   `scene.background = new THREE.Color(0xd3e0ea);` 設定場景的背景顏色。\n    *   **攝影機 (Camera)**：`const camera = new THREE.PerspectiveCamera(...);`\n        *   創建一個透視攝影機，模擬人眼視覺。參數包括：視野角度(FOV)、長寬比(aspect ratio)、近裁剪面(near)、遠裁剪面(far)。\n        *   `camera.position.set(0, 1.5, 7);` 設定攝影機的初始位置。\n    *   **渲染器 (Renderer)**：`const renderer = new THREE.WebGLRenderer(...);`\n        *   創建WebGL渲染器，它負責將攝影機看到的場景內容繪製到HTML的``上。\n        *   `renderer.setSize(...)`：設定渲染尺寸。\n        *   `renderer.setPixelRatio(...)`：處理高DPI螢幕的像素比。\n        *   `renderer.shadowMap.enabled = true;`：啟用陰影貼圖功能，這是實現陰影的基礎。\n\n3.  **光源 (Light)**：\n    *   **環境光 (AmbientLight)**：`new THREE.AmbientLight(0xffffff, 0.7);` 提供均勻的、無方向性的基礎光照，使場景中沒有被直接照射的區域也不會完全黑暗。\n    *   **平行光 (DirectionalLight)**：`new THREE.DirectionalLight(0xffffff, 0.9);` 模擬遠處光源（如太陽），光線是平行的。\n        *   `directionalLight.position.set(...)`：設定光源方向（從該位置照向原點）。\n        *   `directionalLight.castShadow = true;`：使此光源能夠投射陰影。\n        *   `directionalLight.shadow.mapSize.width/height` 等屬性：配置陰影的品質和範圍。\n\n4.  **輔助物件 (如地面)**：\n    *   `const planeGeometry = new THREE.PlaneGeometry(30, 30);`：創建一個平面幾何體。\n    *   `const planeMaterial = new THREE.MeshStandardMaterial(...);`：創建標準物理材質。\n    *   `const groundPlane = new THREE.Mesh(planeGeometry, planeMaterial);`：組合成一個網格物件（Mesh）。\n    *   `groundPlane.rotation.x = -Math.PI / 2;`：將平面旋轉使其水平。\n    *   `groundPlane.position.y = 0;`：設定地面位置。\n    *   `groundPlane.receiveShadow = true;`：使該平面能夠接收其他物體投射的陰影。\n\n5.  **3D模型載入 (GLTFLoader)**：\n    *   `const loader = new THREE.GLTFLoader();`：創建GLTF載入器實例。\n    *   `loader.load(modelPath, onLoad, onProgress, onError);`：異步載入模型。\n        *   `modelPath`：3D模型檔案的路徑 (在此範例中是一個公開的狐狸模型，使用者應替換成自己的狐狸模型路徑)。\n        *   `onLoad (gltf =\u003e { ... })` (成功回調)：\n            *   `model = gltf.scene;`：獲取載入的模型場景根物件。\n            *   **模型處理**：\n                *   計算包圍盒 (`THREE.Box3().setFromObject(model)`) 以獲取模型的中心點和尺寸。\n                *   根據中心點和尺寸調整模型位置，使其居中並正確放置在地面上。\n                *   `model.traverse(node =\u003e { if (node.isMesh) node.castShadow = true; });`：遍歷模型的所有網格部分，設定它們都能投射陰影。\n                *   `scene.add(model);`：將處理好的模型添加到主場景中。\n                *   **攝影機與控制器調整**：根據載入模型的大小和位置，動態調整攝影機的最終位置和`OrbitControls`的目標點、縮放限制，以確保模型完整可見且互動體驗良好。\n        *   `onProgress (xhr =\u003e { ... })` (進度回調)：顯示模型載入進度。\n        *   `onError (error =\u003e { ... })` (錯誤回調)：處理載入失敗的情況。\n\n6.  **互動控制 (OrbitControls)**：\n    *   `const controls = new THREE.OrbitControls(camera, renderer.domElement);`\n        *   將攝影機和渲染器的DOM元素（即``）關聯起來，實現軌道控制。\n        *   `controls.enableDamping = true;`：啟用阻尼（慣性），使拖曳旋轉停止時有平滑過渡效果。\n        *   `controls.target.set(0, 1, 0);`：設定攝影機圍繞旋轉的目標點（後續會被模型位置覆蓋）。\n        *   其他屬性如 `minDistance`, `maxDistance` 控制縮放範圍。\n\n7.  **動畫迴圈 (Animation Loop)**：\n    *   `function animate() { ... }`：定義一個持續執行的函數。\n    *   `requestAnimationFrame(animate);`：瀏覽器提供的API，請求在下一次重繪之前調用`animate`函數。這樣就形成了一個高效的動畫迴圈 (通常約60幀/秒)。\n    *   `controls.update();`：如果啟用了阻尼，則必須在動畫循環中調用此方法來更新控制器狀態。\n    *   `renderer.render(scene, camera);`：**核心渲染步驟**。在每一幀，渲染器都會根據當前攝影機的視角重新繪製整個場景。\n\n8.  **響應式處理 (Window Resize)**：\n    *   `window.addEventListener('resize', () =\u003e { ... });`：監聽瀏覽器視窗大小改變事件。\n    *   當視窗大小改變時：\n        *   更新攝影機的長寬比 (`camera.aspect`)。\n        *   更新攝影機的投影矩陣 (`camera.updateProjectionMatrix()`)。\n        *   更新渲染器的尺寸 (`renderer.setSize(...)`) 和像素比。\n        *   這樣可以確保3D場景在不同視窗大小下都能正確顯示，不會變形。\n\n**運作邏輯總結**：\n1.  HTML載入，引入CSS和JavaScript檔案。\n2.  `app.js` 開始執行，初始化Three.js場景、攝影機、渲染器、光源和地面。\n3.  GLTFLoader開始異步載入指定的3D模型。\n4.  同時，OrbitControls被初始化，允許使用者開始與（尚空曠的）場景互動。\n5.  `animate` 函數開始執行，形成動畫迴圈，不斷渲染場景。\n6.  當3D模型載入完成後：\n    *   模型被處理（調整大小、位置、陰影設定）並加入到場景中。\n    *   攝影機和OrbitControls的目標點被調整以聚焦於模型。\n7.  此時，使用者可以在 `animate` 迴圈的不斷渲染下，透過OrbitControls提供的滑鼠操作（拖曳旋轉、滾輪縮放）與3D模型進行實時互動。\n8.  如果使用者調整瀏覽器視窗大小，resize事件處理器會更新攝影機和渲染器設置，保持顯示正常。\n\n這個流程構成了一個動態、互動的3D網頁體驗。\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfo0924%2F3ddesignandeffect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falfo0924%2F3ddesignandeffect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfo0924%2F3ddesignandeffect/lists"}