feat: migrated to nuxt

BREAKING CHANGE: migrated from astro to nuxt
damienmontastier · Mar 27, 2023 · e6f3515 · e6f3515
commit e6f3515
Show file tree

Hide file tree

Showing 52 changed files with 7,947 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@alvarosabu/prettier-config'),
+  printWidth: 120,
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/app.vue b/app.vue
@@ -0,0 +1,14 @@
+<script lang="ts">
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three-stdlib'
+
+extend({ OrbitControls })
+</script>
+
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/components/TestOrbitControls.vue b/components/TestOrbitControls.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { useTres } from '@tresjs/core'
+import { Camera, Vector3 } from 'three'
+import { OrbitControls } from 'three-stdlib'
+import { ref, type Ref } from 'vue'
+
+export interface OrbitControlsProps {
+  /**
+   * Whether to make this the default controls.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  makeDefault?: boolean
+  /**
+   * The camera to control.
+   *
+   * @type {Camera}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  camera?: Camera
+  /**
+   * The dom element to listen to.
+   *
+   * @type {HTMLElement}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  domElement?: HTMLElement
+  /**
+   * The target to orbit around.
+   *
+   * @type {Ref<Vector3>}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  target?: Ref<Vector3>
+  /**
+   * Whether to enable damping.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+   */
+  enableDamping?: boolean
+}
+
+const props = withDefaults(defineProps<OrbitControlsProps>(), {
+  makeDefault: false,
+})
+
+const controls: Ref<OrbitControls | null> = ref(null)
+
+defineExpose({ controls })
+
+const { state, setState } = useTres()
+
+watchEffect(
+  () => {
+    if (!state.renderer || !state.camera) return
+
+    controls.value = new OrbitControls(state.camera, state.renderer.domElement)
+    if (props.makeDefault) {
+      setState('controls', controls.value)
+    }
+  },
+  {
+    flush: 'post',
+  },
+)
+</script>
+
+<template></template>
diff --git a/components/TheCard.vue b/components/TheCard.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  path: string
+  media: string
+  description: string
+  author: {
+    name: string
+    avatar: string
+  }
+  tags: string[]
+}>()
+</script>
+<template>
+  <NuxtLink :to="path">
+    <div class="shadow-lg rounded-lg overflow-hidden">
+      <NuxtImg 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>
+        <div class="flex gap-4">
+          <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" />
+          <span class="font-bold text-sm">{{ author.name }}</span>
+        </div>
+      </footer>
+    </div>
+  </NuxtLink>
+</template>
diff --git a/components/TheTag.vue b/components/TheTag.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup></script>
+
+<template>
+  <span class="bg-primary inline-flex px-2 py-1 text-xs rounded">
+    <slot />
+  </span>
+</template>
+
+<style scoped></style>
diff --git a/components/TheToolbar.vue b/components/TheToolbar.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import Logo from '/assets/logo.svg'
+</script>
+
+<template>
+  <header class="fixed top-0 z-10 w-full bg-base-100 bg-opacity-60 py-4">
+    <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>
+      </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>
+      </ul>
+    </div>
+  </header>
+</template>
+
+<style scoped></style>
diff --git a/components/content/BasicAnimations.vue b/components/content/BasicAnimations.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { TresCanvas, TresInstance, useRenderLoop, useTres } from '@tresjs/core'
+import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
+
+import { TransformControls } from '@tresjs/cientos'
+import { ShallowRef } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+}
+
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += delta
+    boxRef.value.rotation.z = elapsed * 0.2
+  }
+})
+
+const camera = ref(null)
+
+watchEffect(() => {
+  if (camera.value) {
+    camera.value.lookAt(0, 0, 0)
+  }
+})
+
+const transformState = shallowReactive({
+  mode: 'translate',
+  size: 1,
+  axis: 'XY',
+  showX: true,
+  showY: true,
+  showZ: true,
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <!--  <OrbitControls /> -->
+    <TestOrbitControls make-default />
+    <TresPerspectiveCamera ref="camera" :position="[3, 3, 3]" />
+    <TresMesh ref="boxRef" :scale="1">
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" />
+  </TresCanvas>
+</template>
diff --git a/components/content/Events.vue b/components/content/Events.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { TresCanvas, TresEvent } from '@tresjs/core'
+import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
+
+import { OrbitControls } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#202020',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+}
+
+function onClick(ev: TresEvent) {
+  if (ev) {
+    ev.object.material.color.set('#008080')
+  }
+}
+
+function onPointerEnter(ev: TresEvent) {
+  console.log(ev)
+  if (ev) {
+    ev.object.material.color.set('#CCFF03')
+  }
+}
+
+function onPointerLeave(ev: TresEvent) {
+  if (ev) {
+    /*  ev.object.material.color.set('#efefef') */
+  }
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
+
+    <template v-for="x in [-2.5, 0, 2.5]">
+      <template v-for="y in [-2.5, 0, 2.5]">
+        <TresMesh
+          v-for="z in [-2.5, 0, 2.5]"
+          :key="`${[x, y, z]}`"
+          :position="[x, y, z]"
+          @click="onClick"
+          @pointer-enter="onPointerEnter"
+          @pointer-leave="onPointerLeave"
+        >
+          <TresBoxGeometry :args="[1, 1, 1]" />
+          <TresMeshToonMaterial color="#efefef" />
+        </TresMesh>
+      </template>
+    </template>
+    <TresDirectionalLight :intensity="1" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>