feat: tresleches gui (Tresjs#67)

* feat: tresleches gui on camera array demo * feat: galaxy generator new controls * chore: activate vscode eslint autofix * feat: updated glass material example * fix: add `outpotColorSpace` to glasss material example * feat: added published status to experiments * feat: haunted house up and running after fixing props hyphenation issue * feat: improved lowpoly planet * feature: migrated fixed and formatted * chore: removed glsl code blocks for shiki latest nuxt content issues
damienmontastier · Sep 20, 2023 · e1e53ba · e1e53ba
1 parent 215b947
commit e1e53ba
Show file tree

Hide file tree

Showing 90 changed files with 4,608 additions and 2,584 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,7 @@
+{
+    "extends": "@tresjs/eslint-config-vue",
+    "rules": {
+      "@typescript-eslint/no-use-before-define": "off"
+    }
+  }
+
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,24 +1,25 @@
 {
-  "eslint.codeAction.showDocumentation": {
-    "enable": true
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.organizeImports": false
   },
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "scss.lint.unknownAtRules": "ignore",
-  "css.lint.unknownAtRules": "ignore",
-  "eslint.workingDirectories": ["apps/", "packages/"],
-  "testing.automaticallyOpenPeekView": "never",
-  "files.associations": {
-    "*.mdx": "markdown"
-  },
-  "vue.features.codeActions.enable": false
-}
+
+  // The following is optional.
+  // It's better to put under project setting `.vscode/settings.json`
+  // to avoid conflicts with working with different eslint configs
+  // that does not support all formats.
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}
diff --git a/components/BlenderCube.vue b/components/BlenderCube.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
+const model = nodes.Cube
+</script>
+
+<template>
+  <primitive :object="model" />
+</template>
diff --git a/components/TheCard.vue b/components/TheCard.vue
@@ -11,20 +11,37 @@ defineProps<{
   tags: string[]
 }>()
 </script>
+
 <template>
   <NuxtLink :to="path">
     <div class="shadow-lg rounded-lg overflow-hidden">
-      <img class="aspect-video object-cover" :src="media" />
+      <img
+        class="aspect-video object-cover"
+        :src="media"
+      >
       <div class="p-4">
-        <h2 class="font-bold text-lg mb-2">{{ title }}</h2>
-        <p class="text-sm text-gray-400 mb-2 min-h-75px">{{ description }}</p>
+        <h2 class="font-bold text-lg mb-2">
+          {{ title }}
+        </h2>
+        <p class="text-sm text-gray-400 mb-2 min-h-75px">
+          {{ description }}
+        </p>
         <div class="flex gap-4">
-          <TheTag v-for="tag in tags" :key="tag" :tag="tag">{{ tag }}</TheTag>
+          <TheTag
+            v-for="tag in tags"
+            :key="tag"
+            :tag="tag"
+          >
+            {{ tag }}
+          </TheTag>
         </div>
       </div>
       <footer class="flex px-4 pb-4 gap-4">
         <div class="flex items-center">
-          <NuxtImg :src="author.avatar" class="border-2 border-gray-200 w-8 h-8 mr-4 rounded-full" />
+          <NuxtImg
+            :src="author.avatar"
+            class="border-2 border-gray-200 w-8 h-8 mr-4 rounded-full"
+          />
           <span class="font-bold text-sm">{{ author.name }}</span>
         </div>
       </footer>

diff --git a/components/TheToolbar.vue b/components/TheToolbar.vue
@@ -7,11 +7,23 @@ import Logo from '/assets/logo.svg'
     <div class="px-4 sm:px-0 container mx-auto flex justify-between">
       <div class="flex items-center">
         <Logo class="mr-8" />
-        <a class="font-bold" href="/" title="Home">Playground</a>
+        <a
+          class="font-bold"
+          href="/"
+          title="Home"
+        >Playground</a>
       </div>
       <ul class="flex justify-between w-50px">
-        <a href="https://tresjs.org/" target="_blank" class="i-carbon-document"></a>
-        <a href="https://github.com/Tresjs/playground" target="_blank" class="i-logos-github-icon"></a>
+        <a
+          href="https://tresjs.org/"
+          target="_blank"
+          class="i-carbon-document"
+        />
+        <a
+          href="https://github.com/Tresjs/playground"
+          target="_blank"
+          class="i-logos-github-icon"
+        />
       </ul>
     </div>
   </header>

