feat(Lensflare): clean up imports

playground/src/pages/LensflareDemo.vue

@@ -2,7 +2,7 @@
 import { shallowRef } from 'vue'
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
 import { RandUtils, Levioso, Lensflare, Dodecahedron } from '@tresjs/cientos';
-import * as THREE from 'three';
+import { Color, MeshPhongMaterial } from 'three';
 
 import { OrbitControls } from '@tresjs/cientos'
 
@@ -30,7 +30,7 @@ onLoop(() => {
     if (!lightRef.value) return
 
     if (Math.random() > 0.99) {
-        lightRef.value.color = new THREE.Color(randomColor());
+        lightRef.value.color = new Color(randomColor());
         flarePropsRef.value = getFlareProps()
     }
 });
@@ -58,7 +58,7 @@ const rocks = new Array(ROCK_COUNT).fill(0).map((_, i) => ({
     key: i
 }));
 
-const rockMaterial = new THREE.MeshPhongMaterial({ color: 0x123141, specular: 0xffffff, shininess: 1000 });
+const rockMaterial = new MeshPhongMaterial({ color: 0x123141, specular: 0xffffff, shininess: 1000 });
 
 </script>
 
@@ -73,7 +73,7 @@ const rockMaterial = new THREE.MeshPhongMaterial({ color: 0x123141, specular: 0x
                 <Lensflare :seed="10" :flare="flarePropsRef" />
             </TresPointLight>
         </Levioso>
-        <TresPointLight :color="new THREE.Color(1, 1, 1)" :intensity="2000" :position="[10, 5, 0]">
+        <TresPointLight :color="new Color(1, 1, 1)" :intensity="2000" :position="[10, 5, 0]">
             <Lensflare :seed="Math.random()" />
         </TresPointLight>
         <Dodecahedron v-for="{ key, position, rotation, scale } in rocks" :key="key" :material="rockMaterial"

src/core/abstractions/Lensflare.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { Lensflare, LensflareElement } from 'three/addons/objects/Lensflare.js';
-import * as THREE from 'three';
-import { watch, shallowRef, onMounted } from 'vue'
+import { Lensflare, LensflareElement } from 'three/examples/jsm/objects/lensflare';
+import { MathUtils, Texture, TextureLoader, Color } from 'three';
+import { watch, shallowRef, onMounted, onUnmounted } from 'vue'
 import { normalizeColor } from '@tresjs/core';
 import RandUtils from '../../utils/RandUtils';
-import { onUnmounted } from 'vue';
 
 export type FlareElementProps = {
-  texture?: THREE.Texture | string
+  texture?: Texture | string
   size?: number
   distance?: number
 }
@@ -31,7 +30,7 @@ defineExpose({
   value: lensflareRef,
 });
 
-const textureLoader = new THREE.TextureLoader();
+const textureLoader = new TextureLoader();
 
 function linear(x: number): number {
   return x;
@@ -66,7 +65,7 @@ function easeOutBounce(x: number): number {
 
 const easingFunctions = [linear, easeInCubic, easeInOutCubic, easeInQuart, easeOutBounce];
 
-const lerp = THREE.MathUtils.lerp;
+const lerp = MathUtils.lerp;
 
 const TEXTURE_PATH = 'https://raw.githubusercontent.com/andretchen0/tresjs_assets/' +
   'b1bc3780de73a9328a530767c9a7f4cbab060396/textures/lensflare/';
@@ -204,7 +203,7 @@ const defaultElement: LensflareElement = {
   texture: `${TEXTURE_PATH}cirlceBlur.png`,
   size: 64,
   distance: 0,
-  color: new THREE.Color("white")
+  color: new Color("white")
 }
 
 const threeLensflare = new Lensflare();

src/utils/RandUtils.ts

@@ -1,4 +1,4 @@
-import { MathUtils } from 'THREE'
+import { MathUtils } from 'three'
 const clamp = MathUtils.clamp
 
 /**