fix: use CubeTextureLoader correctly with array of files (#807)

* chore(playground): re-organize playgrounds, add nuxt one * chore(playground-nuxt): nuxt environment reproduction * fix(useLoader): use CubeTextureLoader correctly with array of files * chore: fix lint
Tresjs · Aug 30, 2024 · 38f05b0 · 38f05b0
1 parent efba10e
commit 38f05b0
Show file tree

Hide file tree

Showing 141 changed files with 15,465 additions and 757 deletions.
diff --git a/package.json b/package.json
@@ -49,9 +49,9 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "cd playground && npm run dev",
+    "dev": "cd playground/vue && npm run dev",
+    "dev:nuxt": "cd playground/nuxt && npm run dev",
     "build": "vite build",
-    "playground": "cd playground && npm run dev",
     "test": "vitest",
     "test:ci": "vitest run",
     "test:ui": "vitest --ui --coverage.enabled=true",

diff --git a/playground/.eslintrc-auto-import.json b/playground/.eslintrc-auto-import.json
@@ -4,6 +4,9 @@
     "ComponentPublicInstance": true,
     "ComputedRef": true,
     "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
     "InjectionKey": true,
     "PropType": true,
     "Ref": true,
@@ -59,9 +62,6 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "ExtractDefaultPropTypes": true,
-    "ExtractPropTypes": true,
-    "ExtractPublicPropTypes": true
+    "watchSyncEffect": true
   }
 }
diff --git a/playground/components.d.ts b/playground/components.d.ts
@@ -7,28 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AkuAku: typeof import('./src/components/AkuAku.vue')['default']
-    AnimatedObjectUseUpdate: typeof import('./src/components/AnimatedObjectUseUpdate.vue')['default']
-    BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
-    Box: typeof import('./src/components/Box.vue')['default']
-    DirectiveSubComponent: typeof import('./src/components/DirectiveSubComponent.vue')['default']
-    DynamicModel: typeof import('./src/components/DynamicModel.vue')['default']
-    FBOCube: typeof import('./src/components/FBOCube.vue')['default']
-    GraphPane: typeof import('./src/components/GraphPane.vue')['default']
-    LocalOrbitControls: typeof import('./src/components/LocalOrbitControls.vue')['default']
-    Overlay: typeof import('./src/components/Overlay.vue')['default']
-    OverlayInfo: typeof import('./src/components/OverlayInfo.vue')['default']
-    PbrSphere: typeof import('./src/components/PbrSphere.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    TakeOverLoopExperience: typeof import('./src/components/TakeOverLoopExperience.vue')['default']
-    TestResult: typeof import('./src/components/TestResult.vue')['default']
-    Tests: typeof import('./src/components/Tests.vue')['default']
-    TestSphere: typeof import('./src/components/TestSphere.vue')['default']
-    Text3D: typeof import('./src/components/Text3D.vue')['default']
-    TheCameraOperator: typeof import('./src/components/TheCameraOperator.vue')['default']
-    TheExperience: typeof import('./src/components/TheExperience.vue')['default']
-    TheSphere: typeof import('./src/components/TheSphere.vue')['default']
-    UgglyBunny: typeof import('./src/components/UgglyBunny.vue')['default']
   }
 }
