@tresjs/nuxt

TresJS 的官方 Nuxt 模块。构建 3D 场景就像构建 Vue 组件一样。

功能

🤓 自动导入来自 TresJS 生态系统的组件和组合式函数。
TresCanvas 仅限客户端，您无需在组件名称中添加 .client 或 <ClientOnly />。
自动配置 vue 编译器以支持 TresJS 组件，请参阅原因？
Nuxt 附带的所有 DX 魔法 ✨。
新增 v2：TresJS nuxt 开发工具。

快速设置

将 @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

开发工具

Devtools

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
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release