3D PORTFOLIO UNIVERSE 五大多维风格展厅

多维视觉语言 · 独立 3D 渲染 · 丰富动效与组件库

五大差异化设计语言 · 独立完整 3D 渲染 · 丰富动效与交互组件库

探索五大极致风格的
3D 多维个人作品集网站

每一个网站都具备专属的中文文案、独立的 Three.js 3D 场景、Web Audio 实时声音合成器、丰富的交互组件库(终端模拟器、Bento Grid、磁带播放机、控制滑块、模态抽屉与星系图谱)。

05
完全独立视觉风格
赛博 / 侘寂 / 蒸汽波 / 苹果 / 星系
60 FPS
WebGL 3D 物理渲染
Three.js 深度定制着色
28+
定制高阶交互组件
CLI终端 / 磁带机 / 抽屉 / HUD
Web Audio
内置程序化音效合成
8-bit / 铜钵 / 氛围低音 / 脉冲
交互式网站展厅

五套独立风格网站入口与深度解析

风格 01 // 极客黑客赛博朋克风

KAIZEN // 0xNEO

硬核赛博朋克与量子架构师风格。多层 HUD 瞄准准星、扫描线滤镜切换、动态打字机、全功能中文 CLI 命令行终端(支持 help, matrix, bio, warp, audio 指令)。

▸ 3D 核心:交互式量子陀螺环 + 1200 粒子矩阵
▸ 专属组件:CLI 终端机、HUD 遥测仪、技能雷达矩阵
▸ 色彩系统:深渊黑 / 霓虹青 / 荧光粉 / 骇客绿
立即体验站点 1
赛博量子系统实时预览 THREE.JS R128 着色器
01. 3D 量子核心
支持鼠标拖拽旋转、惯性衰减、一键 WARP 能量脉冲缩放动效。
02. 命令行交互终端
交互式 Shell,具备矩阵代码雨动画、音频触发与命令解析。
03. 赛博音频合成
Web Audio 双振荡器低频 Drone 发生器与交互蜂鸣音效。
风格 02 // 极简日式侘寂与建筑空间

KENZO MORI // 森 健三

极致留白、和纸微质感、衬线体排版与侘寂美学。探寻建筑之「間(MA)」与光影虚实,配有藏传颂钵清脆音效与右侧滑动抽屉。

▸ 3D 核心:有机流动原石雕塑 (石/丝绸水/陶土材质切换)
▸ 专属组件:颂钵声音钟、侘寂四支柱卡片、全屏案例视窗
▸ 色彩系统:暖和纸白 / 炭黑 / 赭石陶土 / 苔藓灰
立即体验站点 2
侘寂空间建筑档案 京都 · 东京工作室
01. 3D 原石雕塑
实时计算多级法线高光,支持一键切换石质、液态丝绸与陶土材质。
02. 禅意藏传铜钵
利用多重谐波叠加物理衰减曲线,模拟真实铜钵空灵回响。
03. 优雅右侧滑入抽屉
无缝平滑滑动交互,提供极简纸感设计咨询表单。
风格 03 // 80年代复古蒸汽波与街机

MAX RADICAL // 1984

热血80年代街机与独立游戏设计师风格。CRT 电视扫描线、铬合金高光、投币特效、双轴磁带随身听与实时像素小游戏。

▸ 3D 核心:无尽 Outrun 霓虹网格公路 + 巨型太阳 + 悬浮德罗宁
▸ 专属组件:实体磁带机(转轴动画)、氮气加速、街机反应小游戏
▸ 色彩系统:落日紫 / 霓虹粉 / 电子青 / 投币金
立即体验站点 3
OUTRUN 街机引擎 1984 投币入局 [1/2]
01. 3D 动态网格地貌
无限滚动的霓虹公路与山脉起伏,支持鼠标实时变道转向。
02. 磁带机随身听
包含物理齿轮旋转动画、切歌、杜比降噪模拟与音效触发。
03. 街机反应小游戏
竞技场中点击跳动霓虹靶标累积高分与连击倍率,带 8-bit 声效。
风格 04 // 苹果空间计算与液态金属 Bento

