作者 alphardex alphardex，對(duì) WebGL、Three.js 和 Shader 編程有濃厚的興趣。她的個(gè)人簡(jiǎn)介中提到喜歡編碼、動(dòng)漫、游戲和“可愛的東西”（kawaii mono），這也體現(xiàn)在她項(xiàng)目的命名上，比如 kokomi.js 的靈感來(lái)源于《原神》中的角色“珊瑚宮心海”（Sangonomiya Kokomi）。
一位穿梭在頂點(diǎn)著色器與動(dòng)漫結(jié)界之間的技術(shù)魔女。
主頁(yè) https://alphardex.netlify.app
GitHub https://github.com/alphardex
CODEPEN https://codepen.io/alphardex
掘金專欄（某科學(xué)的three.js） https://juejin.cn/column/6961386493579362312
開源 kokomi.js
介紹 kokomi.js 是一個(gè)基于 TypeScript 開發(fā)的 Three.js 輔助庫(kù)，旨在簡(jiǎn)化 Web 3D 開發(fā)的流程。它通過(guò)封裝 Three.js 的常用功能，提供更高層次的抽象，讓開發(fā)者能夠更快速地搭建 3D 場(chǎng)景，同時(shí)保持代碼結(jié)構(gòu)清晰、可復(fù)用性強(qiáng)。項(xiàng)目的 GitHub 描述是：“A growing three.js helper library”（一個(gè)不斷成長(zhǎng)的 Three.js 輔助庫(kù)），目前已有 400+ 星標(biāo)，表明它在社區(qū)中獲得了一定認(rèn)可。
部分案例 模型展示
Shadertoy 集成
持續(xù)效應(yīng)
渲染紋理
反射鏡
無(wú)限畫廊
https://kokomi-js.netlify.app/examples/
特點(diǎn) 模塊化設(shè)計(jì) 項(xiàng)目提供了諸如 Box、OrbitControls、AssetManager 等預(yù)封裝組件，開發(fā)者可以直接調(diào)用這些類來(lái)創(chuàng)建和管理 3D 元素。 通過(guò)繼承 kokomi.Base 類，開發(fā)者可以自定義場(chǎng)景邏輯，保持代碼的組織性。 資源管理 AssetManager 類統(tǒng)一管理紋理、模型（如 GLTF）、字體等資源，支持異步加載，提升了復(fù)雜場(chǎng)景的開發(fā)效率。 易用性 提供簡(jiǎn)潔的 API，例如 box.spin(time) 用于旋轉(zhuǎn)物體，OrbitControls 用于相機(jī)控制，降低了 Three.js 的學(xué)習(xí)曲線。 TypeScript 支持 項(xiàng)目使用 TypeScript 編寫，提供了類型定義，方便開發(fā)者在現(xiàn)代前端開發(fā)環(huán)境中獲得代碼補(bǔ)全和類型檢查的支持。 快速使用 npm i kokomi.js 由于它是基于 Three.js 的封裝庫(kù)，確保項(xiàng)目中已安裝 three： npm i three 創(chuàng)建一個(gè)簡(jiǎn)單的 3D 場(chǎng)景，包含一個(gè)旋轉(zhuǎn)的立方體： kokomi.Base：基類，提供了場(chǎng)景、相機(jī)、渲染器等基礎(chǔ)設(shè)置。
kokomi.Box：封裝的立方體類，默認(rèn)帶白色材質(zhì)。
OrbitControls：鼠標(biāo)控制相機(jī)旋轉(zhuǎn)和縮放。
update：每幀調(diào)用的更新函數(shù)，time 參數(shù)由內(nèi)部時(shí)鐘提供。
import * as kokomi from "kokomi.js" ; class Sketch extends kokomi . Base { create() { // 創(chuàng)建一個(gè)立方體 const box = new kokomi.Box( this ); box.addExisting(); // 將立方體添加到場(chǎng)景中 // 添加相機(jī)控制 new kokomi.OrbitControls( this ); // 更新函數(shù)：讓立方體旋轉(zhuǎn) this .update( ( time ) => { box.spin(time); }); } } // 初始化 const sketch = new Sketch(); sketch.create(); 運(yùn)行后，你會(huì)在瀏覽器中看到一個(gè)可交互的旋轉(zhuǎn)立方體：
使用 AssetManager 加載 3D 模型（例如 GLTF 格式的狐貍模型）：
AssetManager：異步加載資源，ready 事件觸發(fā)時(shí)表示加載完成。
資源類型：支持 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() { // 設(shè)置相機(jī)位置 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); // 添加到場(chǎng)景 }); // 添加相機(jī)控制 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/
最后 盡管文檔生態(tài)仍需完善，還有待加入更多高級(jí)特性，但kokomi.js 已展現(xiàn)出成為 Three.js 輕量化標(biāo)桿工具的潛力，尤其適合對(duì) Web 3D 感興趣的前端開發(fā)者嘗試。如果你正在探索 Three.js 或想快速實(shí)現(xiàn)一個(gè) 3D 項(xiàng)目，不妨試試這個(gè)庫(kù)！
閱讀原文：原文鏈接
400 186 1886
