Merge branch 'main' into release/core-v1.5.1-cientos-1.5.0

.vscode/settings.json

@@ -16,5 +16,11 @@
   "scss.lint.unknownAtRules": "ignore",
   "css.lint.unknownAtRules": "ignore",
   "eslint.workingDirectories": ["apps/", "packages/"],
-  "testing.automaticallyOpenPeekView": "never"
+  "testing.automaticallyOpenPeekView": "never",
+  "files.associations": {
+    "*.mdx": "markdown"
+  },
+  "[astro]": {
+    "editor.defaultFormatter": "astro-build.astro-vscode"
+  }
 }

apps/playground/astro.config.mjs

@@ -1,9 +1,68 @@
 import { defineConfig } from 'astro/config'
-
+import glsl from 'vite-plugin-glsl'
+import UnoCSS from 'unocss/astro'
+import {
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import presetDaisy from 'unocss-preset-daisy'
 // https://astro.build/config
 import vue from '@astrojs/vue'
 
+// https://astro.build/config
+import mdx from '@astrojs/mdx'
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
+  vite: {
+    ssr: {
+      noExternal: ['@kidonng/daisyui'],
+    },
+    plugins: [glsl()],
+  },
+  integrations: [
+    vue({
+      appEntrypoint: '/src/pages/_app',
+    }),
+    UnoCSS({
+      presets: [
+        presetUno(),
+        presetAttributify(),
+        presetIcons({
+          scale: 1.2,
+          warn: true,
+          extraProperties: {
+            display: 'inline-block',
+            'vertical-align': 'middle',
+            // ...
+          },
+        }),
+        presetTypography({
+          cssExtend: {
+            blockquote: {
+              padding: '1rem',
+              'border-left': `8px solid #888 !important`,
+              background: '#e8e8e8',
+            },
+          },
+        }),
+        presetWebFonts({
+          fonts: {
+            sans: 'DM Sans',
+            serif: 'DM Serif Display',
+            mono: 'DM Mono',
+          },
+        }),
+        presetDaisy(),
+      ],
+      transformers: [transformerDirectives(), transformerVariantGroup()],
+      safelist: 'prose prose-sm m-auto text-left'.split(' '),
+    }),
+    mdx(),
+  ],
 })

apps/playground/package.json

@@ -20,13 +20,21 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/mdx": "^0.14.0",
     "@astrojs/vue": "^1.2.2",
     "astro": "^1.9.2",
+    "astro-seo": "^0.7.0",
     "vue": "^3.2.45"
   },
   "devDependencies": {
+    "@iconify-json/carbon": "^1.1.13",
+    "@iconify-json/logos": "^1.1.22",
+    "@kidonng/daisyui": "^2.31.0",
     "@tresjs/cientos": "workspace:^1.4.0",
     "@tresjs/core": "workspace:^1.5.0",
-    "three": "^0.148.0"
+    "three": "^0.148.0",
+    "unocss": "^0.48.0",
+    "unocss-preset-daisy": "^1.2.0",
+    "vite-plugin-glsl": "^1.0.1"
   }
 }

