GitHub - YIBI2333/line-art-style-magic-cabin · GitHub
魔女的魔法小木屋
一个线稿风格的 3D 魔法小屋。
页面预览
操控一只软软的史莱姆在魔法小屋里生活
使用
- HTML—— 单HTML页面实现
- Three.js r128—— 场景、相机、几何体与渲染
- 原生 JavaScript—— 单个 HTML 文件、单个 IIFE
- 自定义 GLSL 着色器—— 全局 FILL 材质实现自然光效：壁炉炉火、二楼魔法吊灯、9 处室内点光源（坩埚魔火、魔法阵、暖桌、水晶球、蜡烛、星象仪等），物品随昼夜与天气自然变暗、被光照亮
- Canvas 动态贴图—— 路牌、便签、黑板、画像等可编辑内容
- Pointer Lock API—— 第一人称鼠标视角
玩法
- 三种视角切换：固定 / 第三人称 / 第一人称
- 昼夜循环，时刻与时间流速可调
- 七种天气：晴、多云、雾、雨、暴雨、雪、暴雪，支持随机轮换
- 室内光照可交互：壁炉、吊灯可点燃熄灭，光源强度随火焰闪烁
- 可编辑内容：路牌文字、便签文字、墙上画像的图片链接
- 楼内陈设：原木餐桌、暖桌、书架、大魔女坩埚、塔罗牌桌、大床、书桌、星象仪、月光盆栽……
操作
按键 动作 WASD / 方向键 移动 Shift 疾跑 空格 跳跃（可以跳上桌椅床凳） E 交互（门窗、壁炉、编辑文字） 1 / 2 空手 / 魔杖 鼠标 视角（第三 / 第一人称） Esc 退出鼠标锁定 右上角 ● 菜单 移动端：虚拟摇杆移动，右侧按钮为跳跃 / 交互 / 疾跑 / 施法。
运行
运行
index.html文件开源协议
MIT协议
内容是关于一个3D魔法小屋的HTML项目，包含Three.js、Shader、交互等。摘要要简洁概括。</think>基于Three.js构建的线框风格3D魔法小屋，支持第一/三人称视角与移动端操作，内置昼夜循环、七种天气及室内外动态光照，可交互壁炉、吊灯与可编辑文字贴图，包含史莱姆宠物及丰富家具陈设。
内容是关于一个3D魔法小屋的HTML项目，包含Three.js、Shader、交互等。摘要要简洁概括。</think>基于Three.js构建的线框风格3D魔法小屋，支持第一/三人称视角与移动端操作，内置昼夜循环、七种天气及室内外动态光照，可交互壁炉、吊灯与可编辑文字贴图，包含史莱姆宠物及丰富家具陈设。
内容是关于一个3D魔法小屋的HTML项目，包含Three.js、Shader、交互等。摘要要简洁概括。</think>基于Three.js构建的线框风格3D魔法小屋，支持第一/三人称视角与移动端操作，内置昼夜循环、七种天气及室内外动态光照，可交互壁炉、吊灯与可编辑文字贴图，包含史莱姆宠物及丰富家具陈设。