diff --git a/playground/nuxt/.github/FUNDING.yml b/playground/nuxt/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+github: [alvarosabu]
+ko_fi: alvarosaburido
diff --git a/playground/nuxt/.github/workflows/actions/pnpm/action.yml b/playground/nuxt/.github/workflows/actions/pnpm/action.yml
@@ -0,0 +1,27 @@
+# From https://github.com/remirror/template/blob/4f8c5f5629a081217672a8cce1df085510f43913/.github/actions/pnpm/action.yml
+name: pnpm installation
+description: Install and audit dependencies for pnpm
+inputs:
+  cache: # id of input
+    description: The location of the pnpm cache
+    required: true
+    default: .pnpm-store
+  version: # id of input
+    description: The version to use
+    required: false
+    default: 6.10.0
+
+runs:
+  using: composite
+  steps:
+    - name: install pnpm
+      run: npm install pnpm@${{ inputs.version }} -g
+      shell: bash
+
+    - name: setup pnpm config
+      run: pnpm config set store-dir ${{ inputs.cache }}
+      shell: bash
+
+    - name: install dependencies
+      run: pnpm install --shamefully-hoist
+      shell: bash
diff --git a/playground/nuxt/.github/workflows/lint-pr.yml b/playground/nuxt/.github/workflows/lint-pr.yml
@@ -0,0 +1,17 @@
+name: Lint PR
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/playground/nuxt/.gitignore b/playground/nuxt/.gitignore
@@ -0,0 +1,23 @@
+# Nuxt dev/build outputs
+.output
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
diff --git a/playground/nuxt/.npmrc b/playground/nuxt/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/playground/nuxt/.stackblitzrc b/playground/nuxt/.stackblitzrc
@@ -0,0 +1,3 @@
+{
+  "installDependencies": true
+}
diff --git a/playground/nuxt/LICENSE b/playground/nuxt/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present, (alvarosabu) Alvaro Saburido and Tres contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/playground/nuxt/README.md b/playground/nuxt/README.md
@@ -0,0 +1,67 @@
+![repo-banner](/public/repo-banner.png)
+
+# TresJS 🚀 Starter + Nuxt
+
+> Quick start repo for [Nuxt](https://nuxt.com) projects with [TresJS](https://tresjs.org) integration via  [`@tresjs/nuxt` module](https://tresjs.org/guide/nuxt.html).
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/playground/nuxt/app.vue b/playground/nuxt/app.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#c0ffee',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <div style="height: 100vh">
+    <TresCanvas v-bind="gl">
+      <TheExperience />
+    </TresCanvas>
+  </div>
+</template>
+
+<style>
+html,
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+</style>
diff --git a/playground/nuxt/components/EnvironmentLocal.vue b/playground/nuxt/components/EnvironmentLocal.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { CubeReflectionMapping, type CubeTexture, CubeTextureLoader, EquirectangularReflectionMapping, type Texture } from 'three'
+import type { LoaderProto } from '@tresjs/core'
+import { useLoader, useTresContext } from '@tresjs/core'
+import { RGBELoader } from 'three-stdlib'
+
+/* const files = ref(['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']) */
+const files = ref('venice/venice_sunset_1k.hdr')
+const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/hdr/'
+const texture: Ref<Texture | CubeTexture | null> = ref(null)
+
+const { scene } = useTresContext()
+
+const isCubeMap = computed(() => Array.isArray((files as Ref<string[]>).value))
+const result = ref()
+const loader = computed(() => isCubeMap.value ? CubeTextureLoader as unknown as LoaderProto<CubeTexture | RGBELoader> : RGBELoader as unknown as LoaderProto<CubeTexture | RGBELoader>)
+
+result.value = await useLoader<CubeTexture | RGBELoader>(
+  loader.value,
+  isCubeMap.value ? [...unref(files)] : unref(files),
+  (loader: any) => {
+    if (path) { loader.setPath(unref(path)) }
+    /* if (colorSpace) loader.colorSpace = colorSpace */
+  },
+)
+if (result.value) {
+  texture.value = result.value
+  if (texture.value) {
+    texture.value.mapping = isCubeMap.value ? CubeReflectionMapping : EquirectangularReflectionMapping
+    scene.value.environment = texture.value
+    scene.value.background = texture.value
+  }
+}
+</script>
+
+<template>
+  <TresMesh>
+    <TresSphereGeometry args="[1, 64, 32]" />
+    <TresMeshStandardMaterial :envMap="texture" />
+  </TresMesh>
+</template>
diff --git a/playground/nuxt/components/TheExperience.vue b/playground/nuxt/components/TheExperience.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <TresPerspectiveCamera
+    :position="[-5.3, 8.3, 10.6]"
+    :look-at="[0, 0, 0]"
+  />
+  <Suspense>
+    <EnvironmentLocal />
+  </Suspense>
+  <TresMesh :position="[0, 2, 0]">
+    <TresBoxGeometry />
+    <TresMeshNormalMaterial />
+  </TresMesh>
+  <TresGridHelper />
+  <OrbitControls />
+</template>
diff --git a/playground/nuxt/nuxt.config.ts b/playground/nuxt/nuxt.config.ts
@@ -0,0 +1,21 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import { resolve } from 'pathe'
+
+export default defineNuxtConfig({
+  modules: ['@tresjs/nuxt'],
+  devtools: { enabled: true },
+
+  vite: {
+    resolve: {
+      alias: {
+        '@tresjs/core': resolve(__dirname, '../../src/'),
+      },
+    },
+  },
+
+  tres: {
+    glsl: true,
+  },
+
+  compatibilityDate: '2024-08-30',
+})
diff --git a/playground/nuxt/package.json b/playground/nuxt/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@tresjs/nuxt-starter",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Quick Nuxt starter template for TresJS",
+  "author": "Alvaro Saburido <[email protected]> (https://github.com/alvarosabu/)",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "tresjs",
+    "webgl",
+    "vite",
+    "3d",
+    "threejs",
+    "three",
+    "threejs-vue"
+  ],
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@tresjs/cientos": "^4.0.0",
+    "@tresjs/core": "workspace:^",
+    "@tresjs/nuxt": "3.0.4",
+    "@tresjs/post-processing": "^0.7.1",
+    "@types/node": "^22.5.1",
+    "@types/three": "^0.167.2",
+    "nuxt": "^3.5.2",
+    "three": "^0.168.0"
+  }
+}