apps/playground/src/components/BasicAnimations.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ShallowRef, shallowRef } from 'vue'
+
+import { useRenderLoop, TresInstance } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+
+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
+  }
+})
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    alpha
+    window-size
+    power-preference="high-performance"
+    physically-correct-lights
+  >
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[1, 2, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <TresScene>
+      <TresMesh ref="boxRef" :scale="1" cast-shadow>
+        <TresBoxGeometry :args="[1, 1, 1]" />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
+    </TresScene>
+  </TresCanvas>
+</template>

apps/playground/src/components/ExperimentInfo.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template>Awiwi</template>

apps/playground/src/components/Header.astro

@@ -0,0 +1,28 @@
+---
+import Logo from '/logo.svg'
+
+export interface Props {
+  title: string
+  visible: boolean
+}
+
+const { visible = false, title } = Astro.props
+---
+
+<header class={`fixed top-0 z-10 w-full bg-white bg-opacity-60 py-4 ${visible ? 'visible' : 'hidden'}`}>
+  <div class="px-4 sm:px-0 container mx-auto flex justify-between">
+    <div class="flex">
+      <img src={Logo} class="mr-8" />
+      <a class="font-bold" href="/" title="Home">{title}</a>
+    </div>
+    <ul class="flex">
+      <a href="https://tresjs.org/" target="_blank" class="i-carbon-document"></a>
+    </ul>
+  </div>
+</header>
+
+<style scoped>
+  header {
+    backdrop-filter: blur(10px);
+  }
+</style>

apps/playground/src/components/Materials.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { OrbitControls, Plane, useTweakPane } from '@tresjs/cientos'
+import {
+  BasicShadowMap,
+  Color,
+  CubeTextureLoader,
+  MeshBasicMaterial,
+  MeshLambertMaterial,
+  MeshMatcapMaterial,
+  MeshNormalMaterial,
+  MeshPhongMaterial,
+  MeshPhysicalMaterial,
+  MeshStandardMaterial,
+  MeshToonMaterial,
+  NoToneMapping,
+  sRGBEncoding,
+} from 'three'
+import { shallowReactive, shallowRef } from 'vue'
+
+const { pane } = useTweakPane()
+const state = shallowReactive({
+  clearColor: '#4f4f4f',
+  shadows: true,
+  alpha: false,
+  physicallyCorrectLights: true,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+})
+
+const cubeTextureLoader = new CubeTextureLoader()
+
+const environmentMap = cubeTextureLoader.load([
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/px.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nx.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/py.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/ny.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/pz.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nz.jpg',
+])
+
+const materialState = shallowReactive({
+  color: '#008080',
+  metalness: 0.5,
+  wireframe: false,
+})
+
+const sphereRef = shallowRef()
+pane
+  .addInput(materialState, 'color', {
+    label: 'Color',
+  })
+  .on('change', (ev: any) => {
+    sphereRef.value.material.color = new Color(ev.value)
+  })
+
+pane
+  .addInput(materialState, 'wireframe', {
+    label: 'Wireframe',
+  })
+  .on('change', (ev: any) => {
+    sphereRef.value.material.wireframe = ev.value
+  })
+
+const materialProps = ['metalness', 'roughness']
+
+materialProps.forEach(element => {
+  pane
+    .addBlade({
+      view: 'slider',
+      label: element,
+      min: 0,
+      max: 1,
+      value: 0.5,
+    })
+    .on('change', (ev: any) => {
+      materialState[element] = ev.value
+      sphereRef.value.material[element] = ev.value
+    })
+})
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'Materials',
+    options: [
+      { text: 'MeshBasicMaterial', value: MeshBasicMaterial },
+      { text: 'MeshToonMaterial', value: MeshToonMaterial },
+      /*    { text: 'MeshDepthMaterial', value: MeshDepthMaterial },
+      { text: 'MeshDistanceMaterial', value: MeshDistanceMaterial }, */
+      { text: 'MeshLambertMaterial', value: MeshLambertMaterial },
+      { text: 'MeshMatcapMaterial', value: MeshMatcapMaterial },
+      { text: 'MeshNormalMaterial', value: MeshNormalMaterial },
+      { text: 'MeshPhongMaterial', value: MeshPhongMaterial },
+      { text: 'MeshPhysicalMaterial', value: MeshPhysicalMaterial },
+      { text: 'MeshStandardMaterial', value: MeshStandardMaterial },
+    ],
+    value: MeshToonMaterial,
+  })
+  .on('change', ev => {
+    sphereRef.value.material = new ev.value(materialState)
+
+    if (ev.value === MeshStandardMaterial || ev.value === MeshPhysicalMaterial) {
+      sphereRef.value.material.envMap = environmentMap
+    }
+  })
+</script>
+<template>
+  <TresCanvas v-bind="state">
+    <TresPerspectiveCamera :position="[3, 3, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
+    <OrbitControls />
+    <TresScene>
+      <TresMesh ref="sphereRef" :position="[0, 1, 0]" cast-shadow recieve-shadow>
+        <TresSphereGeometry :args="[1, 32, 32]" />
+        <TresMeshToonMaterial :color="materialState.color" />
+      </TresMesh>
+      <Plane :args="[10, 10]" recieve-shadow>
+        <TresMeshToonMaterial color="#222" />
+      </Plane>
+      <TresDirectionalLight :position="[-3, 4, 4]" :intensity="2" cast-shadow />
+      <TresDirectionalLight :position="[3, 4, 0]" :intensity="0.5" cast-shadow />
+
+      <TresAmbientLight :intensity="1" />
+    </TresScene>
+  </TresCanvas>
+</template>

apps/playground/src/components/SuspenseWrapper.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  component: any
+}>()
+
+/* import Textures from './Textures.vue' */
+</script>
+<template>
+  <pre>{{ component }}.</pre>
+  <Suspense>
+    <component :is="component.__name" />
+  </Suspense>
+</template>