@tresjs/nuxt

使用 TresJS 在您的 Nuxt 應用程式中建立 3D 體驗。

17.8K 下載•273 顆星•v5.1.0

alvarosabu•

JaimeTorrealba•

Tinoooo

@tresjs/nuxt

TresJS 的官方 Nuxt 模組。像 Vue 元件一樣構建 3D 場景。

功能

🤓 自動匯入 TresJS 生態系統中的元件和可組合項
TresCanvas 僅客戶端，您無需將 .client 新增到元件名稱或 <ClientOnly />
自動配置 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

開發者工具

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