feat(core): reactive props TresCanvas

packages/tres/src/components/TheExperience.vue

@@ -1,23 +1,119 @@
 <script setup lang="ts">
-import { OrbitControls, GLTFModel } from '../../../cientos/src/'
+import {
+  sRGBEncoding,
+  LinearEncoding,
+  BasicShadowMap,
+  PCFShadowMap,
+  PCFSoftShadowMap,
+  VSMShadowMap,
+  NoToneMapping,
+  LinearToneMapping,
+  ReinhardToneMapping,
+  CineonToneMapping,
+  ACESFilmicToneMapping,
+  CustomToneMapping,
+} from 'three'
+import { reactive } from 'vue'
+import { OrbitControls, useTweakPane } from '../../../cientos/src/'
+import { TresCanvas } from '../core/useRenderer/component'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
+
+const state = reactive({
+  clearColor: '#201919',
+  shadows: true,
+  alpha: false,
+  physicallyCorrectLights: true,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(state, 'clearColor', {
+  label: 'Background Color',
+  colorMode: 'hex',
+})
+pane.addInput(state, 'shadows', {
+  label: 'Shadows',
+})
+pane.addInput(state, 'physicallyCorrectLights', {
+  label: 'physicallyCorrectLights',
+})
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'outputEncoding',
+    options: [
+      { text: 'sRGBEncoding', value: sRGBEncoding },
+      { text: 'LinearEncoding', value: LinearEncoding },
+    ],
+    value: sRGBEncoding,
+  })
+  .on('change', ev => {
+    state.outputEncoding = ev.value
+  })
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'ShadowMap Type',
+    options: [
+      { text: 'BasicShadowMap', value: BasicShadowMap },
+      { text: 'PCFShadowMap', value: PCFShadowMap },
+      { text: 'PCFSoftShadowMap', value: PCFSoftShadowMap },
+      { text: 'VSMShadowMap', value: VSMShadowMap },
+    ],
+    value: BasicShadowMap,
+  })
+  .on('change', ev => {
+    state.shadowMapType = ev.value
+  })
+
+pane
+  .addBlade({
+    view: 'list',
+    label: 'toneMapping',
+    options: [
+      { text: 'NoToneMapping', value: NoToneMapping },
+      { text: 'LinearToneMapping', value: LinearToneMapping },
+      { text: 'ReinhardToneMapping', value: ReinhardToneMapping },
+      { text: 'CineonToneMapping', value: CineonToneMapping },
+      { text: 'ACESFilmicToneMapping', value: ACESFilmicToneMapping },
+      { text: 'CustomToneMapping', value: CustomToneMapping },
+    ],
+    value: NoToneMapping,
+  })
+  .on('change', ev => {
+    console.log(ev.value)
+    state.toneMapping = ev.value
+  })
 </script>
 <template>
-  <TresCanvas
-    shadows
-    alpha
-    clear-color="teal"
-    power-preference="high-performance"
-    preserve-drawing-buffer
-    physically-correct-lights
-  >
+  <TresCanvas v-bind="state">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
     <TresScene>
       <OrbitControls />
       <TresAmbientLight :intensity="0.5" />
-      <TresFog :color="'#444'" />
-      <GLTFModel draco path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/portal/portal.gltf" />
-      <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
+      <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
+        <TresConeGeometry :args="[1, 1.5, 3]" />
+        <TresMeshToonMaterial color="#82DBC5" />
+      </TresMesh>
+      <TresMesh :position="[0, 4, 0]" cast-shadow>
+        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+        <TresMeshToonMaterial color="#4F4F4F" />
+      </TresMesh>
+      <TresMesh :position="[2, 2, 0]" cast-shadow>
+        <TresSphereGeometry />
+        <TresMeshToonMaterial color="#FBB03B" />
+      </TresMesh>
+      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+        <TresMeshToonMaterial :color="floorTeal" />
+      </TresMesh>
+      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
     </TresScene>
   </TresCanvas>
 </template>

packages/tres/src/core/useRenderer/index.ts