diff --git a/components/content/BasicAnimations.vue b/components/content/BasicAnimations.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
-import { ShallowRef } from 'vue'
-
 const gl = {
   clearColor: '#82DBC5',
   shadows: true,
@@ -39,18 +37,27 @@ const transformState = shallowReactive({
   showY: true,
   showZ: true,
 })
-</script>
+</script>x
 
 <template>
   <TresCanvas v-bind="gl">
     <!--  <OrbitControls /> -->
-    <TresPerspectiveCamera ref="camera" :position="[3, 3, 3]" />
+    <TresPerspectiveCamera
+      ref="camera"
+      :position="[3, 3, 3]"
+    />
     <OrbitControls make-default />
-    <TresMesh ref="boxRef" :scale="1">
+    <TresMesh
+      ref="boxRef"
+      :scale="1"
+    >
       <TresBoxGeometry :args="[1, 1, 1]" />
       <TresMeshNormalMaterial />
     </TresMesh>
     <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" />
+    <TresDirectionalLight
+      :position="[0, 2, 4]"
+      :intensity="2"
+    />
   </TresCanvas>
 </template>
diff --git a/components/content/Cameras.vue b/components/content/Cameras.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BasicShadowMap, NoToneMapping, OrthographicCamera, PerspectiveCamera, SRGBColorSpace } from 'three';
+import { BasicShadowMap, NoToneMapping, OrthographicCamera, PerspectiveCamera, SRGBColorSpace } from 'three'
 
 const gl = {
   clearColor: '#2B3846',
@@ -29,10 +29,10 @@ pane
     ],
     value: 'perspective',
   })
-  .on('change', e => {
+  .on('change', (e) => {
     state.cameraType = e.value
-    const newCamera =
-      e.value === 'perspective'
+    const newCamera
+      = e.value === 'perspective'
         ? new PerspectiveCamera(75, 1, 0.1, 1000)
         : new OrthographicCamera(-10, 10, 10, -10, 0.1, 1000)
 
@@ -58,7 +58,7 @@ watch(
   () => state.cameraType,
   () => {
     if (state.cameraType === 'orthographic') {
-      perspectiveFolder.children.forEach(child => {
+      perspectiveFolder.children.forEach((child) => {
         child.dispose()
       })
       orthographicFolder.addInput(state.camera, 'left', { min: -50, max: 50 })
@@ -67,8 +67,9 @@ watch(
       orthographicFolder.addInput(state.camera, 'bottom', { min: -50, max: 50 })
       orthographicFolder.addInput(state.camera, 'near', { min: 0, max: 50 })
       orthographicFolder.addInput(state.camera, 'far', { min: 0, max: 500 })
-    } else {
-      orthographicFolder.children.forEach(child => {
+    }
+    else {
+      orthographicFolder.children.forEach((child) => {
         child.dispose()
       })
       perspectiveFolder.addInput(state.camera, 'fov', { min: 0, max: 180 })
@@ -83,12 +84,6 @@ watch(
 
 const context = ref(null)
 
-watchEffect(() => {
-  if (context.value) {
-    console.log(context.value)
-  }
-})
-
 const asyncTorus = ref(false)
 
 setTimeout(() => {
@@ -97,12 +92,22 @@ setTimeout(() => {
 </script>
 
 <template>
-  <TresCanvas v-bind="gl" ref="context" :camera="state.camera">
-    <Box :position="[0, 1, 0]" :scale="[2, 2, 2]">
-      <TresMeshNormalMaterial :color="'teal'" />
+  <TresCanvas
+    v-bind="gl"
+    ref="context"
+    :camera="state.camera"
+  >
+    <Box
+      :position="[0, 1, 0]"
+      :scale="[2, 2, 2]"
+    >
+      <TresMeshNormalMaterial color="teal" />
     </Box>
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
-    <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="1"
+    />
   </TresCanvas>
 </template>
diff --git a/components/content/Events.vue b/components/content/Events.vue
@@ -31,7 +31,13 @@ function onPointerLeave(ev: TresEvent) {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
+    <TresPerspectiveCamera
+      :position="[11, 11, 11]"
+      :fov="45"
+      :near="0.1"
+      :far="1000"
+      :look-at="[0, 0, 0]"
+    />
     <OrbitControls />
 
     <template v-for="x in [-2.5, 0, 2.5]">