作者 alphardex
alphardex，對 WebGL、Three.js 和 Shader 編程有濃厚的興趣。她的個人簡介中提到喜歡編碼、動漫、游戲和“可愛的東西”（kawaii mono），這也體現在她項目的命名上，比如 kokomi.js 的靈感來源于《原神》中的角色“珊瑚宮心海”（Sangonomiya Kokomi）。
一位穿梭在頂點著色器與動漫結界之間的技術魔女。
主頁
https://alphardex.netlify.app?
GitHub
https://github.com/alphardex
CODEPEN
https://codepen.io/alphardex
掘金專欄（某科學的three.js）
https://juejin.cn/column/6961386493579362312
開源 kokomi.js
介紹
kokomi.js 是一個基于 TypeScript 開發的 Three.js 輔助庫，旨在簡化 Web 3D 開發的流程。它通過封裝 Three.js 的常用功能，提供更高層次的抽象，讓開發者能夠更快速地搭建 3D 場景，同時保持代碼結構清晰、可復用性強。項目的 GitHub 描述是：“A growing three.js helper library”（一個不斷成長的 Three.js 輔助庫），目前已有 400+ 星標，表明它在社區中獲得了一定認可。
部分案例
模型展示
Shadertoy 集成
持續效應
渲染紋理
反射鏡
無限畫廊
https://kokomi-js.netlify.app/examples/
特點
模塊化設計
- 項目提供了諸如 Box、OrbitControls、AssetManager 等預封裝組件，開發者可以直接調用這些類來創建和管理 3D 元素。
- 通過繼承 kokomi.Base 類，開發者可以自定義場景邏輯，保持代碼的組織性。
資源管理
- AssetManager 類統一管理紋理、模型（如 GLTF）、字體等資源，支持異步加載，提升了復雜場景的開發效率。
易用性
- 提供簡潔的 API，例如 box.spin(time) 用于旋轉物體，OrbitControls 用于相機控制，降低了 Three.js 的學習曲線。
TypeScript 支持
- 項目使用 TypeScript 編寫，提供了類型定義，方便開發者在現代前端開發環境中獲得代碼補全和類型檢查的支持。
快速使用
npm i kokomi.js
- 由于它是基于 Three.js 的封裝庫，確保項目中已安裝 three：
npm i three
- 創建一個簡單的 3D 場景，包含一個旋轉的立方體：
kokomi.Base：基類，提供了場景、相機、渲染器等基礎設置。
kokomi.Box：封裝的立方體類，默認帶白色材質。
OrbitControls：鼠標控制相機旋轉和縮放。
update：每幀調用的更新函數，time 參數由內部時鐘提供。
import * as kokomi from"kokomi.js";
class Sketch extends kokomi.Base {
create() {
// 創建一個立方體
const box = new kokomi.Box(this);
box.addExisting(); // 將立方體添加到場景中
// 添加相機控制
new kokomi.OrbitControls(this);
// 更新函數：讓立方體旋轉
this.update((time) => {
box.spin(time);
});
}
}
// 初始化
const sketch = new Sketch();
sketch.create();
運行后，你會在瀏覽器中看到一個可交互的旋轉立方體：
使用 AssetManager 加載 3D 模型（例如 GLTF 格式的狐貍模型）：
AssetManager：異步加載資源，ready 事件觸發時表示加載完成。
資源類型：支持 texture（2D 貼圖）、cubeTexture（3D 貼圖）、gltfModel（模型）、font（字體）等。
import * as THREE from"three";
import * as kokomi from"kokomi.js";
// 定義資源列表
const resourceList = [
{ name: "foxModel", type: "gltfModel", path: "/models/Fox/glTF/Fox.gltf" },
];
class Sketch extends kokomi.Base {
create() {
// 設置相機位置
this.camera.position.set(6, 4, 3);
// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
this.scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
dirLight.position.set(1, 2, 3);
this.scene.add(dirLight);
// 加載資源
const assetManager = new kokomi.AssetManager(this, resourceList);
assetManager.emitter.on("ready", () => {
const foxModel = assetManager.items.foxModel;
foxModel.scene.scale.set(0.02, 0.02, 0.02); // 縮放模型
this.scene.add(foxModel.scene); // 添加到場景
});
// 添加相機控制
new kokomi.OrbitControls(this);
}
}
const sketch = new Sketch();
sketch.create();
// vite.config.js
import { defineConfig } from "vite";
export default defineConfig({
// 確保正確解析 .gltf 文件
assetsInclude: ["**/*.gltf"],
});
在線編程
https://kokomi-sandbox.netlify.app/
源碼
https://github.com/alphardex/kokomi.js
文檔
https://kokomi-docs.netlify.app/
最后
盡管文檔生態仍需完善，還有待加入更多高級特性，但kokomi.js 已展現出成為 Three.js 輕量化標桿工具的潛力，尤其適合對 Web 3D 感興趣的前端開發者嘗試。如果你正在探索 Three.js 或想快速實現一個 3D 項目，不妨試試這個庫！
閱讀原文：原文鏈接
該文章在 2025/4/22 16:43:42 編輯過
400 186 1886
