Vite启动器

shader-template — Vite 启动器模板

作者 rudrodip

基于 Three.js、Vite、TypeScript 与 GLSL 的着色器入门项目模板，提供渲染、相机、灯光、后期处理与 tick 等工具函数，并包含 main 与 organic 两个分支示例。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

从固定源码版本实际渲染并截图。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-16查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

使用 Three.js、Vite、TypeScript 与 GLSL 构建

内置渲染、相机、灯光、effect composer、后期处理、tick 与着色器工具函数

提供 main 与 organic 两个分支的在线示例链接

着色器文件独立放在 src/shaders 下，包含 fragment.glsl 与 vertex.glsl

README 给出克隆、安装依赖、启动开发服务器与构建的命令

模板详细介绍

这是一个面向 Three.js 着色器开发的起步模板，README 说明其灵感来自 shaders-crash-course 仓库，作者因偏好 Vite 与 TypeScript 而重新实现。技术栈明确为 Three.js、Vite、TypeScript 和 GLSL。项目内置了渲染、相机、灯光、effect composer、后期处理、tick 以及着色器相关的工具函数。目录结构包含 src/render 下的 init.ts 与 tick-manager.ts、src/shaders 下的 fragment.glsl 与 vertex.glsl，以及 app.ts、index.ts、index.html、style.css。README 提供 main 与 organic 两个分支的在线链接，并给出克隆、安装依赖与启动开发服务器的步骤，构建命令为 bun run build。README 未说明具体 Three.js 或 Vite 版本，也未描述性能表现、浏览器兼容性或生产部署细节。

Vite启动器

适合你的项目吗？

适用场景

学习 Three.js 中 GLSL 着色器的基本写法与组织方式
以 Vite 和 TypeScript 为基础搭建着色器实验项目
参考渲染初始化与 tick 管理器的代码结构
在已有工具函数基础上添加自定义着色器效果

适合人群

熟悉 TypeScript 并希望入门 Three.js 着色器的开发者
偏好 Vite 而非 webpack 的前端开发者
需要轻量着色器起步模板进行练习或原型验证的人

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后进入 shader-template 目录
2
使用 bun install 安装依赖，也可替换为 npm、yarn 或 pnpm
3
使用 bun run dev 启动开发服务器
4
使用 bun run build 执行构建
5
README 未提供环境变量、部署配置或版本要求说明

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

https://github.com/rudrodip/shader-template/blob/main/LICENSE.md https://github.com/rudrodip/shader-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-15。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 65 / 100
技术栈: Vite
网站类型: 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2024-07-10
截图检查日期: 2026-10-16

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: 70cd7b3b2c4c6dd3d1e423416299bf7c00f004b34d404ec3f131f8eaff29cec2

2026-10-15T06:29:53.460Z

来源文件 / 仓库

# Three.js Shader Starter

Simple starter project for three.js with shaders.

Inspired from: [shaders-crash-course](https://github.com/visionary-3d/shaders-crash-course)

![demo](.github/assets/og.png)

branch `main`: [live link](https://threejs-shaders-template.vercel.app)

branch `organic`: [live link](https://shader-animation.vercel.app)

## Tech Stack

- Three.js
- Vite
- TypeScript
- GLSL

> This project includes utility functions for rendering, camera, light, effect composer, post-processing, tick, and shaders.

## Getting Started

> ![IMPORTANT]
> You can use your favorite package manager instead of `bun`. Just replace `bun` with `npm` or `yarn` or `pnpm` or any other package manager.

```bash
# Clone the repository
git clone https://github.com/rudrodip/shader-template.git

# Change the directory
cd shader-template

# Install dependencies
bun install

# Start the development server
bun run dev
```

## Build

```bash
bun run build
```

## Folder Structure

```bash
├── src
│   ├── render
│   │   ├── init.ts
│   │   └── tick-manager.ts
│   ├── shaders
│   │   ├── fragment.glsl
│   │   └── vertex.glsl
│   ├── app.ts
│   ├── index.ts
│   ├── index.html
│   ├── style.css
```

## License

This project is licensed under the MIT License - see the [LICENSE](./LICENSE.md) file for details.

## Acknowledgements

This project is inspired by [shaders-crash-course](https://github.com/visionary-3d/shaders-crash-course) repository.

I am personally not a big fan of webpack, so I decided to create a similar project with Vite. And I prefer TypeScript over JavaScript.

反馈内容错误