feat: make some of the utility methods available to users (#1068)

* refactor: reorganize HTML tag handling and utility functions

- Moved the `HTML_TAGS` constant and `isHTMLTag` function from `src/utils/index.ts` to `src/utils/is.ts` for better modularity.
- Removed the `makeMap` function from `index.ts` and imported it in `is.ts`, enhancing code clarity and separation of concerns.
- Cleaned up unused code in `index.ts` to streamline the utility functions.

* fix: fixed import

* refactor: made use of radashis type guards and removed unused ones.

* refactor: structured type guards and made them smaller and more readable

* refactor: remove unused type guard tests and consolidate exports in utility files

* refactor: Refactor utility functions and improve equality checks in node operations, removed unused methods

* refactor: removed more unused code; added string util

* refactor: moved noop

* refactor: moved pixelRatio stuff

* refactor: replaced shuffle

* refactor: separated getObjectByUuid

* refactor: removed unused highlight material methods, moved used one

* chore: removed unused dependency

* refactor: moved filterInPlace

* moved extractBindingPosition

* refactor: moved hasMap

* chore: removed comment

* Add exports for three and tres utility modules

Export utility functions from utils/is/three and utils/is/tres to make them available for external use.

* fix: added null check

* chore: made use of isMesh in docs

* made use of type guards

* chore: beautified code a bit

* docs: added type guard docs

---------

Co-authored-by: alvarosabu <[email protected]>

Author: Tinoooo

docs/app/components/examples/web-gpu/HologramCube.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { isMesh } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
 import { add, cameraProjectionMatrix, cameraViewMatrix, color, Fn, hash, mix, normalView, positionWorld, sin, timerGlobal, uniform, varying, vec3, vec4 } from 'three/tsl'
-import type { Mesh, Object3D } from 'three/webgpu'
 import { AdditiveBlending, DoubleSide, MeshBasicNodeMaterial } from 'three/webgpu'
 
 const { nodes } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
@@ -46,8 +46,6 @@ material.colorNode = Fn(() => {
 })()
 
 watch(model, (newModel) => {
-  const isMesh = (child: Object3D): child is Mesh => 'isMesh' in child && !!(child.isMesh)
-
   newModel?.traverse((child) => {
     if (isMesh(child)) {
       child.material = material

docs/content/3.api/4.utils/.navigation.yml

@@ -0,0 +1,2 @@
+title: Utils
+icon: i-lucide-wrench

docs/content/3.api/4.utils/1.type-guards.md

@@ -0,0 +1,22 @@
+---
+title: Type Guards
+description: TresJS provides type guard methods to help you determine the type of a Three.js object.
+---
+
+To help you work with Three.js objects more effectively, TresJS provides a set of type guard methods. These methods allow you to determine the type of a Three.js object, making your code more robust and easier to maintain.
+The supported type guards are:
+
+- `isBufferGeometry`
+- `isCamera`
+- `isColor`
+- `isColorRepresentation`
+- `isFog`
+- `isGroup`
+- `isLayers`
+- `isLight`
+- `isMaterial`
+- `isMesh`
+- `isObject3D`
+- `isOrthographicCamera`
+- `isPerspectiveCamera`
+- `isScene`

docs/content/3.api/4.advanced/.navigation.yml renamed to docs/content/3.api/5.advanced/.navigation.yml

@@ -72,6 +72,7 @@ const createWebGPURenderer = (ctx: TresRendererSetupContext) => {
 
   ```vue [components/HologramCube.vue]
   <script setup lang="ts">
+  import { isMesh } from '@tesjs/core'
   import { useGLTF } from '@tresjs/cientos'
   import { add, cameraProjectionMatrix, cameraViewMatrix, color, Fn, hash, mix, normalView, positionWorld, sin, timerGlobal, uniform, varying, vec3, vec4 } from 'three/tsl'
   import { AdditiveBlending, DoubleSide, MeshBasicNodeMaterial } from 'three/webgpu'
@@ -119,7 +120,7 @@ const createWebGPURenderer = (ctx: TresRendererSetupContext) => {
 
   watch(model, (newModel) => {
     newModel.traverse((child) => {
-      if (child.isMesh) {
+      if (isMesh(child)) {
         child.material = material
       }
     })

docs/content/3.api/4.advanced/performance.md renamed to docs/content/3.api/5.advanced/performance.md

@@ -78,10 +78,10 @@
     "vue": ">=3.4"
   },
   "dependencies": {
-    "@alvarosabu/utils": "^3.2.0",
     "@pmndrs/pointer-events": "^6.6.17",
     "@vue/devtools-api": "^7.7.2",
-    "@vueuse/core": "^12.5.0"
+    "@vueuse/core": "^12.5.0",
+    "radashi": "^12.6.0"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.0",

docs/content/3.api/4.advanced/primitives.md renamed to docs/content/3.api/5.advanced/primitives.md

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isMesh } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
 import { add, cameraProjectionMatrix, cameraViewMatrix, color, Fn, hash, mix, normalView, positionWorld, sin, timerGlobal, uniform, varying, vec3, vec4 } from 'three/tsl'
 import { AdditiveBlending, DoubleSide, MeshBasicNodeMaterial } from 'three/webgpu'
@@ -46,7 +47,7 @@ material.colorNode = Fn(() => {
 
 watch(model, (newModel) => {
   newModel.traverse((child) => {
-    if (child.isMesh) {
+    if (isMesh(child)) {
       child.material = material
     }
   })