@@ -1,4 +1,5 @@
-import { watch, ref, shallowRef, computed } from 'vue'
+/* eslint-disable max-len */
+import { watch, ref, shallowRef, computed, toRefs } from 'vue'
 import {
   MaybeComputedRef,
   MaybeElementRef,
@@ -19,6 +20,7 @@ import {
 import type { TextureEncoding, ToneMapping } from 'three'
 import { useRenderLoop, useTres } from '/@/core/'
 import { normalizeColor } from '/@/utils/normalize'
+import { TresColor } from '/@/types'
 
 export interface UseRendererOptions extends WebGLRendererParameters {
   /**
@@ -30,6 +32,8 @@ export interface UseRendererOptions extends WebGLRendererParameters {
 
   /**
    * Set the shadow map type
+   * Can be PCFShadowMap, PCFSoftShadowMap, BasicShadowMap, VSMShadowMap
+   * [see](https://threejs.org/docs/?q=we#api/en/constants/Renderer)
    *
    * @default PCFSoftShadowMap
    */
@@ -45,6 +49,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
 
   /**
    * Defines the output encoding of the renderer.
+   * Can be LinearEncoding, sRGBEncoding
    *
    * @default LinearEncoding
    */
@@ -52,6 +57,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
 
   /**
    * Defines the tone mapping used by the renderer.
+   * Can be NoToneMapping, LinearToneMapping, ReinhardToneMapping, Uncharted2ToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping
    *
    * @default NoToneMapping
    */
@@ -91,7 +97,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
    *
    * @default 0x000000
    */
-  clearColor?: MaybeComputedRef<string | number>
+  clearColor?: MaybeComputedRef<TresColor>
   windowSize?: MaybeComputedRef<boolean>
 }
 
@@ -107,8 +113,8 @@ const isReady = ref(false)
 export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef, options: UseRendererOptions) {
   // Defaults
   const {
-    alpha = false,
-    antialias,
+    alpha = true,
+    antialias = true,
     depth,
     logarithmicDepthBuffer,
     failIfMajorPerformanceCaveat,
@@ -124,11 +130,11 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
     context = undefined,
     powerPreference = 'default',
     preserveDrawingBuffer = false,
-    clearColor = normalizeColor('#000000'),
+    clearColor,
     windowSize = false,
-  } = options
+  } = toRefs(options)
 
-  const { width, height } = windowSize ? useWindowSize() : useElementSize(container)
+  const { width, height } = resolveUnref(windowSize) ? useWindowSize() : useElementSize(container)
 
   const { pixelRatio } = useDevicePixelRatio()
   const { pause, resume } = useRenderLoop()
@@ -148,13 +154,15 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
       return
     }
 
-    renderer.value.shadowMap.enabled = resolveUnref(shadows)
-    renderer.value.outputEncoding = resolveUnref(outputEncoding)
-    renderer.value.shadowMap.type = resolveUnref(shadowMapType)
-    renderer.value.physicallyCorrectLights = resolveUnref(physicallyCorrectLights)
-    renderer.value.toneMapping = resolveUnref(toneMapping)
-    renderer.value.toneMappingExposure = resolveUnref(toneMappingExposure)
-    renderer.value.setClearColor(normalizeColor(resolveUnref(clearColor)))
+    renderer.value.shadowMap.enabled = resolveUnref(shadows) as boolean
+    renderer.value.shadowMap.type = resolveUnref(shadowMapType) as ShadowMapType
+    renderer.value.toneMapping = 3
+    /*  renderer.value.toneMapping = (resolveUnref(toneMapping) as ToneMapping) || NoToneMapping */
+    renderer.value.toneMappingExposure = resolveUnref(toneMappingExposure) as number
+    renderer.value.outputEncoding = (resolveUnref(outputEncoding) as TextureEncoding) || LinearEncoding
+    if (clearColor?.value) renderer.value.setClearColor(normalizeColor(resolveUnref(clearColor) as TresColor))
+
+    renderer.value.physicallyCorrectLights = resolveUnref(physicallyCorrectLights) as boolean
   }
 
   const init = () => {
@@ -166,17 +174,17 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
 
     renderer.value = new WebGLRenderer({
       canvas: _canvas,
-      alpha,
-      antialias,
-      context,
-      depth,
-      failIfMajorPerformanceCaveat,
-      logarithmicDepthBuffer,
-      powerPreference,
-      precision,
-      stencil,
-      preserveDrawingBuffer,
-      premultipliedAlpha,
+      alpha: resolveUnref(alpha),
+      antialias: resolveUnref(antialias),
+      context: resolveUnref(context),
+      depth: resolveUnref(depth),
+      failIfMajorPerformanceCaveat: resolveUnref(failIfMajorPerformanceCaveat),
+      logarithmicDepthBuffer: resolveUnref(logarithmicDepthBuffer),
+      powerPreference: resolveUnref(powerPreference),
+      precision: resolveUnref(precision),
+      stencil: resolveUnref(stencil),
+      preserveDrawingBuffer: resolveUnref(preserveDrawingBuffer),
+      premultipliedAlpha: resolveUnref(premultipliedAlpha),
     })
 
     const { setState } = useTres()
@@ -203,15 +211,7 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
 
   watch([width, height, pixelRatio], updateRendererSize)
   watch(
-    () => [
-      shadows,
-      shadowMapType,
-      outputEncoding,
-      physicallyCorrectLights,
-      toneMapping,
-      toneMappingExposure,
-      clearColor,
-    ],
+    [shadows, shadowMapType, outputEncoding, physicallyCorrectLights, toneMapping, toneMappingExposure, clearColor],
     updateRendererOptions,
   )
 

packages/tres/src/types/index.d.ts

@@ -12,6 +12,7 @@ export type TresVNodeType = VNodeTypes & {
 export type TresVNode = VNode & { children?: Array<VNode>; type: TresVNodeType }
 export type TresAttributes = Record<string, any> & { args?: number[] }
 
+export type TresColor = string | number | Color | number[]
 declare global {
   // Define the window interface, with type annotations for the properties and methods of the window object
   interface Window {

packages/tres/src/utils/index.ts

@@ -0,0 +1,3 @@
+export function toSetMethodName(key: string) {
+  return 'set' + key[0].toUpperCase() + key.slice(1)
+}