Merge branch 'main' into feature/2-docs-for-cientos

CONTRIBUTING.md

@@ -38,7 +38,7 @@ TresJS is an ecosystem of packages, each one of them has its own purpose. The ma
 
 You can go to the `packages/tres` folder and run `pnpm dev` to start the dev server. This will start a vite server that will watch for changes in the code and rebuild the package.
 
-This is only a playground to test the core package, please keep the `App.vue` file as clean as possible.
+This is only a playground to test the core package, to keep the `App.vue` clean create a new component with your scene and import it in the `App.vue` file.
 
 ### Cientos
 

README.md

@@ -31,7 +31,7 @@ Checkout the [docs](https://tresjs.org)
 
 ## Demos
 
-- [Stackblizt Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
+- [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
 
 ## Contribution
 

package.json

@@ -32,7 +32,7 @@
     "publish:cientos": "pnpm publish --filter @tresjs/cientos",
     "changeset-publish": "changeset publish",
     "changeset-tag": "changeset tag",
-    "changelog": "pnpm run changelog:tres",
+    "changelog": "pnpm run changelog:tres && pnpm run changelog:cientos",
     "changelog:tres": "echo 'generate @tresjs/core changelog' && conventional-changelog -p angular -i ./packages/tres/CHANGELOG.md -s  --commit-path ./packages/tres && git add ./packages/tres/CHANGELOG.md",
     "changelog:cientos": "echo 'generate @tresjs/cientos changelog' && conventional-changelog -p angular -i ./packages/cientos/CHANGELOG.md -s  --commit-path ./packages/cientos && git add ./packages/cientos/CHANGELOG.md",
     "lint": "pnpm run lint:tres && pnpm run lint:cientos",
@@ -51,8 +51,8 @@
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
     "@stackblitz/sdk": "^1.8.1",
-    "@tresjs/cientos": "workspace:^1.1.0",
-    "@tresjs/core": "workspace:^1.2.1",
+    "@tresjs/cientos": "workspace:^1.2.2",
+    "@tresjs/core": "workspace:^1.4.0",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "conventional-changelog-cli": "^2.2.2",
@@ -61,7 +61,7 @@
     "eslint-plugin-vue": "^9.7.0",
     "prettier": "^2.7.1",
     "vitepress": "1.0.0-alpha.29",
-    "vue": "^3.2.41",
+    "vue": "^3.2.45",
     "vue-eslint-parser": "^9.1.0"
   }
 }

packages/cientos/CHANGELOG.md

@@ -1,3 +1,26 @@
+# 1.2.2 (2022-12-19)
+
+### Bug Fixes
+
+- forcing a release with correct bundle versions ([a211e75](https://github.com/Tresjs/tres/commit/a211e758e16bab34d9afaad8496585e1c5b7de3e))
+
+# 1.2.1 (2022-12-19)
+
+### Bug Fixes
+
+- **cientos:** draco encoding and decoderPath ([c9bd7ad](https://github.com/Tresjs/tres/commit/c9bd7ad6ef3ba86855c887886a9032fe0a324dd2))
+
+# 1.2.0 (2022-12-19)
+
+### Bug Fixes
+
+- added copyPublicDir: false to remove static assets on package ([7e8de9c](https://github.com/Tresjs/tres/commit/7e8de9c4b4e63107b79a81a8686ad97256a29017))
+- center props in text3D ([a4e66d3](https://github.com/Tresjs/tres/commit/a4e66d30a015a62ad346e1186f30ea239f7a7bdd))
+
+### Features
+
+- updated deps and clean up app.vue ([88de6eb](https://github.com/Tresjs/tres/commit/88de6eb756967e7f9981bece6bb7105dd9d893d5))
+
 # 1.1.0 (2022-12-08)
 
 ### Bug Fixes

packages/cientos/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/cientos",
   "description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -36,25 +36,25 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
   },
   "peerDependencies": {
-    "@tresjs/core": "workspace:^1.2.1",
+    "@tresjs/core": "workspace:^1.4.0",
     "three": "latest",
     "vue": "^3.2.45"
   },
   "devDependencies": {
     "@tweakpane/plugin-essentials": "^0.1.5",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "kolorist": "^1.6.0",
-    "pathe": "^0.3.9",
+    "pathe": "^1.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
-    "tweakpane": "^3.1.0",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.3",
-    "vite-plugin-banner": "^0.6.1",
-    "vite-plugin-dts": "^1.7.0"
+    "tweakpane": "^3.1.1",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.3",
+    "vite-plugin-banner": "^0.7.0",
+    "vite-plugin-dts": "^1.7.1"
   },
   "dependencies": {
-    "@tresjs/core": "workspace:^1.2.1",
-    "three-stdlib": "^2.17.3"
+    "@tresjs/core": "workspace:^1.4.0",
+    "three-stdlib": "^2.21.1"
   }
 }

packages/cientos/src/core/Text3D.vue

@@ -34,7 +34,8 @@ const props = withDefaults(
     bevelThickness?: number
     bevelSize?: number
     bevelOffset?: number
-    bevelSegments?: number
+    bevelSegments?: number,
+    center?: boolean
   }>(),
   {
     size: 0.5,
@@ -45,8 +46,9 @@ const props = withDefaults(
     bevelSize: 0.02,
     bevelOffset: 0,
     bevelSegments: 4,
+    center:false
   },
-)
+  )
 
 const { extend } = useCientos()
 
@@ -92,7 +94,7 @@ const textOptions = computed(() => {
 </script>
 <template>
   <TresMesh v-if="font">
-    <TresTextGeometry v-if="localText" :args="[localText, textOptions]" />
+    <TresTextGeometry v-if="localText" :args="[localText, textOptions]" :center="center" />
     <slot />
   </TresMesh>
 </template>

packages/cientos/src/core/useGLTF/component.ts

@@ -7,12 +7,13 @@ export const GLTFModel = defineComponent({
   props: {
     path: String,
     draco: Boolean,
+    decoderPath: String,
   },
 
   async setup(props) {
     const scene = inject<Ref<Scene>>('local-scene')
 
-    const { scene: model } = await useGLTF(props.path as string, { draco: props.draco })
+    const { scene: model } = await useGLTF(props.path as string, { draco: props.draco, decoderPath: props.decoderPath })
     if (scene?.value) {
       scene.value.add(model)
     }

packages/cientos/src/core/useGLTF/index.ts

@@ -1,4 +1,5 @@
 import { GLTFLoader, DRACOLoader } from 'three-stdlib'
+/* import { useLoader } from '../../../../tres/src/core' */
 import { useLoader } from '@tresjs/core'
 import { Object3D } from 'three'
 
@@ -24,10 +25,13 @@ function setExtensions(options: GLTFLoaderOptions, extendLoader?: (loader: GLTFL
     if (extendLoader) {
       extendLoader(loader as GLTFLoader)
     }
-    if (!dracoLoader) {
-      dracoLoader = new DRACOLoader()
+    if (options.draco) {
+      if (!dracoLoader) {
+        dracoLoader = new DRACOLoader()
+      }
+      dracoLoader.setDecoderPath(options.decoderPath || 'https://www.gstatic.com/draco/versioned/decoders/1.4.3/')
+      loader.setDRACOLoader(dracoLoader)
     }
-    dracoLoader.setDecoderPath(options.decoderPath || 'https://www.gstatic.com/draco/versioned/decoders/1.4.3/')
   }
 }
 export async function useGLTF(

packages/cientos/src/core/useTweakPane/index.ts

@@ -8,15 +8,17 @@ let pane: TweakPane
 let fpsGraph: any
 
 export const useTweakPane = (selector = 'tres-container') => {
-  pane = new Pane({
-    container: (document.querySelector(selector) as HTMLElement) || undefined,
-  }) as TweakPane
-  pane.registerPlugin(EssentialsPlugin)
+  if (!pane) {
+    pane = new Pane({
+      container: (document.querySelector(selector) as HTMLElement) || undefined,
+    }) as TweakPane
+    pane.registerPlugin(EssentialsPlugin)
 
-  fpsGraph = pane.addBlade({
-    view: 'fpsgraph',
-    label: 'fpsgraph',
-  })
+    fpsGraph = pane.addBlade({
+      view: 'fpsgraph',
+      label: 'fpsgraph',
+    })
+  }
 
   function disposeTweakPane() {
     if (pane) {

packages/cientos/vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vite'
 import banner from 'vite-plugin-banner'
 import dts from 'vite-plugin-dts'
 import analyze from 'rollup-plugin-analyzer'
-import { visualizer } from 'rollup-plugin-visualizer'
+/* import { visualizer } from 'rollup-plugin-visualizer' */
 
 import { resolve } from 'pathe'
 
@@ -46,11 +46,11 @@ export default defineConfig({
     rollupOptions: {
       plugins: [
         analyze(),
-        visualizer({
+        /* visualizer({
           gzipSize: true,
           brotliSize: true,
           open: false,
-        }),
+        }), */
       ],
       external: ['three', 'vue', '@tresjs/core'],
       output: {

packages/tres/CHANGELOG.md

@@ -1,3 +1,44 @@
+# 1.4.0 (2022-12-22)
+
+### Features
+
+- **core:** added camel keys to set attributes (Support for BufferGeometry) ([fd60380](https://github.com/Tresjs/tres/commit/fd603802a017ee57274542621eb5a21142be9d4a))
+
+## 1.3.3 (2022-12-21)
+
+### Bug Fixes
+
+- **core:** added check for fog ([0a0f7d3](https://github.com/Tresjs/tres/commit/0a0f7d39ace4e3705ec3d8f47ff51bda511ca3e3))
+
+### Features
+
+- **core:** reactive props TresCanvas ([35c8b56](https://github.com/Tresjs/tres/commit/35c8b561c1759cdf584e0e11952f0743e04e5caf))
+
+# 1.3.2 (2022-12-19)
+
+### Bug Fixes
+
+- forcing a release with correct bundle versions ([a211e75](https://github.com/Tresjs/tres/commit/a211e758e16bab34d9afaad8496585e1c5b7de3e))
+
+## 1.3.1 (2022-12-19)
+
+### Bug Fixes
+
+- **cientos:** draco encoding and decoderPath ([c9bd7ad](https://github.com/Tresjs/tres/commit/c9bd7ad6ef3ba86855c887886a9032fe0a324dd2))
+
+# 1.3.0 (2022-12-19)
+
+### Bug Fixes
+
+- added copyPublicDir: false to remove static assets on package ([7e8de9c](https://github.com/Tresjs/tres/commit/7e8de9c4b4e63107b79a81a8686ad97256a29017))
+- center props in text3D ([a4e66d3](https://github.com/Tresjs/tres/commit/a4e66d30a015a62ad346e1186f30ea239f7a7bdd))
+  fcfbce9a03d5ec85ab160b4cc0e99c254b715c1a))
+
+### Features
+
+- docs: updated contributing docs ([d469c90](https://github.com/Tresjs/tres/commit/d469c9004ea7e6702635832e9d5addeba6b6f42d))
+- updated deps and clean up app.vue ([88de6eb](https://github.com/Tresjs/tres/commit/88de6eb756967e7f9981bece6bb7105dd9d893d5))
+
 # 1.2.1 (2022-12-11)
 
 ### Bug Fixes

packages/tres/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -40,10 +40,11 @@
     "story:dev": "histoire dev",
     "story:build": "histoire build",
     "story:preview": "histoire preview",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {
-    "three": "^0.146.0",
+    "three": "^0.148.0",
     "vue": "^3.2.45"
   },
   "peerDependencies": {
@@ -52,26 +53,27 @@
   "devDependencies": {
     "@alvarosabu/utils": "^2.2.0",
     "@histoire/plugin-vue": "0.11.7",
-    "@tresjs/cientos": "workspace:^1.1.0",
+    "@tresjs/cientos": "workspace:^1.2.2",
     "@types/three": "^0.146.0",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vitest/coverage-c8": "^0.25.1",
-    "@vitest/ui": "^0.25.1",
-    "@vueuse/core": "^9.5.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.25.8",
+    "@vitest/ui": "^0.25.8",
+    "@vueuse/core": "^9.7.0",
     "gl": "6.0.1",
-    "happy-dom": "^7.7.0",
-    "histoire": "0.11.7",
+    "happy-dom": "^8.1.0",
+    "histoire": "0.11.9",
     "kolorist": "^1.6.0",
-    "pathe": "^0.3.9",
+    "pathe": "^1.0.0",
+    "release-it": "^15.5.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
-    "unplugin-vue-components": "^0.22.9",
-    "vite": "^3.2.3",
-    "vite-plugin-banner": "^0.6.1",
-    "vite-plugin-dts": "^1.7.0",
-    "vite-plugin-glsl": "^0.5.3",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.0.3",
+    "vite-plugin-banner": "^0.7.0",
+    "vite-plugin-dts": "^1.7.1",
+    "vite-plugin-glsl": "^1.0.1",
     "vite-plugin-require-transform": "^1.0.4",
-    "vitest": "^0.25.1",
+    "vitest": "^0.25.8",
     "vue-demi": "^0.13.11"
   }
 }

packages/tres/src/App.vue

@@ -1,32 +1,12 @@
 <script setup lang="ts">
-/* import { useTexture } from '@tresjs/core' */
-import { OrbitControls, Text3D } from '@tresjs/cientos'
+import { useTweakPane } from '@tresjs/cientos'
+import TheExperience from '/@/components/TheExperience.vue'
 
-/* const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
- */
+useTweakPane()
 </script>
 
 <template>
   <Suspense>
-    <TresCanvas
-      clear-color="#82DBC5"
-      shadows
-      alpha
-      window-size
-      power-preference="high-performance"
-      preserve-drawing-buffer
-      physically-correct-lights
-    >
-      <OrbitControls />
-      <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-      <TresScene>
-        <Text3D font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json">
-          TresJS
-          <TresMeshNormalMaterial />
-        </Text3D>
-        <TresAxesHelper :args="[1]" />
-        <TresDirectionalLight :position="[0, 2, 4]" :intensity="2" cast-shadow />
-      </TresScene>
-    </TresCanvas>
+    <TheExperience />
   </Suspense>
 </template>

packages/tres/src/components/TheExperience.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+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 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" />
+      <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/components/TheParticles.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { OrbitControls } from '@tresjs/cientos/src'
+import { TresCanvas } from '../core/useRenderer/component'
+import { AdditiveBlending } from 'three'
+import { useRenderLoop } from '../core/useRenderLoop'
+/* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
+
+const state = reactive({
+  clearColor: 'teal',
+  shadows: true,
+  alpha: false,
+  physicallyCorrectLights: true,
+})
+
+const shader = {
+  transparent: true,
+  blending: AdditiveBlending,
+  depthWrite: false,
+
+  vertexShader: `
+  uniform float uPixelRatio;
+  uniform float uSize;
+  uniform float uTime;
+  attribute float aScale;
+
+  void main()
+  {
+      vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+      modelPosition.y += sin(uTime + modelPosition.x * 100.0) * aScale * 0.2;
+      vec4 viewPosition = viewMatrix * modelPosition;
+      vec4 projectionPosition = projectionMatrix * viewPosition;
+
+      gl_Position = projectionPosition;
+      gl_PointSize = aScale * uSize * uPixelRatio;
+      gl_PointSize *= (1.0 / - viewPosition.z);
+  }
+  `,
+  fragmentShader: `
+  void main()
+    {
+      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
+      float strength = 0.05 / distanceToCenter - 0.1;
+
+      gl_FragColor = vec4(1.0, 1.0, 1.0, strength);
+    }
+  `,
+  uniforms: {
+    uSize: { value: 100 },
+    uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
+    uTime: { value: 0 },
+  },
+}
+
+const firefliesCount = 30
+const positionArray = new Float32Array(firefliesCount * 3)
+const scaleArray = new Float32Array(firefliesCount)
+
+for (let i = 0; i < firefliesCount; i++) {
+  positionArray[i * 3 + 0] = Math.random() * 4
+  positionArray[i * 3 + 1] = Math.random() * 4
+  positionArray[i * 3 + 2] = Math.random() * 4
+  scaleArray[i] = Math.random()
+}
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ elapsed }) => {
+  shader.uniforms.uTime.value = elapsed
+})
+</script>
+<template>
+  <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" />
+      <TresPoints>
+        <TresBufferGeometry :position="[positionArray, 3]" :a-scale="[scaleArray, 1]" />
+        <TresShaderMaterial v-bind="shader" />
+      </TresPoints>
+      <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
+    </TresScene>
+  </TresCanvas>
+</template>

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

@@ -1,6 +1,6 @@
 /* eslint-disable new-cap */
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { OrthographicCamera, PerspectiveCamera, Scene } from 'three'
+import { BufferAttribute, FogBase, OrthographicCamera, PerspectiveCamera, Scene } from 'three'
 import { defineComponent, inject, Ref } from 'vue'
 import { isArray, isDefined, isFunction } from '@alvarosabu/utils'
 import { normalizeVectorFlexibleParam } from '/@/utils/normalize'
@@ -13,6 +13,16 @@ const VECTOR3_PROPS = ['rotation', 'scale', 'position']
 export function useInstanceCreator(prefix: string) {
   const { logMessage, logError } = useLogger()
 
+  function processSetAttributes(props: Record<string, any>, instance: TresInstance) {
+    if (!isDefined(props)) return
+    if (!isDefined(instance)) return
+
+    Object.entries(props).forEach(([key, value]) => {
+      const camelKey = key.replace(/(-\w)/g, m => m[1].toUpperCase())
+      instance.setAttribute(camelKey, new BufferAttribute(...(value as ConstructorParameters<typeof BufferAttribute>)))
+    })
+  }
+
   function processProps(props: Record<string, any>, instance: TresInstance) {
     if (!isDefined(props)) return
     if (!isDefined(instance)) return
@@ -45,6 +55,7 @@ export function useInstanceCreator(prefix: string) {
 
           // Check if the property is a function
           if (isFunction(instance[camelKey])) {
+            if (key === 'center' && !value) return
             // Call the function with the value, spread if it's an array
             instance[camelKey](...(isArray(value) ? value : [value]))
             return
@@ -90,7 +101,11 @@ export function useInstanceCreator(prefix: string) {
       // check if props is defined on the vnode
       if (vnode?.props) {
         // if props is defined, process the props and pass the internalInstance to update its properties
-        processProps(vnode.props, internalInstance)
+        if (vNodeType === 'BufferGeometry') {
+          processSetAttributes(vnode.props, internalInstance)
+        } else {
+          processProps(vnode.props, internalInstance)
+        }
       }
 
       return internalInstance
@@ -119,72 +134,79 @@ export function useInstanceCreator(prefix: string) {
   }
 
   function createComponentInstances(catalogue: Ref<TresCatalogue>) {
-    return Object.entries(catalogue.value)
-      .filter(([_key, value]) => (value as { prototype: any })?.prototype?.constructor?.toString().includes('class'))
-      .map(([key, threeObj]) => {
-        const name = `${prefix}${key}`
-        const cmp = defineComponent({
-          name,
-          setup(props, { slots, attrs, ...ctx }) {
-            const { scene: fallback } = useScene()
-            const scene = inject<Ref<Scene>>('local-scene') || fallback
-            const catalogue = inject<Ref<TresCatalogue>>('catalogue')
-            const { pushCamera } = useCamera()
-
-            let instance = createInstance(threeObj, attrs, slots)
-            processProps(attrs, instance)
-            // If the instance is a camera, push it to the camera stack
-            if (instance instanceof PerspectiveCamera || instance instanceof OrthographicCamera) {
-              pushCamera(instance)
-            }
-
-            // If the instance is a valid Object3D, add it to the scene
-            if (instance.isObject3D) {
-              scene?.value.add(instance)
-            }
-
-            if (import.meta.hot) {
-              import.meta.hot.on('vite:beforeUpdate', () => {
-                scene.value.remove(instance)
-              })
+    return (
+      Object.entries(catalogue.value)
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .filter(([_key, value]) => (value as { prototype: any })?.prototype?.constructor?.toString().includes('class'))
+        .map(([key, threeObj]) => {
+          const name = `${prefix}${key}`
+          const cmp = defineComponent({
+            name,
+            setup(props, { slots, attrs, ...ctx }) {
+              const { scene: fallback } = useScene()
+              const scene = inject<Ref<Scene>>('local-scene') || fallback
+              const catalogue = inject<Ref<TresCatalogue>>('catalogue')
+              const { pushCamera } = useCamera()
+
+              let instance = createInstance(threeObj, attrs, slots)
+              processProps(attrs, instance)
+              // If the instance is a camera, push it to the camera stack
+              if (instance instanceof PerspectiveCamera || instance instanceof OrthographicCamera) {
+                pushCamera(instance)
+              }
+
+              // If the instance is a valid Object3D, add it to the scene
+              if (instance.isObject3D) {
+                scene?.value.add(instance)
+              }
+
+              if (scene?.value && instance.isFog) {
+                scene.value.fog = instance as unknown as FogBase
+              }
+
+              if (import.meta.hot) {
+                import.meta.hot.on('vite:beforeUpdate', () => {
+                  scene.value.remove(instance)
+                })
 
-              import.meta.hot.on('vite:afterUpdate', () => {
-                instance = createInstance(threeObj, attrs, slots)
-                processProps(attrs, instance)
-
-                if (instance.isObject3D) {
-                  scene?.value.add(instance)
-                }
-
-                logMessage(name, {
-                  instance,
-                  sceneuuid: scene?.value.uuid,
-                  catalogue: catalogue?.value.uuid,
-                  props,
-                  slots: slots.default ? slots.default() : undefined,
-                  attrs,
-                  ctx,
-                  scene,
+                import.meta.hot.on('vite:afterUpdate', () => {
+                  instance = createInstance(threeObj, attrs, slots)
+                  processProps(attrs, instance)
+
+                  if (instance.isObject3D) {
+                    scene?.value.add(instance)
+                  }
+
+                  logMessage(name, {
+                    instance,
+                    sceneuuid: scene?.value.uuid,
+                    catalogue: catalogue?.value.uuid,
+                    props,
+                    slots: slots.default ? slots.default() : undefined,
+                    attrs,
+                    ctx,
+                    scene,
+                  })
                 })
+              }
+
+              ctx.expose(instance)
+              logMessage(name, {
+                sceneuuid: scene?.value.uuid,
+                catalogue: catalogue?.value.uuid,
+                props,
+                slots: slots.default ? slots.default() : undefined,
+                attrs,
+                ctx,
+                scene,
               })
-            }
-
-            ctx.expose(instance)
-            logMessage(name, {
-              sceneuuid: scene?.value.uuid,
-              catalogue: catalogue?.value.uuid,
-              props,
-              slots: slots.default ? slots.default() : undefined,
-              attrs,
-              ctx,
-              scene,
-            })
-            return () => {}
-          },
-        })
+              return () => {}
+            },
+          })
 
-        return [name, cmp]
-      })
+          return [name, cmp]
+        })
+    )
   }
 
   return {

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

@@ -47,7 +47,7 @@ export async function useLoader<T extends LoaderProto<T>, U extends string | str
   }
 
   if (extensions) {
-    extensions(Loader)
+    extensions(proto)
   }
 
   const paths = (Array.isArray(url) ? url : [url]) as string[]

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,14 @@ 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 = (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 +173,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 +210,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)
+}