ALEXA VANCE // SPATIAL

VisionOS 空间拟物与液态金属质感。动态岛导航栏、高斯模糊 Bento Grid 模块、触感反馈音板、库比蒂诺实时世界时钟与物理控制滑块。

▸ 3D 核心:交互式液态金属球 (物理波浪形变 + 光泽度调节)
▸ 专属组件:动态岛胶囊栏、Bento 模块网格、空间控制中心滑块
▸ 色彩系统:深空黑 / 极光紫 / 电光水绿 / 磨砂玻璃白
立即体验站点 4
VISIONOS 空间 BENTO 套件 液态金属着色器
01. 3D 液态金属球
高密度细分顶点实时置换计算,支持水银黏度与光洁度滑块微调。
02. 触感反馈音板
模拟 Apple 设备拟物微按键回馈音(523Hz / 659Hz / 783Hz)。
03. 模块化 Bento 栅格
弹性悬浮卡片、库比蒂诺实时世界时钟与技术栈胶囊阵列。
风格 05 // 深空星系与天体物理探索

DR. AURELIA VOSS

天体物理与深空天文观测站风格。JWST 望远镜遥测、螺旋星云粒子群、行星公转交互、时间膨胀滑块控制器与梅西耶天体检索器。

▸ 3D 核心:多行星公转太阳系 + 2000 螺旋旋臂星尘
▸ 专属组件:行星一键近距巡检、天体星表检索、射电脉冲发生器
▸ 色彩系统:深空玄黑 / 恒星金 / 星云紫 / 极光天蓝
立即体验站点 5
韦伯深空天文台观测 天鹅座天区遥测
01. 3D 行星公转系统
中央恒星发光电晕,四颗轨道行星与螺旋星云对数散布星尘。
02. 时间膨胀与相机巡游
滑动滑块调节 0.2x~3.0x 运行速率,相机支持平滑聚焦飞越。
03. 星表实时过滤检索
实时检索仙女座、猎户座星云与脉冲星数据,带射电望远镜音效。
组件库完整对比矩阵

跨五大站点的丰富组件库矩阵

每个站点均针对自身视觉主题定制了专门的组件生态,兼顾交互趣味性与工程实用度。

组件分类 站点 1 (赛博朋克) 站点 2 (极简日式) 站点 3 (复古蒸汽波) 站点 4 (苹果空间) 站点 5 (深空星系)
3D WebGL 实体 量子陀螺核心+粒子云 有机流动原石雕塑 无尽 Outrun 霓虹网格 液态金属变形球 行星公转+螺旋星云
专属核心交互 CLI 命令行终端模拟器 石/丝绸水/陶土材质切换 实体磁带机+小游戏 粘度/光泽控制中心滑块 时间膨胀调节+行星巡游
音频合成发生器 双振荡器赛博低音 Drone 藏传物理铜钵长回响 80s 经典合成器贝斯琶音 触感按键回馈音板 脉冲星周期性射电音效
导航栏体系 HUD 准星+遥测状态条 和纸半透明悬浮极简栏 投币街机状态顶级栏 VisionOS 悬浮动态岛 天文台赤道坐标 HUD 栏
展示与弹出组件 折角赛博弹窗模态框 右侧全高平滑滑出抽屉 CRT 监视器游戏卡片 毛玻璃 VisionOS 浮窗 天体研究论文归档浮层
表单反馈系统 密文广播与解密动画 日式纸感咨询递交 80s 街机留言板 空间协作邮件联络 深空射电下行信号发射

原生轻量 · 开箱即用 · 零构建门槛

所有 5 个网站和本 Master Hub 均采用独立单文件 HTML 架构,基于 CDN 引入 Three.js、GSAP、Tailwind CSS 与 Lucide 图标,支持双击直接在任意现代浏览器中运行,无需繁琐的 npm build 或打包编译。

Three.js r128 3D 渲染 GSAP 3 复杂补间动画 Web Audio API 物理声音合成 Tailwind CSS 响应式原子类 移动端优先自适应布局