@tresjs/nuxt
TresJS 的官方 Nuxt 模块。像 Vue 组件一样构建 3D 场景。
功能
- 🤓 自动从 TresJS 生态系统导入组件和可组合项
TresCanvas仅客户端，你无需在组件名称或<ClientOnly />中添加.client- 自动配置 Vue 编译器以支持 TresJS 组件，请参阅原因？
- Nuxt 带来的所有 DX 魔力 ✨
- 新版本 v2：TresJS nuxt devtools。
快速设置
- 将
@tresjs/nuxt依赖项添加到你的项目
npx nuxi@latest module add tresjs
- 将
@tresjs/nuxt添加到nuxt.config.ts的modules部分
export default defineNuxtConfig({
modules: ['@tresjs/nuxt'],
})
就是这样！你现在可以在 Nuxt 应用程序中使用 @tresjs/nuxt 了 ✨
如果你想使用 TresJS 生态系统中的任何包，你可以安装你想使用的包，它们将由模块自动导入 🧙🏼♂️。
# Using pnpm
pnpm add @tresjs/cientos @tresjs/post-processing
开发者工具
TresJS nuxt 模块带有一个开发工具扩展，允许你检查 3D 场景并测量性能。
要激活开发工具，你需要将 devtools 选项添加到 nuxt.config.ts 的 tres 部分。
export default defineNuxtConfig({
modules: ['@tresjs/nuxt', '@nuxt/devtools'],
tres: {
devtools: true,
},
})
GLSL 着色器支持
TresJS nuxt 模块带有一个 vite 插件，允许你将 GLSL 着色器作为字符串导入。它底层使用了 vite-plugin-glsl。
export default defineNuxtConfig({
modules: ['@tresjs/nuxt', '@nuxt/devtools'],
tres: {
glsl: true,
},
})
启用此选项后，你可以在组件中将 GLSL 着色器作为字符串导入。
<script setup lang="ts">
import fragmentShader from './shaders/fragment.glsl'
import vertexShader from './shaders/vertex.glsl'
const uniforms = {
uTime: { value: 0 },
uAmplitude: { value: new Vector2(0.1, 0.1) },
uFrequency: { value: new Vector2(20, 5) },
}
</script>
<template>
<TresMesh
:position="[0, 4, 0]"
>
<TresSphereGeometry :args="[2, 32, 32]" />
<TresShaderMaterial
:vertex-shader="vertexShader"
:fragment-shader="fragmentShader"
:uniforms="uniforms"
/>
</TresMesh>
</template>
开发
# Install dependencies at the root of the project
pnpm install
# Install dependencies on the playground
cd playground
pnpm install
# Install dependencies on the client (devtools)
cd client
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Run Vitest
pnpm run test
pnpm run test:watch
# Release new version
pnpm run release