Merge pull request #78 from Tresjs/feature/60-plane-abstraction

feat(cientos): plane abstraction

docs/.vitepress/config.ts

@@ -81,6 +81,10 @@ export default defineConfig({
               { text: 'FBXModel', link: '/cientos/loaders/fbx-model' },
             ],
           },
+          {
+            text: 'Shapes',
+            items: [{ text: 'Plane', link: '/cientos/shapes/plane' }],
+          },
           {
             text: 'Misc',
             items: [{ text: 'useTweakpane', link: '/cientos/misc/use-tweakpane' }],

docs/cientos/shapes/plane.md

@@ -0,0 +1,20 @@
+# Plane
+
+![](/cientos/plane.png)
+
+The `cientos` package provides a `<Plane />` component that serves as a short-cut for a `PlaneGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+::: info
+A convenient default rotation is applied to the _x-axis_ of the plane (`-Math.PI / 2`), so that it is facing up (along the Y axis).
+:::
+
+## Usage
+
+```html
+<Plane :args="[1, 1]" color="teal" />
+
+// Plane with a custom material transformations
+<Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="teal" />
+</Plane>
+```

docs/index.md

@@ -7,7 +7,7 @@ titleTemplate: The solution for 3D on VueJS
 hero:
   name: TresJS
   text: Bring ThreeJS to VueJS ecosystem
-  tagline: Create awesome 3D experience with the framework you love.
+  tagline: Create awesome 3D experiences with the framework you love.
   image:
     src: /hero.png
     alt: Tresjs

packages/cientos/src/core/Plane.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TresColor } from '@tresjs/core/dist/types'
+import { shallowRef } from 'vue'
+
+withDefaults(
+  defineProps<{
+    args?: number[]
+    color?: TresColor
+  }>(),
+  {
+    args: () => [1, 1],
+    color: '0xffffff',
+  },
+)
+
+const planeRef = shallowRef()
+
+defineExpose({
+  value: planeRef,
+})
+</script>
+<template>
+  <TresMesh ref="planeRef" :rotation="[-Math.PI / 2, 0, 0]" v-bind="$attrs">
+    <TresPlaneGeometry :args="args" />
+    <slot>
+      <TresMeshBasicMaterial :color="color" />
+    </slot>
+  </TresMesh>
+</template>

packages/cientos/src/index.ts

@@ -4,8 +4,9 @@ import { useTweakPane } from './core/useTweakPane'
 import { GLTFModel } from './core/useGLTF/component'
 import { FBXModel } from './core/useFBX/component'
 import Text3D from './core/Text3D.vue'
+import Plane from './core/Plane.vue'
 
 export * from './core/useGLTF'
 export * from './core/useFBX'
 export * from './types'
-export { OrbitControls, TransformControls, useTweakPane, GLTFModel, FBXModel, Text3D }
+export { OrbitControls, TransformControls, useTweakPane, GLTFModel, FBXModel, Text3D, Plane }

packages/tres/src/App.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useTweakPane } from '@tresjs/cientos'
-import FBXModels from '/@/components/FBXModels.vue'
+import Shapes from '/@/components/Shapes.vue'
 
 useTweakPane()
 </script>
 
 <template>
   <Suspense>
-    <FBXModels />
+    <Shapes />
   </Suspense>
 </template>

packages/tres/src/components/Shapes.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { BasicShadowMap, NoToneMapping, sRGBEncoding } from 'three'
+import { reactive, shallowRef, watch } from 'vue'
+import { Plane, OrbitControls } from '../../../cientos/src/'
+
+const state = reactive({
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  physicallyCorrectLights: true,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+})
+
+const planeRef = shallowRef()
+
+watch(planeRef, plane => {
+  console.log('plane', plane.value.position)
+})
+</script>
+<template>
+  <TresCanvas v-bind="state">
+    <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
+    <OrbitControls />
+    <TresScene>
+      <TresAmbientLight :color="0xffffff" :intensity="0.5" />
+      <Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
+        <TresMeshToonMaterial color="teal" />
+      </Plane>
+    </TresScene>
+  </TresCanvas>
+</template>