feat(playground): draft planet

apps/playground/src/components/lowpoly-planet/Airplane.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useGLTF, useTweakPane } from '@tresjs/cientos'
+import { useRenderLoop } from '@tresjs/core'
+import { Object3D, Sphere } from 'three'
+import { shallowRef, watch } from 'vue'
+
+const props = defineProps<{
+  planet: Object3D
+}>()
+
+const { scene } = await useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/low-poly/airplane.gltf',
+)
+
+const airplaneRef = shallowRef()
+
+const airplane = scene
+airplane.rotation.set(0, Math.PI, 0)
+scene.traverse(child => {
+  if (child.isMesh) {
+    child.castShadow = true
+  }
+})
+airplane.updateMatrixWorld()
+
+const { onLoop } = useRenderLoop()
+
+watch(
+  () => props.planet,
+  planet => {
+    if (!planet) return
+    const radius = Math.abs(planet.geometry.boundingSphere?.radius | 1) + 0.5
+    airplane.position.set(radius, 0, 0)
+
+    airplane.lookAt(planet.position)
+  },
+)
+
+const { pane } = useTweakPane()
+
+const folder = pane.addFolder({
+  title: 'Airplane',
+  expanded: true,
+})
+
+watch(
+  () => airplaneRef.value,
+  planet => {
+    if (!planet) return
+    folder.addInput(airplaneRef.value, 'visible', { label: 'Visible' })
+  },
+)
+
+let angle = 0
+let speed = 0.2
+onLoop(({ delta }) => {
+  if (!airplane) return
+
+  const radius = Math.abs(props.planet.geometry.boundingSphere.radius) + 0.5
+  angle += delta * speed
+  let x = radius * Math.cos(angle)
+  let z = radius * Math.sin(angle)
+  airplane.position.x = x
+  airplane.position.z = z
+  airplane.rotation.z = -Math.PI / 2
+  airplane.rotation.y = -angle
+  airplane.updateMatrixWorld()
+})
+</script>
+<template>
+  <TresMesh ref="airplaneRef" v-bind="airplane" />
+</template>

apps/playground/src/components/lowpoly-planet/Cloud.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+import { useRenderLoop } from '@tresjs/core'
+import { Object3D } from 'three'
+import { shallowRef, watch } from 'vue'
+
+const props = defineProps<{
+  planet: Object3D
+}>()
+
+const { scene } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/low-poly/cloud.gltf')
+const cloudRef = shallowRef()
+
+const cloud = scene.children[0] as Object3D
+cloud.castShadow = true
+// create a function to return a random number between two values with random sign
+function random(min: number, max: number): number {
+  const randomNumber = Math.random() * (max - min) + min
+  return Math.random() < 0.5 ? -randomNumber : randomNumber
+}
+
+cloud.position.set(random(0.5, 1), random(0.5, 1), random(0.5, 1))
+
+const size = random(0.5, 1)
+cloud.scale.set(size, size, size)
+cloud.updateMatrixWorld()
+
+watch(
+  () => props.planet,
+  planet => {
+    if (!planet) return
+    cloud.lookAt(planet.position)
+    cloud.updateMatrixWorld()
+  },
+)
+</script>
+<template>
+  <TresMesh ref="cloudRef" v-bind="scene" cast-shadow />
+</template>

apps/playground/src/components/lowpoly-planet/Planet.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useGLTF, useTweakPane } from '@tresjs/cientos'
+import { useRenderLoop } from '@tresjs/core'
+import { shallowRef, watch } from 'vue'
+import Airplane from './Airplane.vue'
+import Cloud from './Cloud.vue'
+
+const { scene: planet } = await useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/low-poly/planet.gltf',
+)
+
+const { pane } = useTweakPane()
+
+const planetRef = shallowRef()
+
+planet.traverse(child => {
+  if (child.isMesh) {
+    child.receiveShadow = true
+  }
+})
+
+watch(
+  () => planetRef.value,
+  planet => {
+    if (!planet) return
+    pane.addInput(planetRef.value, 'visible', { label: 'Planet' })
+  },
+)
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+  if (!planet) return
+  planet.rotation.y += delta * 0.04
+  planet.rotation.z += delta * 0.02
+  planet.rotation.x += delta * 0.05
+  planet.updateMatrixWorld()
+})
+</script>
+<template>
+  <TresMesh ref="planetRef" v-bind="planet" />
+  <Airplane :planet="planetRef" />
+  <Cloud v-for="cloud of [1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="cloud" :planet="planetRef" />
+</template>

apps/playground/src/components/lowpoly-planet/TheExperience.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { PCFSoftShadowMap, sRGBEncoding } from 'three'
+import { OrbitControls } from '@tresjs/cientos'
+
+import Planet from './Planet.vue'
+import { shallowRef, watch } from 'vue'
+import { TresInstance } from '@tresjs/core/dist/types'
+
+const state = {
+  clearColor: '#11101B',
+  shadows: true,
+  alpha: false,
+  outputEncoding: sRGBEncoding,
+  shadowMapType: PCFSoftShadowMap,
+}
+const directionalLightRef = shallowRef<TresInstance>()
+
+watch(
+  () => directionalLightRef.value,
+  directionalLight => {
+    if (!directionalLight) return
+
+    directionalLight.shadow.mapSize.width = 2048
+    directionalLight.shadow.mapSize.height = 2048
+  },
+)
+</script>
+
+<template>
+  <Suspense>
+    <TresCanvas v-bind="state">
+      <OrbitControls />
+      <TresPerspectiveCamera :position="[0, 1, 3]" :fov="75" :near="0.1" :far="1000" />
+      <TresScene>
+        <TresFog color="#11101B" :near="0.1" :far="1000" />
+        <TresAmbientLight :color="0x484068" :intensity="1" />
+        <Planet />
+
+        <TresAxesHelper />
+        <TresPointLight color="#1BFFEF" :position="[0, 8, -16]" :intensity="8" cast-shadow />
+        <TresDirectionalLight ref="directionalLightRef" :position="[0, 2, 4]" :intensity="1" cast-shadow />
+      </TresScene>
+    </TresCanvas>
+  </Suspense>
+</template>

apps/playground/src/pages/vue/lowpoly-planet.mdx

@@ -0,0 +1,40 @@
+---
+layout: /@/layouts/ExperimentLayout.astro
+thumbnail: /gltf-model.png
+title: Low Poly Planet
+author: Alvarosabu
+description: Low Poly Planet exported from Blender
+tags: ['basic', 'cientos', 'useGLTF']
+---
+
+import LowpolyPlanet from '/@/components/lowpoly-planet/TheExperience.vue'
+import TheInfo from '/@/components/TheInfo.astro'
+
+<LowpolyPlanet client:only />
+
+<TheInfo >
+# { frontmatter.title }
+
+```vue
+<script setup lang="ts">
+import { sRGBEncoding } from 'three'
+
+import { OrbitControls, GLTFModel } from '@tresjs/cientos'
+</script>
+
+<template>
+  <Suspense>
+    <TresCanvas clear-color="#82DBC5" shadows alpha window-size :output-encoding="sRGBEncoding">
+      <OrbitControls />
+      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :near="0.1" :far="1000" />
+      <TresScene :fog="'#82DBC5'">
+        <TresAmbientLight :color="0xffffff" :intensity="0.25" />
+        <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+        <GLTFModel path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf" draco />
+      </TresScene>
+    </TresCanvas>
+  </Suspense>
+</template>
+```
+
+</TheInfo>