Full Code of Tresjs/cientos for AI

Repository: Tresjs/cientos
Branch: main
Commit: 836292475789
Files: 510
Total size: 1.0 MB

Directory structure:
gitextract_1bymcgrw/

├── .github/
│   ├── CODEOWNERS
│   ├── FUNDING.yml
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug.report.yml
│   │   ├── config.yml
│   │   └── feature_request.yml
│   └── workflows/
│       ├── lint-pr.yml
│       ├── lint.yml
│       └── pkg.pr.new.yml
├── .gitignore
├── .npmrc
├── .release-it.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── core.d.ts
├── docs/
│   ├── .eslintrc.json
│   ├── .vitepress/
│   │   ├── config.ts
│   │   └── theme/
│   │       ├── TresLayout.vue
│   │       ├── assets/
│   │       │   └── feather.glb
│   │       ├── components/
│   │       │   ├── AccumulativeShadowsDemo.vue
│   │       │   ├── AlignDemo.vue
│   │       │   ├── AnimatedSpriteCenterDemo.vue
│   │       │   ├── AnimatedSpriteDefinitionsDemo.vue
│   │       │   ├── AnimatedSpriteDemo.vue
│   │       │   ├── AnimatedSpriteNamedAnimationDemo.vue
│   │       │   ├── BackdropDemo.vue
│   │       │   ├── BakeShadowsDemo.vue
│   │       │   ├── BillboardDemo.vue
│   │       │   ├── BoundsDemo.vue
│   │       │   ├── CameraControlsDemo.vue
│   │       │   ├── CatmullRomCurve3Demo.vue
│   │       │   ├── CientosComponentListGridView/
│   │       │   │   └── index.vue
│   │       │   ├── CircleShadowDemo.vue
│   │       │   ├── ContactShadowsDemo.vue
│   │       │   ├── CubeCameraDemo.vue
│   │       │   ├── CubicBezierLineDemo.vue
│   │       │   ├── CustomShaderMaterialDemo.vue
│   │       │   ├── DocsDemo.vue
│   │       │   ├── EdgesDemo.vue
│   │       │   ├── EnvironmentDemo.vue
│   │       │   ├── EnvironmentPresetsDemo.vue
│   │       │   ├── FBXModelDemo.vue
│   │       │   ├── FboCube.vue
│   │       │   ├── FboDemo.vue
│   │       │   ├── Feather.vue
│   │       │   ├── FitDemo.vue
│   │       │   ├── GLTFModelDemo.vue
│   │       │   ├── GlassMaterialDemo.vue
│   │       │   ├── GradientTextureDemo.vue
│   │       │   ├── GridDemo.vue
│   │       │   ├── HelperDemo.vue
│   │       │   ├── HolographicMaterialDemo.vue
│   │       │   ├── HtmlDemo.vue
│   │       │   ├── HtmlLaptopDemo.vue
│   │       │   ├── HtmlOccludeDemo.vue
│   │       │   ├── ImageDemo.vue
│   │       │   ├── KeyboardControlsDemo.vue
│   │       │   ├── LODDemo.vue
│   │       │   ├── LensflareDemo.vue
│   │       │   ├── LeviosoDemo.vue
│   │       │   ├── Line2Demo.vue
│   │       │   ├── LoveVueThreeJS.vue
│   │       │   ├── MapControlsDemo.vue
│   │       │   ├── MarchingCubesDemo.vue
│   │       │   ├── MaskDemo.vue
│   │       │   ├── MeshReflectionMaterialDemo.vue
│   │       │   ├── MouseParallaxDemo.vue
│   │       │   ├── OceanDemo.vue
│   │       │   ├── OrbitControlsDemo.vue
│   │       │   ├── OutlineDemo.vue
│   │       │   ├── PBRTexturesDemo.vue
│   │       │   ├── PointMaterialDemo.vue
│   │       │   ├── PositionalAudioDemo.vue
│   │       │   ├── PrecipitationBeamDemo.vue
│   │       │   ├── PrecipitationDemo.vue
│   │       │   ├── PrecipitationRainDemo.vue
│   │       │   ├── PrecipitationStormDemo.vue
│   │       │   ├── QuadraticBezierLineDemo.vue
│   │       │   ├── ReflectorDemo.vue
│   │       │   ├── RoundedBoxDemo.vue
│   │       │   ├── SVGDemo.vue
│   │       │   ├── SamplerDemo.vue
│   │       │   ├── ScreenQuadDemo.vue
│   │       │   ├── ScreenSizerDemo.vue
│   │       │   ├── ScreenSpaceDemo.vue
│   │       │   ├── ScrollControlsDemo.vue
│   │       │   ├── ScrollControlsHorizontalDemo.vue
│   │       │   ├── ScrollControlsPagesDemo.vue
│   │       │   ├── ScrollControlsProgressCameraDemo.vue
│   │       │   ├── ScrollControlsProgressDemo.vue
│   │       │   ├── ScrollControlsSlotsDemo.vue
│   │       │   ├── SkyDemo.vue
│   │       │   ├── SmokeDemo.vue
│   │       │   ├── SoftShadowsDemo.vue
│   │       │   ├── SparklesDemo.vue
│   │       │   ├── SparklesDirectionalLightDemo.vue
│   │       │   ├── SparklesMixDemo.vue
│   │       │   ├── SparklesSequenceDemo.vue
│   │       │   ├── StageDemo.vue
│   │       │   ├── StarsDemo.vue
│   │       │   ├── SuperformulaDemo.vue
│   │       │   ├── SuperformulaLechesDemo.vue
│   │       │   ├── Text3Demo.vue
│   │       │   ├── TransformControlsDemo.vue
│   │       │   ├── UseFBODemo.vue
│   │       │   ├── UseFBXDemo.vue
│   │       │   ├── UseGLTFDemo.vue
│   │       │   ├── UseSurfaceSamplerDemo.vue
│   │       │   ├── UseTextureDemo.vue
│   │       │   ├── VideoTextureDemo.vue
│   │       │   └── WobbleMaterialDemo.vue
│   │       ├── index.ts
│   │       └── style.css
│   ├── api-examples.md
│   ├── component-list/
│   │   ├── components.ts
│   │   └── index.md
│   ├── guide/
│   │   ├── abstractions/
│   │   │   ├── animated-sprite.md
│   │   │   ├── billboard.md
│   │   │   ├── cube-camera.md
│   │   │   ├── edges.md
│   │   │   ├── fbo.md
│   │   │   ├── global-audio.md
│   │   │   ├── gradient-texture.md
│   │   │   ├── image.md
│   │   │   ├── lensflare.md
│   │   │   ├── levioso.md
│   │   │   ├── marching-cubes.md
│   │   │   ├── mask.md
│   │   │   ├── mouse-parallax.md
│   │   │   ├── outline.md
│   │   │   ├── positional-audio.md
│   │   │   ├── reflector.md
│   │   │   ├── sampler.md
│   │   │   ├── screen-sizer.md
│   │   │   ├── screen-space.md
│   │   │   ├── text-3d.md
│   │   │   ├── use-animations.md
│   │   │   ├── use-fbo.md
│   │   │   └── use-surface-sampler.md
│   │   ├── controls/
│   │   │   ├── camera-controls.md
│   │   │   ├── helper.md
│   │   │   ├── keyboard-controls.md
│   │   │   ├── map-controls.md
│   │   │   ├── orbit-controls.md
│   │   │   ├── pointer-lock-controls.md
│   │   │   ├── scroll-controls.md
│   │   │   └── transform-controls.md
│   │   ├── index.md
│   │   ├── loaders/
│   │   │   ├── fbx-model.md
│   │   │   ├── gltf-model.md
│   │   │   ├── use-fbx.md
│   │   │   ├── use-gltf.md
│   │   │   ├── use-progress.md
│   │   │   ├── use-svg.md
│   │   │   ├── use-texture.md
│   │   │   ├── use-textures.md
│   │   │   └── use-video-texture.md
│   │   ├── materials/
│   │   │   ├── custom-shader-material.md
│   │   │   ├── glass-material.md
│   │   │   ├── holographic-material.md
│   │   │   ├── mesh-discard-material.md
│   │   │   ├── mesh-reflection-material.md
│   │   │   ├── point-material.md
│   │   │   └── wobble-material.md
│   │   ├── migrating-from-v3.md
│   │   ├── misc/
│   │   │   ├── bake-shadows.md
│   │   │   ├── html-component.md
│   │   │   ├── lod.md
│   │   │   ├── stats-gl.md
│   │   │   ├── stats.md
│   │   │   ├── use-gltf-exporter.md
│   │   │   └── use-intersect.md
│   │   ├── shapes/
│   │   │   ├── box.md
│   │   │   ├── catmullromcurve3.md
│   │   │   ├── circle.md
│   │   │   ├── cone.md
│   │   │   ├── cubic-bezier-line.md
│   │   │   ├── cylinder.md
│   │   │   ├── dodecahedron.md
│   │   │   ├── icosahedron.md
│   │   │   ├── line2.md
│   │   │   ├── octahedron.md
│   │   │   ├── plane.md
│   │   │   ├── quadratic-bezier-line.md
│   │   │   ├── ring.md
│   │   │   ├── rounded-box.md
│   │   │   ├── screen-quad.md
│   │   │   ├── sphere.md
│   │   │   ├── superformula.md
│   │   │   ├── tetrahedron.md
│   │   │   ├── torus-knot.md
│   │   │   ├── torus.md
│   │   │   └── tube.md
│   │   └── staging/
│   │       ├── accumulative-shadows.md
│   │       ├── align.md
│   │       ├── backdrop.md
│   │       ├── bounds.md
│   │       ├── circle-shadow.md
│   │       ├── contact-shadows.md
│   │       ├── environment.md
│   │       ├── fit.md
│   │       ├── grid.md
│   │       ├── ocean.md
│   │       ├── precipitation.md
│   │       ├── randomized-lights.md
│   │       ├── sky.md
│   │       ├── smoke.md
│   │       ├── soft-shadows.md
│   │       ├── sparkles.md
│   │       ├── stage.md
│   │       ├── stars.md
│   │       └── use-environment.md
│   ├── index.md
│   ├── markdown-examples.md
│   ├── package.json
│   ├── public/
│   │   └── feather.glb
│   ├── tsconfig.json
│   └── vite.config.ts
├── eslint.config.js
├── netlify.toml
├── package.json
├── playground/
│   └── vue/
│       ├── .eslintrc-auto-import.json
│       ├── .eslintrc.json
│       ├── .gitignore
│       ├── .vscode/
│       │   └── extensions.json
│       ├── README.md
│       ├── auto-imports.d.ts
│       ├── components.d.ts
│       ├── index.html
│       ├── package.json
│       ├── public/
│       │   ├── blender-cube-draco.glb
│       │   └── blender-cube.glb
│       ├── src/
│       │   ├── App.vue
│       │   ├── components/
│       │   │   ├── FboCube.vue
│       │   │   ├── GraphPane.vue
│       │   │   ├── OverlayInfo.vue
│       │   │   ├── StarsForTest.vue
│       │   │   ├── fbx/
│       │   │   │   └── Jeep.vue
│       │   │   └── gltf/
│       │   │       └── BlenderCube.vue
│       │   ├── composables/
│       │   │   └── state.ts
│       │   ├── main.ts
│       │   ├── pages/
│       │   │   ├── abstractions/
│       │   │   │   ├── AnimatedSpriteDemo.vue
│       │   │   │   ├── BillboardDemo.vue
│       │   │   │   ├── CubeCameraDemo.vue
│       │   │   │   ├── EdgesDemo.vue
│       │   │   │   ├── GlobalAudioDemo.vue
│       │   │   │   ├── GradientTextureDemo.vue
│       │   │   │   ├── ImageDemo.vue
│       │   │   │   ├── LensflareDemo.vue
│       │   │   │   ├── LeviosoDemo.vue
│       │   │   │   ├── MarchingCubesDemo.vue
│       │   │   │   ├── MaskDemo.vue
│       │   │   │   ├── MouseParallaxDemo.vue
│       │   │   │   ├── OutlineDemo.vue
│       │   │   │   ├── PositionalAudioDemo.vue
│       │   │   │   ├── ReflectorMeshDemo.vue
│       │   │   │   ├── Sampler.vue
│       │   │   │   ├── ScreenSizerDemo.vue
│       │   │   │   ├── ScreenSpaceDemo.vue
│       │   │   │   ├── Text3DDemo.vue
│       │   │   │   ├── fbo/
│       │   │   │   │   ├── FBODemo.vue
│       │   │   │   │   ├── index.vue
│       │   │   │   │   └── useFBODemo.vue
│       │   │   │   ├── lensflare/
│       │   │   │   │   ├── LensflareDemo.vue
│       │   │   │   │   └── index.vue
│       │   │   │   ├── use-animations/
│       │   │   │   │   ├── TheModel.vue
│       │   │   │   │   └── index.vue
│       │   │   │   └── useSurfaceSampler.vue
│       │   │   ├── controls/
│       │   │   │   ├── CameraControlsDemo.vue
│       │   │   │   ├── HelperDemo.vue
│       │   │   │   ├── KeyboardControlsDemo.vue
│       │   │   │   ├── MapControlsDemo.vue
│       │   │   │   ├── OrbitControlsDemo.vue
│       │   │   │   ├── PointerLockControlsDemo.vue
│       │   │   │   ├── ScrollControlsDemo.vue
│       │   │   │   └── TransformControlsDemo.vue
│       │   │   ├── index.vue
│       │   │   ├── loaders/
│       │   │   │   ├── SVGDemo.vue
│       │   │   │   ├── UseFBXDemo.vue
│       │   │   │   ├── use-fbx/
│       │   │   │   │   ├── FBXModelDemo.vue
│       │   │   │   │   ├── TheModel.vue
│       │   │   │   │   └── index.vue
│       │   │   │   ├── use-gltf/
│       │   │   │   │   ├── GLTFModelDemo.vue
│       │   │   │   │   ├── TheModel.vue
│       │   │   │   │   └── index.vue
│       │   │   │   ├── use-svg/
│       │   │   │   │   ├── SVGModelDemo.vue
│       │   │   │   │   ├── TheModel.vue
│       │   │   │   │   └── index.vue
│       │   │   │   ├── use-texture/
│       │   │   │   │   ├── PBRTextures.vue
│       │   │   │   │   ├── TheExperience.vue
│       │   │   │   │   ├── UseTextureComponent.vue
│       │   │   │   │   └── index.vue
│       │   │   │   └── useVideoTextureDemo.vue
│       │   │   ├── materials/
│       │   │   │   ├── CustomShaderMaterialDemo.vue
│       │   │   │   ├── GlassMaterialDemo.vue
│       │   │   │   ├── HolographicMaterialDemo.vue
│       │   │   │   ├── MeshDiscardMaterialDemo.vue
│       │   │   │   ├── MeshReflectionMaterialDemo.vue
│       │   │   │   ├── PointMaterialDemo.vue
│       │   │   │   └── WobbleMaterialDemo.vue
│       │   │   ├── misc/
│       │   │   │   ├── BakeShadowsDemo.vue
│       │   │   │   ├── Card.vue
│       │   │   │   ├── GLTFExporterDemo.vue
│       │   │   │   ├── HTMLDemo.vue
│       │   │   │   ├── LODDemo.vue
│       │   │   │   ├── LaptopDemo.vue
│       │   │   │   ├── StatsDemo.vue
│       │   │   │   ├── StatsGlDemo.vue
│       │   │   │   └── useIntersect/
│       │   │   │       ├── TheExperience.vue
│       │   │   │       └── index.vue
│       │   │   ├── shapes/
│       │   │   │   ├── CatmullRomCurve3Demo.vue
│       │   │   │   ├── CubicBezierLineDemo.vue
│       │   │   │   ├── Cylinder.vue
│       │   │   │   ├── Line2Demo.vue
│       │   │   │   ├── OnDemandShapesDemo.vue
│       │   │   │   ├── QuadraticBezierLineDemo.vue
│       │   │   │   ├── RoundedBoxDemo.vue
│       │   │   │   ├── ScreenQuadDemo.vue
│       │   │   │   └── SuperformulaDemo.vue
│       │   │   └── staging/
│       │   │       ├── AccumulativeShadowsDemo.vue
│       │   │       ├── AlignDemo.vue
│       │   │       ├── BackdropDemo.vue
│       │   │       ├── BoundsDemo.vue
│       │   │       ├── CircleShadowDemo.vue
│       │   │       ├── ContactShadowsDemo.vue
│       │   │       ├── GridDemo.vue
│       │   │       ├── OceanDemo.vue
│       │   │       ├── PrecipitationDemo.vue
│       │   │       ├── SkyDemo.vue
│       │   │       ├── SmokeDemo.vue
│       │   │       ├── SoftShadowsDemo.vue
│       │   │       ├── SparklesDemo.vue
│       │   │       ├── StageDemo.vue
│       │   │       ├── StarsDemo.vue
│       │   │       ├── environment/
│       │   │       │   ├── EnvironmentDemo.vue
│       │   │       │   └── Lightformers.vue
│       │   │       └── fit/
│       │   │           ├── FitDemo.vue
│       │   │           └── index.vue
│       │   ├── router/
│       │   │   ├── index.ts
│       │   │   └── routes/
│       │   │       ├── abstractions.ts
│       │   │       ├── controls.ts
│       │   │       ├── index.ts
│       │   │       ├── loaders.ts
│       │   │       ├── materials.ts
│       │   │       ├── misc.ts
│       │   │       ├── shapes.ts
│       │   │       └── staging.ts
│       │   ├── style.css
│       │   └── vite-env.d.ts
│       ├── tsconfig.json
│       ├── tsconfig.node.json
│       └── vite.config.ts
├── pnpm-workspace.yaml
├── renovate.json
├── src/
│   ├── core/
│   │   ├── abstractions/
│   │   │   ├── AnimatedSprite/
│   │   │   │   ├── Atlas.ts
│   │   │   │   ├── AtlasAnimationDefinitionParser.ts
│   │   │   │   ├── StringOps.ts
│   │   │   │   └── component.vue
│   │   │   ├── Billboard.vue
│   │   │   ├── CubeCamera/
│   │   │   │   ├── component.vue
│   │   │   │   └── useCubeCamera.ts
│   │   │   ├── Edges.vue
│   │   │   ├── GlobalAudio.ts
│   │   │   ├── GradientTexture.vue
│   │   │   ├── Image/
│   │   │   │   ├── ImageMaterial.vue
│   │   │   │   ├── ImageMaterialImpl.ts
│   │   │   │   └── component.vue
│   │   │   ├── Lensflare/
│   │   │   │   ├── LensflareImpl.ts
│   │   │   │   ├── RandUtils.ts
│   │   │   │   ├── component.vue
│   │   │   │   ├── constants.ts
│   │   │   │   └── index.ts
│   │   │   ├── Levioso.vue
│   │   │   ├── MarchingCubes/
│   │   │   │   ├── MarchingCube.vue
│   │   │   │   ├── MarchingCubes.vue
│   │   │   │   ├── MarchingPlane.vue
│   │   │   │   └── const.ts
│   │   │   ├── Mask/
│   │   │   │   ├── component.vue
│   │   │   │   └── useMask.ts
│   │   │   ├── MouseParallax.vue
│   │   │   ├── Outline/
│   │   │   │   ├── OutlineMaterialImpl.ts
│   │   │   │   └── component.vue
│   │   │   ├── PositionalAudio.vue
│   │   │   ├── Reflector.vue
│   │   │   ├── ScreenSizer.vue
│   │   │   ├── ScreenSpace.vue
│   │   │   ├── Text3D.vue
│   │   │   ├── index.ts
│   │   │   ├── useAnimations.ts
│   │   │   ├── useFBO/
│   │   │   │   ├── component.vue
│   │   │   │   └── index.ts
│   │   │   └── useSurfaceSampler/
│   │   │       ├── component.vue
│   │   │       └── index.ts
│   │   ├── controls/
│   │   │   ├── CameraControls.vue
│   │   │   ├── Helper/
│   │   │   │   ├── component.vue
│   │   │   │   └── useHelper.ts
│   │   │   ├── KeyboardControls.vue
│   │   │   ├── MapControls.vue
│   │   │   ├── OrbitControls.vue
│   │   │   ├── PointerLockControls.vue
│   │   │   ├── ScrollControls.vue
│   │   │   ├── TransformControls.vue
│   │   │   └── index.ts
│   │   ├── index.ts
│   │   ├── loaders/
│   │   │   ├── index.ts
│   │   │   ├── useFBX/
│   │   │   │   ├── component.vue
│   │   │   │   └── index.ts
│   │   │   ├── useGLTF/
│   │   │   │   ├── component.vue
│   │   │   │   └── index.ts
│   │   │   ├── useProgress.ts
│   │   │   ├── useSVG/
│   │   │   │   ├── component.vue
│   │   │   │   └── index.ts
│   │   │   ├── useTexture/
│   │   │   │   ├── component.vue
│   │   │   │   └── index.ts
│   │   │   ├── useTextures/
│   │   │   │   └── index.ts
│   │   │   └── useVideoTexture.ts
│   │   ├── materials/
│   │   │   ├── customShaderMaterial/
│   │   │   │   └── index.vue
│   │   │   ├── holographicMaterial/
│   │   │   │   ├── HolographicMaterialParameters.ts
│   │   │   │   ├── index.vue
│   │   │   │   └── material.ts
│   │   │   ├── index.ts
│   │   │   ├── meshDiscardMaterial/
│   │   │   │   ├── index.vue
│   │   │   │   └── material.ts
│   │   │   ├── meshGlassMaterial/
│   │   │   │   ├── index.vue
│   │   │   │   └── material.ts
│   │   │   ├── meshReflectionMaterial/
│   │   │   │   ├── BlurPass.ts
│   │   │   │   ├── ConvolutionMaterial.ts
│   │   │   │   ├── index.vue
│   │   │   │   └── material.ts
│   │   │   ├── meshWobbleMaterial/
│   │   │   │   ├── index.vue
│   │   │   │   └── material.ts
│   │   │   └── pointMaterial/
│   │   │       ├── component.vue
│   │   │       └── material.ts
│   │   ├── misc/
│   │   │   ├── BakeShadows.ts
│   │   │   ├── LOD.vue
│   │   │   ├── Stats.ts
│   │   │   ├── StatsGl.ts
│   │   │   ├── html/
│   │   │   │   ├── HTML.vue
│   │   │   │   ├── shaders/
│   │   │   │   │   ├── fragment.glsl
│   │   │   │   │   └── vertex.glsl
│   │   │   │   └── utils.ts
│   │   │   ├── index.ts
│   │   │   ├── useGLTFExporter.ts
│   │   │   └── useIntersect.ts
│   │   ├── shapes/
│   │   │   ├── Box.vue
│   │   │   ├── CatmullRomCurve3.vue
│   │   │   ├── Circle.vue
│   │   │   ├── Cone.vue
│   │   │   ├── CubicBezierLine.vue
│   │   │   ├── Cylinder.vue
│   │   │   ├── Dodecahedron.vue
│   │   │   ├── Icosahedron.vue
│   │   │   ├── Line2.vue
│   │   │   ├── Octahedron.vue
│   │   │   ├── Plane.vue
│   │   │   ├── QuadraticBezierLine.vue
│   │   │   ├── Ring.vue
│   │   │   ├── RoundedBox.vue
│   │   │   ├── ScreenQuad.vue
│   │   │   ├── Sphere.vue
│   │   │   ├── Superformula.vue
│   │   │   ├── Tetrahedron.vue
│   │   │   ├── Torus.vue
│   │   │   ├── TorusKnot.vue
│   │   │   ├── Tube.vue
│   │   │   └── index.ts
│   │   └── staging/
│   │       ├── AccumulativeShadows/
│   │       │   ├── ProgressiveLightMap.ts
│   │       │   ├── SoftShadowMaterial.ts
│   │       │   └── component.vue
│   │       ├── Align.vue
│   │       ├── Backdrop.vue
│   │       ├── Bounds/
│   │       │   ├── Bounds.ts
│   │       │   └── component.vue
│   │       ├── CircleShadow.vue
│   │       ├── ContactShadows.vue
│   │       ├── Fit.vue
│   │       ├── Grid.vue
│   │       ├── Ocean.vue
│   │       ├── Precipitation.vue
│   │       ├── RandomizedLights/
│   │       │   ├── RandomizedLights.ts
│   │       │   └── component.vue
│   │       ├── Sky.vue
│   │       ├── Smoke.vue
│   │       ├── SoftShadows.vue
│   │       ├── Sparkles/
│   │       │   ├── ShaderData.ts
│   │       │   ├── ShaderDataBuilder.ts
│   │       │   ├── component.vue
│   │       │   └── useEmptyDataTexture.ts
│   │       ├── Stage.vue
│   │       ├── Stars.vue
│   │       ├── index.ts
│   │       └── useEnvironment/
│   │           ├── EnvironmentScene.ts
│   │           ├── component.vue
│   │           ├── const.ts
│   │           ├── index.ts
│   │           └── lightformer/
│   │               └── index.vue
│   ├── index.ts
│   ├── utils/
│   │   ├── Gradient.ts
│   │   ├── calculateScaleFactor.ts
│   │   ├── constants.ts
│   │   ├── easing.ts
│   │   ├── index.ts
│   │   ├── shaderMaterial.ts
│   │   └── types.ts
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/CODEOWNERS
================================================
* @alvarosabu

================================================
FILE: .github/FUNDING.yml
================================================
github: [tresjs, jaimetorrealba, alvarosabu]
open_collective: tresjs


================================================
FILE: .github/ISSUE_TEMPLATE/bug.report.yml
================================================
name: Bug report 🐛
description: Report an issue with Cientos
labels: [pending triage]
body:
  - type: markdown
    attributes:
      value: |
        Thanks for taking the time to fill out this bug report!
  - type: textarea
    id: bug-description
    attributes:
      label: Describe the bug
      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
      placeholder: I am doing ... What I expect is ... What actually happening is ...
    validations:
      required: true
  - type: input
    id: reproduction
    attributes:
      label: Reproduction
      description: Please provide a link via [stackblitz](https://stackblitz.com/edit/tresjs-basic?file=package.json,src%2Fcomponents%2FTheExperience.vue) or a link to a repo that can reproduce the problem you ran into. A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is required ([Why?](https://antfu.me/posts/why-reproductions-are-required)). If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided after 3 days, it will be auto-closed.
      placeholder: Reproduction URL
    validations:
      required: true
  - type: textarea
    id: reproduction-steps
    attributes:
      label: Steps to reproduce
      description: Please provide any reproduction steps that may need to be described. E.g. if it happens only when running the dev or build script make sure it's clear which one to use.
      placeholder: Run `npm install` followed by `npm run dev`
  - type: textarea
    id: system-info
    attributes:
      label: System Info
      description: Output of `npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers`
      render: shell
      placeholder: System, Binaries, Browsers
  - type: dropdown
    id: package-manager
    attributes:
      label: Used Package Manager
      description: Select the used package manager
      options:
        - npm
        - yarn
        - pnpm
    validations:
      required: true
  - type: checkboxes
    id: terms
    attributes:
      label: Code of Conduct
      description: By submitting this issue, please make sure you do the following
      options:
        - label: I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)
          required: true
        - label: Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).
          required: true
        - label: Read the [docs](https://cientos.tresjs.org/guide).
          required: true
        - label: Check that there isn't [already an issue](https://github.com/Tresjs/cientos/issues) that reports the same bug to avoid creating a duplicate.
          required: true
        - label: The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
          required: true


================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false


================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.yml
================================================
name: New feature proposal 🪐
description: Propose a new feature to be added to Cientos
labels: [enhancement]
body:
  - type: markdown
    attributes:
      value: |
        Thanks for your interest in the project and taking the time to fill out this feature report!
  - type: textarea
    id: feature-description
    attributes:
      label: Description
      description: 'Clear and concise description of the problem. Please make the reason and usecases as detailed as possible. If you intend to submit a PR for this issue, tell us in the description. Thanks!'
      placeholder: As a developer using TresJS I want [goal / wish] so that [benefit].
    validations:
      required: true
  - type: textarea
    id: suggested-solution
    attributes:
      label: Suggested solution
      description: 'In module [xy] we could provide following implementation...'
    validations:
      required: true
  - type: textarea
    id: alternative
    attributes:
      label: Alternative
      description: Clear and concise description of any alternative solutions or features you've considered.
  - type: textarea
    id: additional-context
    attributes:
      label: Additional context
      description: Any other context or screenshots about the feature request here.
  - type: checkboxes
    id: checkboxes
    attributes:
      label: Validations
      description: Before submitting the issue, please make sure you do the following
      options:
        - label: I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)
          required: true
        - label: Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).
          required: true
        - label: Read the [docs](https://cientos.tresjs.org/guide).
          required: true
        - label: Check that there isn't [already an issue](https://github.com/tresjs/cientos/issues) that reports the same bug to avoid creating a duplicate.
          required: true


================================================
FILE: .github/workflows/lint-pr.yml
================================================
name: Lint PR

on:
  pull_request_target:
    types:
      - opened
      - edited
      - synchronize

jobs:
  main:
    name: Validate PR title
    runs-on: ubuntu-latest
    steps:
      - uses: amannn/action-semantic-pull-request@v5
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}


================================================
FILE: .github/workflows/lint.yml
================================================
name: Run linters
on: [push]

env:
  PNPM_CACHE_FOLDER: .pnpm-store
  HUSKY: 0 # Bypass husky commit hook for CI

jobs:
  lint:
    name: Lint
    runs-on: ubuntu-24.04
    strategy:
      matrix:
        node-version: [20]
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup pnpm
        uses: pnpm/action-setup@v4
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: pnpm
      - name: Install dependencies
        run: pnpm install
      - name: Run Lint
        run: pnpm run lint


================================================
FILE: .github/workflows/pkg.pr.new.yml
================================================
name: Publish Any Commit
on:
  push:
    branches:
      - '**'
    tags:
      - '!**'

env:
  PNPM_CACHE_FOLDER: .pnpm-store
  HUSKY: 0 # Bypass husky commit hook for CI

permissions: {}

concurrency:
  group: ${{ github.workflow }}-${{ github.event.number }}
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20]
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - run: npm i -g --force corepack && corepack enable
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: pnpm
      - name: Install dependencies
        run: pnpm install
      - name: Build
        run: pnpm build
      - run: pnpx pkg-pr-new publish --compact --pnpm


================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
**/.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
stats.html
docs/.vitepress/dist/
docs/.vitepress/cache/
docs/.vitepress/.temp/
docs/components.d.ts
playground/components.d.ts


================================================
FILE: .npmrc
================================================
shamefully-hoist=true

================================================
FILE: .release-it.json
================================================
{
  "git": {
    "commitMessage": "chore: release v${version}"
  },
  "github": {
    "release": true,
    "releaseName": "v${version}"
  },
  "plugins": {
    "@release-it/conventional-changelog": {
      "preset": "conventionalcommits",
      "infile": "CHANGELOG.md"
    }
  },
  "hooks": {
    "before:init": ["pnpm run lint"],
    "after:bump": "pnpm run build",
    "after:git:release": "echo After git push, before github release",
    "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}."
  }
}


================================================
FILE: CHANGELOG.md
================================================
# Changelog

## [5.0.0](https://github.com/Tresjs/cientos/compare/4.3.1...5.0.0) (2025-09-20)

### Features

* release v5 ([#563](https://github.com/Tresjs/cientos/issues/563)) ([28808b5](https://github.com/Tresjs/cientos/commit/28808b58cfbcfdc57d0f1fe0656da9a8d3e4bcdb)), closes [#543](https://github.com/Tresjs/cientos/issues/543)

### Bug Fixes

* precipitation speed ([#643](https://github.com/Tresjs/cientos/issues/643)) ([8958ecc](https://github.com/Tresjs/cientos/commit/8958eccb30ed6537eaa84a2221ff7e39a158bd88))

## [5.0.0-rc.0](https://github.com/Tresjs/cientos/compare/5.0.0-alpha.1...5.0.0-rc.0) (2025-09-20)

## [5.0.0-alpha.1](https://github.com/Tresjs/cientos/compare/5.0.0-alpha.0...5.0.0-alpha.1) (2025-09-06)

### Features

* enhance `useAnimations` composable with manual update option ([#637](https://github.com/Tresjs/cientos/issues/637)) ([b2b60e6](https://github.com/Tresjs/cientos/commit/b2b60e67aaa8d62012cf67f030acdb7c08c56a9a))

## [5.0.0-alpha.0](https://github.com/Tresjs/cientos/compare/5.0.0-next.7...5.0.0-alpha.0) (2025-08-30)

### Features

* set peer @tresjs/core to 5.0.0 and alpha, updated dev deps ([#641](https://github.com/Tresjs/cientos/issues/641)) ([48817fd](https://github.com/Tresjs/cientos/commit/48817fdd092fb8b6658245160b6cacfac3cf2f3d))

## [5.0.0-next.7](https://github.com/Tresjs/cientos/compare/5.0.0-next.6...5.0.0-next.7) (2025-08-11)

### Features

* add `traverse` option to model loaders ([#635](https://github.com/Tresjs/cientos/issues/635)) ([421350f](https://github.com/Tresjs/cientos/commit/421350fc7c3fca0806f61f21fe8bc765bf7d4589))

### Bug Fixes

* enhance audio and sprite loading logic ([4319fa9](https://github.com/Tresjs/cientos/commit/4319fa94e2578d5ed37ad381854984deeae9d17e))

## [5.0.0-next.6](https://github.com/Tresjs/cientos/compare/5.0.0-next.5...5.0.0-next.6) (2025-07-31)

### Bug Fixes

* **orbit-controls:** added key to force re-render ([c93f6c1](https://github.com/Tresjs/cientos/commit/c93f6c18750dd1a3499ec85c89e9bd567edc6ae5))

## [5.0.0-next.5](https://github.com/Tresjs/cientos/compare/5.0.0-next.4...5.0.0-next.5) (2025-07-08)

### ⚠ BREAKING CHANGES

* useFBX no longer returns the plain obj, it now returns an object with reactive data (state, isLoading, error) and a load method.

- Updated `vue` to version `3.5.17` and `three` to version `0.178.0` in `package.json` for enhanced compatibility and features.
- Upgraded `@vitejs/plugin-vue` to version `6.0.0` and `vite` to version `7.0.2` to leverage the latest improvements in the build process.
- Enhanced the `useFBX` composable to provide a reactive state for loading FBX models, allowing for better handling of model properties and loading states.
- Improved the `FBXModel` component to support shadow properties and added a new demo for better visualization of FBX model loading.
- Updated documentation to reflect changes in the FBX model loading process and added examples for better clarity.

* fix(TheModel.vue): remove unused type import for improved clarity

- Removed the unused import of `Group` from TheModel.vue to enhance code clarity and maintainability. This change aligns with the ongoing effort to streamline type imports and improve type safety across the codebase.

* feat: expose model state in useFBX and useGLTF components

- Added `defineExpose` to both `useFBX` and `useGLTF` components to expose the reactive model state, allowing for better integration and access to the model instance in parent components.
- This enhancement improves the usability of the components by providing a direct reference to the model state, facilitating more dynamic interactions and updates.

* fix(useFBX): add missing comma in defineExpose for model instance

- Added a missing comma in the `defineExpose` call within the `useFBX` component to ensure proper syntax and prevent potential runtime errors. This minor fix enhances code clarity and maintains consistency in the component's structure.

### Features

* refactor useFBX ([#628](https://github.com/Tresjs/cientos/issues/628)) ([d59ef26](https://github.com/Tresjs/cientos/commit/d59ef26ff9e1924c12188f458324b83f72196f96))

## [5.0.0-next.4](https://github.com/Tresjs/cientos/compare/5.0.0-next.3...5.0.0-next.4) (2025-06-30)

### Bug Fixes

* create a local raycast for the HTML component ([#627](https://github.com/Tresjs/cientos/issues/627)) ([614505f](https://github.com/Tresjs/cientos/commit/614505fd84381919308136d510ffb69b805a5038))
* **transform-controls:** use correct emit on mouse up ([#625](https://github.com/Tresjs/cientos/issues/625)) ([f04a63c](https://github.com/Tresjs/cientos/commit/f04a63cab66b9e0cc0fc17f7622944999c417787))

## [5.0.0-next.3](https://github.com/Tresjs/cientos/compare/5.0.0-next.2...5.0.0-next.3) (2025-06-22)

### Bug Fixes

* typescript issues ([#624](https://github.com/Tresjs/cientos/issues/624)) ([3c1640e](https://github.com/Tresjs/cientos/commit/3c1640e512cd77f0f980a63d1aa9414d4cc4d608))

## [5.0.0-next.2](https://github.com/Tresjs/cientos/compare/5.0.0-next.1...5.0.0-next.2) (2025-06-15)

### Bug Fixes

* adapt to renderer.isntance no longer being shallowRef ([430534a](https://github.com/Tresjs/cientos/commit/430534a40d37e44dc026facfe9a4faac461decab))
* remove unused type import in MouseParallax.vue ([0899ecf](https://github.com/Tresjs/cientos/commit/0899ecfc0e02a7ded4b1368d5ad22dc352b1f1ce))
* type issues from v5 ([bd0e0c6](https://github.com/Tresjs/cientos/commit/bd0e0c6abbe2616fb73d44171716fa54c2ac54b9))

## [5.0.0-next.1](https://github.com/Tresjs/cientos/compare/5.0.0-next.0...5.0.0-next.1) (2025-06-15)

## [5.0.0-next.0](https://github.com/Tresjs/cientos/compare/4.3.1...5.0.0-next.0) (2025-06-06)

### ⚠ BREAKING CHANGES

* cientos  is now ESM only

- Added 'es' format to the Vite configuration for better module compatibility.
- Removed the UMD globals section from the output configuration as it is no longer necessary, streamlining the build process.
* useGLTF no longer returns the plain obj, it now returns an object with reactive data (state, isLoading, error) and a load method.

- Refactored GLTF loading in components to use the updated `useGLTF` composable, improving state management and performance.
- Removed unnecessary `Suspense` wrappers in demo components for cleaner rendering.
- Added new demo components for showcasing GLTF model loading with DRACO compression.
- Updated documentation to reflect changes in GLTF model usage.

* fix: update import syntax and clean up unused code

- Changed import statement for `TresObject` in `gltf-model.md` to use the correct TypeScript syntax.
- Removed unused imports in `use-gltf/index.vue` for cleaner code.
- Added ESLint directive to disable console warnings in `TheModel.vue` for development purposes.

* docs: update useGLTF implementation and clean up components

- Refactored components to utilize the new `useGLTF` structure, replacing direct access to nodes with reactive state management.
- Removed unused imports and commented-out code for improved clarity and maintainability.
- Updated documentation references to reflect changes in component usage and structure.

* feat: adapt useAnimations to new useAsyncState loader's model

- Added a new demo page for `use-animations` showcasing the animated GLTF model.
- Refactored the `useAnimations` composable to support reactive animations using `MaybeRef`.
- Updated the `TheModel.vue` component to utilize the new reactive state for animations.
- Enhanced the main demo layout with `TresCanvas`, `OrbitControls`, and lighting for improved visualization.

* chore: update @tresjs/core dependency to version 5.0.0-next.0

- Changed the dependency for @tresjs/core in package.json and playground/vue/package.json to the stable version 5.0.0-next.0 from a previous URL reference.
- Updated pnpm-lock.yaml to reflect the new version of @tresjs/core across all relevant sections.
- Adjusted the useGLTF implementation in documentation to align with the new state management approach.

### Features

* 608 drop umd support ([#622](https://github.com/Tresjs/cientos/issues/622)) ([14afe95](https://github.com/Tresjs/cientos/commit/14afe95c3f0c1ae5fb5b6cc4b57d3f86b46f0f4b))
* 609-refactor-usegltf ([#610](https://github.com/Tresjs/cientos/issues/610)) ([13943b0](https://github.com/Tresjs/cientos/commit/13943b0401a7f1d10723ae01659c6d8b50f04310))
* 611 move cores usetexture to cientos ([#617](https://github.com/Tresjs/cientos/issues/617)) ([430377d](https://github.com/Tresjs/cientos/commit/430377d8d8a1b5e902167bc210e4f48b1141c300))
* 615-adapt-camera-dependant-abstractions-to-core-v5-camera-changes ([#621](https://github.com/Tresjs/cientos/issues/621)) ([682d38f](https://github.com/Tresjs/cientos/commit/682d38f2a6366918a77aa7e8c312484582c62b8c))
* 616-adapt-code-to-core-ctx-renderer-state-breaking-change ([#620](https://github.com/Tresjs/cientos/issues/620)) ([2ae981f](https://github.com/Tresjs/cientos/commit/2ae981f42fa6a76fad2202236b49c28f395dfb29))
* **AccumulativeShadows:** add component, demo, docs ([#558](https://github.com/Tresjs/cientos/issues/558)) ([7e6b8d0](https://github.com/Tresjs/cientos/commit/7e6b8d0dbbe2f1f0500072815c86c2cf0c559a58))
* **Bounds:** add component, demo, docs ([#408](https://github.com/Tresjs/cientos/issues/408)) ([#568](https://github.com/Tresjs/cientos/issues/568)) ([592ec68](https://github.com/Tresjs/cientos/commit/592ec68de83fcd5a62523b32b96ade825437ea68))
* **CircleShadow:** add component, demo, docs ([#549](https://github.com/Tresjs/cientos/issues/549)) ([c0c1bcc](https://github.com/Tresjs/cientos/commit/c0c1bcc15743f0c93f8908b9e29d2555a4c79c85))
* **CubicBezierLine:** add component, demo, docs ([#546](https://github.com/Tresjs/cientos/issues/546)) ([99c3a60](https://github.com/Tresjs/cientos/commit/99c3a60d5e99d25dcb65da1f04ccd4ce0499d919))
* **Helper:** add component, demo, docs ([#543](https://github.com/Tresjs/cientos/issues/543)) ([63535a2](https://github.com/Tresjs/cientos/commit/63535a24689c5fb1353b26d2add7f899a74ada37))
* **LOD:** add component, playground, docs ([#524](https://github.com/Tresjs/cientos/issues/524)) ([ef6438c](https://github.com/Tresjs/cientos/commit/ef6438c46d43d83ee6bf5d1b4e36a9a7e69c8297))
* **MarchingCubes:** add component, demo, docs ([#553](https://github.com/Tresjs/cientos/issues/553)) ([2ebc1e6](https://github.com/Tresjs/cientos/commit/2ebc1e6c75107d6914b4ad3b7e8488b06f5db2f6))
* **PointMaterial:** add component, demo, docs ([#545](https://github.com/Tresjs/cientos/issues/545)) ([4528f64](https://github.com/Tresjs/cientos/commit/4528f64063d2f9cc903cc9f21c8c09ef792b919a))
* **QuadraticBezierLine:** add component, demo, docs ([#548](https://github.com/Tresjs/cientos/issues/548)) ([4a9f006](https://github.com/Tresjs/cientos/commit/4a9f006d5c318781d52f6e943b7c4f342a077667))
* **ScreenQuad:** add component, playground, docs ([#530](https://github.com/Tresjs/cientos/issues/530)) ([34a3db5](https://github.com/Tresjs/cientos/commit/34a3db5162d084f9fc3db82885a271a1a8c31424))
* **Stage:** add component, demo, docs ([#572](https://github.com/Tresjs/cientos/issues/572)) ([9db8c78](https://github.com/Tresjs/cientos/commit/9db8c782d434a33c64663f313bc289199281f4eb))
* **useIntersect:** add function, demo, docs ([#550](https://github.com/Tresjs/cientos/issues/550)) ([b0ba621](https://github.com/Tresjs/cientos/commit/b0ba62159c4ae9b2e51f85dcad5c9fe8d03ff6e8))

### Bug Fixes

* fixes to next components and docs ([#586](https://github.com/Tresjs/cientos/issues/586)) ([bc54a1d](https://github.com/Tresjs/cientos/commit/bc54a1da5aa8e0f7c9852713c01d405b9f5eff29))
* return nodes and materials computed directly ([#612](https://github.com/Tresjs/cientos/issues/612)) ([4fe342a](https://github.com/Tresjs/cientos/commit/4fe342aeb34741ce828ba1bed26279d00f9be9e7))
* rollback to previous use tres usage ([#623](https://github.com/Tresjs/cientos/issues/623)) ([cfa38b1](https://github.com/Tresjs/cientos/commit/cfa38b1c88421430ab5204ae943443cc50e44dfe))

## [4.3.1](https://github.com/Tresjs/cientos/compare/4.3.0...4.3.1) (2025-05-16)

### Bug Fixes

* **deps:** update @tresjs/core and @types/three to latest versions ([#619](https://github.com/Tresjs/cientos/issues/619)) ([9a94785](https://github.com/Tresjs/cientos/commit/9a94785f8242b10df3a1c579e54f04814716552a))

## [4.3.0](https://github.com/Tresjs/cientos/compare/4.2.0...4.3.0) (2025-03-25)

### Features

* **environment:** enhance environment and background props ([#590](https://github.com/Tresjs/cientos/issues/590)) ([7e96136](https://github.com/Tresjs/cientos/commit/7e96136ad4f9da046ad14eb31a69a7ff67649010))

## [4.2.0](https://github.com/Tresjs/cientos/compare/4.1.1...4.2.0) (2025-03-07)

### Features

* **OrbitControls:** add mouseButtons prop to customize mouse interactions ([#603](https://github.com/Tresjs/cientos/issues/603)) ([5a7c2ca](https://github.com/Tresjs/cientos/commit/5a7c2cacb67db61a2fe54ed485703735ba167e5f))

## [4.1.1](https://github.com/Tresjs/cientos/compare/4.1.0...4.1.1) (2025-03-05)

### Bug Fixes

* remove will-change that makes Html components blurry ([#602](https://github.com/Tresjs/cientos/issues/602)) ([2b50296](https://github.com/Tresjs/cientos/commit/2b50296e5d4b141d072319872be6988aec984c61))
* update html on camera dolly zoom ([#600](https://github.com/Tresjs/cientos/issues/600)) ([e5628f2](https://github.com/Tresjs/cientos/commit/e5628f2073cc7d7f6fbb15bcabe4571dae92f1df))

## [4.1.0](https://github.com/Tresjs/cientos/compare/4.0.3...4.1.0) (2025-01-17)

### Features

* **Align:** add component, demo, docs ([#544](https://github.com/Tresjs/cientos/issues/544)) ([e3ee52c](https://github.com/Tresjs/cientos/commit/e3ee52c97c769935e7144c6ca423427cf93447a3))
* **Billboard:** add component, playground, docs ([#527](https://github.com/Tresjs/cientos/issues/527)) ([418e6ae](https://github.com/Tresjs/cientos/commit/418e6ae0d1d06fb689a5e583ff200d2f4de54848))
* **CubeCamera:** add component, demo, docs ([#537](https://github.com/Tresjs/cientos/issues/537)) ([02ed01c](https://github.com/Tresjs/cientos/commit/02ed01ca14d1f154c888ed9eeb7e95d63ad225a1))
* edges ([#390](https://github.com/Tresjs/cientos/issues/390)) ([60c200d](https://github.com/Tresjs/cientos/commit/60c200d19d7f82781632576c22e3b15ea118ac5c))
* **gradientTexture:** add component, demo, docs ([#531](https://github.com/Tresjs/cientos/issues/531)) ([58d0fdb](https://github.com/Tresjs/cientos/commit/58d0fdb582e0c9ca464648ece256094cda1f427f))
* **Grid:** add component, demo, docs ([#540](https://github.com/Tresjs/cientos/issues/540)) ([096ab5d](https://github.com/Tresjs/cientos/commit/096ab5d76b5dc9760528765fc2aebbf548affb9a))
* **Image:** add component, playground, docs ([#529](https://github.com/Tresjs/cientos/issues/529)) ([ad916a2](https://github.com/Tresjs/cientos/commit/ad916a2e58f1fdb4409c5ab9fcdfa9cabff418b3))
* **Mask:** add component, demo, docs ([#552](https://github.com/Tresjs/cientos/issues/552)) ([0fb8952](https://github.com/Tresjs/cientos/commit/0fb895295f00f46e118b0e8b740834379a1d53d3))
* **MeshDiscardMaterial:** add component, playground, docs ([#525](https://github.com/Tresjs/cientos/issues/525)) ([7a23019](https://github.com/Tresjs/cientos/commit/7a23019c0cefb9c16954c7224369614748da06b9))
* **Outline:** add component, demo, docs ([#532](https://github.com/Tresjs/cientos/issues/532)) ([5bae4de](https://github.com/Tresjs/cientos/commit/5bae4de1005cda00d7ad6ecbb25a96e64441b78f))
* **ScreenSizer:** add component, playground, docs ([#535](https://github.com/Tresjs/cientos/issues/535)) ([ee5af96](https://github.com/Tresjs/cientos/commit/ee5af96cebb12487fa519ce638624bdd375d37be))
* **ScreenSpace:** add component, demo, docs ([#536](https://github.com/Tresjs/cientos/issues/536)) ([e43f112](https://github.com/Tresjs/cientos/commit/e43f1122248fbd35d00b590fe165c5ac57246d25))
* **SoftShadows:** add component, demo, docs ([#541](https://github.com/Tresjs/cientos/issues/541)) ([e71cdad](https://github.com/Tresjs/cientos/commit/e71cdad6c9b9b0a9a65c9fce838498b373711875))

### Bug Fixes

* 581 environment lightformers are not working ([#584](https://github.com/Tresjs/cientos/issues/584)) ([653a5df](https://github.com/Tresjs/cientos/commit/653a5df0468c984f307e4b3efd4bdccbaaceef6d))
* build dts error TS7056 ([#521](https://github.com/Tresjs/cientos/issues/521)) ([c16c6e5](https://github.com/Tresjs/cientos/commit/c16c6e594f4a0662739343181ad8103644f8514d))
* **deps:** update dependency @tresjs/core to v4.3.0 ([#503](https://github.com/Tresjs/cientos/issues/503)) ([83fa2bf](https://github.com/Tresjs/cientos/commit/83fa2bf1c61e8d62cccd1772fccc251c3109c984))
* **deps:** update dependency vue-router to v4.4.5 ([#488](https://github.com/Tresjs/cientos/issues/488)) ([0840b88](https://github.com/Tresjs/cientos/commit/0840b885dd960eeeb10077d15f606a2644412474))
* instance properties and fix demo ([#561](https://github.com/Tresjs/cientos/issues/561)) ([f0fb337](https://github.com/Tresjs/cientos/commit/f0fb337d3f3900485708839898bba797f8a6f7ab))
* **KeyboardControls:** support non-qwerty keyboards ([#573](https://github.com/Tresjs/cientos/issues/573)) ([#574](https://github.com/Tresjs/cientos/issues/574)) ([efdde6d](https://github.com/Tresjs/cientos/commit/efdde6de32f32cbe0a8b69f7df0a701b4fc333a6))
* **MeshReflectionMaterial:** remove unneeded material.onBeforeRender ([#534](https://github.com/Tresjs/cientos/issues/534)) ([f622324](https://github.com/Tresjs/cientos/commit/f6223249e3d5a95e7aa76a782125a535d4dd69df))
* typescript build issues ([#578](https://github.com/Tresjs/cientos/issues/578)) ([09584be](https://github.com/Tresjs/cientos/commit/09584be48705d24a4eaf89655ac78138fc95108d))
* update core version with patch ([#508](https://github.com/Tresjs/cientos/issues/508)) ([cbae8ee](https://github.com/Tresjs/cientos/commit/cbae8ee2caac2d125bff4e944986babe734680af))

## [4.0.3](https://github.com/Tresjs/cientos/compare/4.0.2...4.0.3) (2024-10-04)


### Bug Fixes

* **deps:** update dependency @tresjs/core to v4.2.10 ([#479](https://github.com/Tresjs/cientos/issues/479)) ([fb3026a](https://github.com/Tresjs/cientos/commit/fb3026aa2f54b2f388f1a074714ac46b10f3af81))
* discrepancy between param enableDamping in OrbitControl ([#486](https://github.com/Tresjs/cientos/issues/486)) ([97a224c](https://github.com/Tresjs/cientos/commit/97a224c32e5aedf472c77e43dd6c426fc09a1f45))

## [4.0.2](https://github.com/Tresjs/cientos/compare/4.0.1...4.0.2) (2024-08-30)


### Bug Fixes

* **useGltf:** use-loader fix for gltf with textures ([#480](https://github.com/Tresjs/cientos/issues/480)) ([f1f983f](https://github.com/Tresjs/cientos/commit/f1f983f94cea8f4cd4bef451c768ff175ddd4f00))

## [4.0.1](https://github.com/Tresjs/cientos/compare/4.0.0...4.0.1) (2024-08-30)


### Bug Fixes

* adapt to changes on useloader for Cube Textures ([#476](https://github.com/Tresjs/cientos/issues/476)) ([3641dc6](https://github.com/Tresjs/cientos/commit/3641dc6db3a663b5d28d2e7899f26faf244959ce))
* **deps:** update dependency @tresjs/core to v4.2.7 ([#466](https://github.com/Tresjs/cientos/issues/466)) ([0596353](https://github.com/Tresjs/cientos/commit/0596353a1d4aed2b984fac58442530279375e1a9))

## [4.0.0](https://github.com/Tresjs/cientos/compare/3.9.0...4.0.0) (2024-08-20)


### Features

* Add cylinder component ([9e17559](https://github.com/Tresjs/cientos/commit/9e17559fc98066db79b02b7ea0c98ae3037ac906))
* V4 ([#420](https://github.com/Tresjs/cientos/issues/420)) ([0cdd58e](https://github.com/Tresjs/cientos/commit/0cdd58ee0b8f1e086899a3efb7ad93575b117ccc)), closes [#425](https://github.com/Tresjs/cientos/issues/425) [#439](https://github.com/Tresjs/cientos/issues/439) [#435](https://github.com/Tresjs/cientos/issues/435) [#441](https://github.com/Tresjs/cientos/issues/441) [#436](https://github.com/Tresjs/cientos/issues/436) [#428](https://github.com/Tresjs/cientos/issues/428)


### Bug Fixes

* **SkyDemo:** value.value -> value ([82fe77b](https://github.com/Tresjs/cientos/commit/82fe77b4dc11fd23b47e40bc33a843dc69cf017f))
* vue attrs hyphenation issues ([4f9b61b](https://github.com/Tresjs/cientos/commit/4f9b61b954a916d8f8880798f06c03b79092896b))

## [4.0.0-rc.2](https://github.com/Tresjs/cientos/compare/4.0.0-rc.1...4.0.0-rc.2) (2024-07-26)

## [4.0.0-rc.1](https://github.com/Tresjs/cientos/compare/4.0.0-rc.0...4.0.0-rc.1) (2024-07-25)


### Features

* **fbo:** add autoRender flag as an option to useFBO ([#458](https://github.com/Tresjs/cientos/issues/458)) ([ddcd4ac](https://github.com/Tresjs/cientos/commit/ddcd4ac36cfd5b5cbb06e967878a9468b390a17c))

## [4.0.0-rc.0](https://github.com/Tresjs/cientos/compare/4.0.0-next.1...4.0.0-rc.0) (2024-07-24)


### Features

* **Sparkles:** invalidate on update ([#446](https://github.com/Tresjs/cientos/issues/446)) ([cbfd226](https://github.com/Tresjs/cientos/commit/cbfd226b94fb363f3a59a735365c679e8142420f))


### Bug Fixes

* reimplement ContactShadows for v4 ([#449](https://github.com/Tresjs/cientos/issues/449)) ([d71c328](https://github.com/Tresjs/cientos/commit/d71c328969da64beee05088ced05bd7b632d6f31))
* update to core v4.2.2 to remove warning on invalidation ([42afa6e](https://github.com/Tresjs/cientos/commit/42afa6e67962796d2ce076a29917262f9ca09ea5))

## [4.0.0-next.1](https://github.com/Tresjs/cientos/compare/3.9.0...4.0.0-next.1) (2024-07-17)


### ⚠ BREAKING CHANGES

* **MeshReflectionMaterial:** add features/docs, reorganize

### Features

* 423 enable on demand render mode usage ([#436](https://github.com/Tresjs/cientos/issues/436)) ([b3eef40](https://github.com/Tresjs/cientos/commit/b3eef40430d23e2ba6c5a195c0cf510c0bc54ce9))
* **AnimatedSprite:** add asSprite prop ([7a14b55](https://github.com/Tresjs/cientos/commit/7a14b5592d78f57785d04bd1484a35e501b7cceb))
* **AnimatedSprite:** dispose texture onUnmounted ([18d6904](https://github.com/Tresjs/cientos/commit/18d6904570cc34ca9c3e64e6b42ec5c639a6e885))
* **AnimatedSprite:** remove explicit click event ([042c350](https://github.com/Tresjs/cientos/commit/042c350883aec53bdf0331cc4b3378e06d87fb88))
* **AnimatedSprite:** remove unnecessary Suspense ([082d695](https://github.com/Tresjs/cientos/commit/082d695f1a6843a8fa5edcd8e6c32ec8530a03a9))
* **app:** 421 Update components to use useLoop instead of useRenderLoop ([ad3b290](https://github.com/Tresjs/cientos/commit/ad3b290c4afb3adf5bf36ccf02d08ea1beb98bc8))
* **app:** Add the option for x and y in mouseparallax component ([#444](https://github.com/Tresjs/cientos/issues/444)) ([12d5834](https://github.com/Tresjs/cientos/commit/12d5834becba2cdfc26300fd5bf1ec1f9e26afe3))
* re-remove tweakpane ([#425](https://github.com/Tresjs/cientos/issues/425)) ([72284ce](https://github.com/Tresjs/cientos/commit/72284ce2e0e378d353b3573a6216ad6f6dcd4425))
* update to core v4.2 ([14b30f9](https://github.com/Tresjs/cientos/commit/14b30f99282ed3cb1d21cbdf31e672867d79f27c))


### Bug Fixes

* **Lensflare demo:** add camera [#435](https://github.com/Tresjs/cientos/issues/435) ([#441](https://github.com/Tresjs/cientos/issues/441)) ([981de57](https://github.com/Tresjs/cientos/commit/981de572c97183b8d2070925daa8209d2fa6b55e))
* **MeshReflectionMaterial:** add features/docs, reorganize ([58703e3](https://github.com/Tresjs/cientos/commit/58703e362bbe731a56b7ce903160df13513ec18a))
* remove hardcoded speed number, that setting at 0 doesn't stop the effect ([e67f3a2](https://github.com/Tresjs/cientos/commit/e67f3a295025ca1bfb1c0f664ceccefac389e0af))
* **SkyDemo:** value.value -> value ([82fe77b](https://github.com/Tresjs/cientos/commit/82fe77b4dc11fd23b47e40bc33a843dc69cf017f))
* **types:** fixed types generics for `useGLTF` ([#448](https://github.com/Tresjs/cientos/issues/448)) ([62a9bcc](https://github.com/Tresjs/cientos/commit/62a9bcc2d4490c7493667c3316441b5363cb42fc))
* uncomment section ([fac2253](https://github.com/Tresjs/cientos/commit/fac22534818a15d49f631b790185f4f1266c7339))
* vue attrs hyphenation issues ([4f9b61b](https://github.com/Tresjs/cientos/commit/4f9b61b954a916d8f8880798f06c03b79092896b))

## [4.0.0-next.0](https://github.com/Tresjs/cientos/compare/3.9.0...4.0.0-next.1) (2024-03-27)


### ⚠ BREAKING CHANGES

* **app:** 349 Remove directives from cientos
* **app:** 227 Change the keyboardcontrols implementation

### Features

* add arrow keys support ([39e2094](https://github.com/Tresjs/cientos/commit/39e2094338ba37613b189e7d593ecc2b0a35680b))
* **AnimatedSprite:** add AnimatedSprite, playground, docs ([d6ea81b](https://github.com/Tresjs/cientos/commit/d6ea81b5540c2f4bf0f233e269ed98992ee8a551))
* **AnimatedSprite:** allow [numCols, numRows] as atlas prop ([3309d9c](https://github.com/Tresjs/cientos/commit/3309d9c24ee1d006b41bdeaa29eac7c8f9658342))
* **AnimatedSprite:** always emit last frame name on loop and on end ([ed16136](https://github.com/Tresjs/cientos/commit/ed16136a84143396ae8accc327429c1ef1fbdd1b))
* **AnimatedSprite:** change default fps ([44831a4](https://github.com/Tresjs/cientos/commit/44831a492e6a881061b9a113d1a627026b172056))
* **app:** 227 Change the keyboardcontrols implementation ([fed0f86](https://github.com/Tresjs/cientos/commit/fed0f86b3c92aa8ea86be0e6193e1639d421bcc2))
* **app:** 227 Final details, ready to go ([6f06213](https://github.com/Tresjs/cientos/commit/6f06213d92f9b389c3d1fca377002ae0b060c87b))


### Bug Fixes

* **AnimatedSprite:** return nullFrame animation if requested animation not found ([453819e](https://github.com/Tresjs/cientos/commit/453819e0237b58177a34bbeee0af4ce44252195c))
* **Atlas:** add missing argument to function call ([e6b147e](https://github.com/Tresjs/cientos/commit/e6b147e45520238e8fd467863972af8fe8f8ec37))


### Code Refactoring

* **app:** 349 Remove directives from cientos ([8fc4cd5](https://github.com/Tresjs/cientos/commit/8fc4cd582ba85cc09e000627449622e8861ec76a))

## [3.9.0](https://github.com/Tresjs/cientos/compare/3.8.0...3.9.0) (2024-05-07)

### Features
* add `local` props ([b9192fb](https://github.com/Tresjs/cientos/commit/b9192fb3c5ac617495866ad1df23a93a1068afbd))
* add camera recognition for default props setup ([c8ebba0](https://github.com/Tresjs/cientos/commit/c8ebba03b72bdf45bd1927aeb953911269cb4bc1))
* **app:** 252 adding ocean component ([7efb293](https://github.com/Tresjs/cientos/commit/7efb29300a5cda624801316e6bc4f33a88e8de04))
* **app:** 252 Renamed as ocean, add sky support ([473bac6](https://github.com/Tresjs/cientos/commit/473bac61d9831b9334f4ba78b0d4ab979b7b167f))
* **app:** Add holographic material to cientos ([f0f4eab](https://github.com/Tresjs/cientos/commit/f0f4eabdda380c912b4e3078ac2eddd7c7643edb))
* **app:** Add RoundedBox component ([8b6cb67](https://github.com/Tresjs/cientos/commit/8b6cb67b686bf242aa6e96c3b68af535ddb944d1))
* **cientos/positional-audio:** add positional audio component ([39c334c](https://github.com/Tresjs/cientos/commit/39c334cfeb592ce512c540d8d10fc71b771cacf9))
* **cientos/positional-audio:** adding more logic and examples for playground ([73c94de](https://github.com/Tresjs/cientos/commit/73c94deb9bc3f2413f17e4ba7124ece2493cea47))
* **cientos/positional-audio:** delete medias, modifications doc ([ae34177](https://github.com/Tresjs/cientos/commit/ae3417733c8092a83f1ede61ec4b3bfbc4cd61b8))
* **cientos/positional-audio:** demo clean ([7bc1b61](https://github.com/Tresjs/cientos/commit/7bc1b61c7cb55a78e9fd9b19406cca0508c18643))
* **cientos/positional-audio:** documentation v1, main example v1 ([bb68bda](https://github.com/Tresjs/cientos/commit/bb68bda3cf1a9b1a042ea388264669879511b4fb))
* **cientos/positional-audio:** fix issues async, add gui example doc ([65c4c17](https://github.com/Tresjs/cientos/commit/65c4c17a9ce9b24710a5d5895334677e46b1a9a1))
* **cientos/positional-audio:** fix lint issue, wip doc ([4e2b5fb](https://github.com/Tresjs/cientos/commit/4e2b5fbe0991d06391a02f7de1ab10d425f3651c))
* **cientos/positional-audio:** fix material issue for the helper, documentation wip ([e0d8f41](https://github.com/Tresjs/cientos/commit/e0d8f41fd6ba32a5b2fdb176eadfc56f251391a2))
* **cientos/positional-audio:** fix positional async helper and documentation ([f1b9476](https://github.com/Tresjs/cientos/commit/f1b94761ecde13b2e49d6a26fa7a173eeec4f504))
* **cientos/positional-audio:** improve documentation ([00c4551](https://github.com/Tresjs/cientos/commit/00c4551f367fe05b7a3e3b2888819023244c9c73))
* **cientos/positional-audio:** improve documentation ([eb30d85](https://github.com/Tresjs/cientos/commit/eb30d8552eeb4b13372c48e96b26237a0d315dc9))
* **cientos/positional-audio:** improve documentation ([8b65696](https://github.com/Tresjs/cientos/commit/8b656964b6ed8044430075a6a13f51e323a429a6))
* **cientos/positional-audio:** improve documentation ([a0f02a2](https://github.com/Tresjs/cientos/commit/a0f02a2e8d2c7a96dc1a17099502637e2c557deb))
* **cientos/positional-audio:** improved code and documentation ([46ca4c4](https://github.com/Tresjs/cientos/commit/46ca4c4f5e6b85671e5d78cb9d59ff21fffd1b1f))
* **cientos/positional-audio:** rename positionAudioRef ([a036caa](https://github.com/Tresjs/cientos/commit/a036caae705a4fa91642d125355879cb6d517c11))
* **cientos/positional-audio:** start writing documentation ([1824cbb](https://github.com/Tresjs/cientos/commit/1824cbbacce0242a09f4c405437b4c51a77a1f0f))
* **cientos/positional-audio:** start writing documentation ([6131e41](https://github.com/Tresjs/cientos/commit/6131e41de1694d8730fa485fbd8a5d3b7d978434))
* **cientos/transform-controls:** add camera prop ([0ce732d](https://github.com/Tresjs/cientos/commit/0ce732dc4dd74fc5044d7c8b1ad0de18d63a4e86))
* **docs:** add local prop to docs ([d21694b](https://github.com/Tresjs/cientos/commit/d21694bc5ed6b711c768700b7cfb03145c65ac30))
* **Fit:** add component, playground, demo ([a521903](https://github.com/Tresjs/cientos/commit/a5219033e79bbb8ec78a49a1277d6adeb699d172))

### Bug Fixes
* add support for camera prop ([7844743](https://github.com/Tresjs/cientos/commit/78447430076281137bf822d1863ee419d91ca1f7))
* **app:** 252 Apply review feedback ([4449208](https://github.com/Tresjs/cientos/commit/4449208fccedca0a37ea2e62142b00188a21e0ad))
* apply feedback ([3a50bc2](https://github.com/Tresjs/cientos/commit/3a50bc29c00dd64775643ab08fe3e5ba569c8248))
* camera controls ignored props ([37fa163](https://github.com/Tresjs/cientos/commit/37fa163b656a8795727046e363053e99442a46f4))
* **docs:** better description ([703ab70](https://github.com/Tresjs/cientos/commit/703ab70a69d501d51c448dfdfecc072d83d4b261))
* little detail in the interface ([fb6456a](https://github.com/Tresjs/cientos/commit/fb6456a063cc28868fe0178b28695c04ad812ccc))
* transformControls throws error when switching active camera ([f1a477a](https://github.com/Tresjs/cientos/commit/f1a477a46c341f6ed4e58fce1e8999e19feba8d0))
* **type:** correct the east description ([c26da1f](https://github.com/Tresjs/cientos/commit/c26da1f11524f2445a1b0653f35354de4d3b10ed))

## [4.0.0-next.0](https://github.com/Tresjs/cientos/compare/3.8.0...4.0.0-next.0) (2024-03-27)


### Features

* **app:** 252 adding ocean component ([7efb293](https://github.com/Tresjs/cientos/commit/7efb29300a5cda624801316e6bc4f33a88e8de04))
* **app:** 252 Renamed as ocean, add sky support ([473bac6](https://github.com/Tresjs/cientos/commit/473bac61d9831b9334f4ba78b0d4ab979b7b167f))
* **app:** Add RoundedBox component ([8b6cb67](https://github.com/Tresjs/cientos/commit/8b6cb67b686bf242aa6e96c3b68af535ddb944d1))


### Bug Fixes

* **app:** 252 Apply review feedback ([4449208](https://github.com/Tresjs/cientos/commit/4449208fccedca0a37ea2e62142b00188a21e0ad))
* apply feedback ([3a50bc2](https://github.com/Tresjs/cientos/commit/3a50bc29c00dd64775643ab08fe3e5ba569c8248))
* little detail in the interface ([fb6456a](https://github.com/Tresjs/cientos/commit/fb6456a063cc28868fe0178b28695c04ad812ccc))

## [3.8.0](https://github.com/Tresjs/cientos/compare/3.7.0...3.8.0) (2024-02-07)

### Features

* add BakeShadows component ([77df084](https://github.com/Tresjs/cientos/commit/77df0843129bb3957fdd3ea536943fceb046d851))
* add gltfExporter composable ([0c77d33](https://github.com/Tresjs/cientos/commit/0c77d332240100b31c5a385e2bb1bcd6a21c123c))
* **app:** 329 Add cast-shadow/receive-shadow to 3D model ([471e28a](https://github.com/Tresjs/cientos/commit/471e28a92ae99097137b6210c32912d04f9c14c4))
* reflection material ([5cccaa9](https://github.com/Tresjs/cientos/commit/5cccaa9ea3fc42cf6064567430eb1c87dd26a45a))


### Bug Fixes

* **app:** 336 Fix stats-gl problem ([505e243](https://github.com/Tresjs/cientos/commit/505e2434fef9f6c9207065fb6ef4af9bdd89fd3a))
* **deps:** update dependency @tresjs/core to v3.7.0 ([#333](https://github.com/Tresjs/cientos/issues/333)) ([4d09ebb](https://github.com/Tresjs/cientos/commit/4d09ebbcc75c274376dfe6bb179d70bb9e4e861d))
* reduce beforeRenderer time ([b9df580](https://github.com/Tresjs/cientos/commit/b9df5809fd5543ec6f5140e3899f4867b62f3dc8))
* reduce lagging on the reflection ([dca5c31](https://github.com/Tresjs/cientos/commit/dca5c31ad0581261e48c6b49bf3022ad3210c216))


### Reverts

* remove tweakpane ([#313](https://github.com/Tresjs/cientos/issues/313))" ([#343](https://github.com/Tresjs/cientos/issues/343)) ([1314abd](https://github.com/Tresjs/cientos/commit/1314abd9b9c0cae0d1bcc202c4b7e9c61d335d5b))

## [3.7.0](https://github.com/Tresjs/cientos/compare/3.6.0...3.7.0) (2023-12-13)


### Features

* add 'change' event to pointerlock controls, improve docs ([c394f10](https://github.com/Tresjs/cientos/commit/c394f10b1d219618bfad7619106669fe17c75e32))
* add rectAreaLightHelper to vLightHelper directive ([#283](https://github.com/Tresjs/cientos/issues/283)) ([8bc64a1](https://github.com/Tresjs/cientos/commit/8bc64a139ee350cb1a3e8d629a6f0c5a44bca973))
* add reflector ([#136](https://github.com/Tresjs/cientos/issues/136)) ([bd4d710](https://github.com/Tresjs/cientos/commit/bd4d7107bbb990f31ac0feb77feb8729c0b8d019))
* sampler and useSampler ([#286](https://github.com/Tresjs/cientos/issues/286)) ([826833c](https://github.com/Tresjs/cientos/commit/826833c95d281c76f48d972fc0e7a39ec49ea81a))


### Bug Fixes

* remove wrapper element on unmounted ([#310](https://github.com/Tresjs/cientos/issues/310)) ([1a37c92](https://github.com/Tresjs/cientos/commit/1a37c92c8d461f31dfb272089c6299d6305eb1ff))
* wrap `Text3D` inside `Suspense` in the docs ([#307](https://github.com/Tresjs/cientos/issues/307)) ([27ce1f0](https://github.com/Tresjs/cientos/commit/27ce1f0b54e015c44f1b30cc9b4ffaeb26e06a8a))

## [3.6.0](https://github.com/Tresjs/cientos/compare/3.5.1...3.6.0) (2023-11-07)


### Features

* **cientos:** Add `CustomShaderMaterial` wrapper ([#261](https://github.com/Tresjs/cientos/issues/261)) ([43701f8](https://github.com/Tresjs/cientos/commit/43701f824379df4dc7086cdc47a84f91cd18f7de))
* **Sparkles:** add Sparkles ([#253](https://github.com/Tresjs/cientos/issues/253)) ([cbcc9b9](https://github.com/Tresjs/cientos/commit/cbcc9b9eda16d04da3996954185a57fbb35d7ea4))
* **Superformula:** add superformula ([#274](https://github.com/Tresjs/cientos/issues/274)) ([19130b4](https://github.com/Tresjs/cientos/commit/19130b429cb20bf562d73275d8def8657241ba64))


### Bug Fixes

* avoid html container to be appended again ([#278](https://github.com/Tresjs/cientos/issues/278)) ([8c2b17d](https://github.com/Tresjs/cientos/commit/8c2b17d6965de3ec2d51a9d4aadba857d4d358b5))


### Reverts

* **docs:** remove docs/ from .gitignore ([#272](https://github.com/Tresjs/cientos/issues/272)) ([8b5577e](https://github.com/Tresjs/cientos/commit/8b5577eef4b5f0fa0df5ecc7fe4693a31ac96e68))

## [3.5.1](https://github.com/Tresjs/cientos/compare/3.5.0...3.5.1) (2023-10-18)


### Bug Fixes

* add key to html slot wrapper to force re-render ([#258](https://github.com/Tresjs/cientos/issues/258)) ([f7a32e2](https://github.com/Tresjs/cientos/commit/f7a32e22954816bc6240fc518f3dbbbd8f8bad96))
* **OrbitControls:** expose ref ([#250](https://github.com/Tresjs/cientos/issues/250)) ([0f1d162](https://github.com/Tresjs/cientos/commit/0f1d162731292ea338678e74e9a3289c04378412))

## [3.5.0](https://github.com/Tresjs/cientos/compare/3.4.0...3.5.0) (2023-10-10)


### Features

* 178 v distance to ([#220](https://github.com/Tresjs/cientos/issues/220)) ([d2e2521](https://github.com/Tresjs/cientos/commit/d2e252108c4913529b92cdbb0fc86f79dbc4337e))
* 23 html component ([#184](https://github.com/Tresjs/cientos/issues/184)) ([3a488f0](https://github.com/Tresjs/cientos/commit/3a488f0c62f9bab4b2d4b1626f36b4b0d34415e2))
* add `<Fbo />` abstraction ([#228](https://github.com/Tresjs/cientos/issues/228)) ([6efc076](https://github.com/Tresjs/cientos/commit/6efc07670bbf4b604acae5aa9b3a280c595df733))
* add global-audio component ([f66d81d](https://github.com/Tresjs/cientos/commit/f66d81d7c9d620ebbe8190ddc78fa99b1defe0f9))
* change stats to renderless component ([3ae6f5d](https://github.com/Tresjs/cientos/commit/3ae6f5dbf6f824dfb1485f69d476a3c8e43d77c9))
* **Lines:** add CatumullRomLine, Line2 ([4a267a5](https://github.com/Tresjs/cientos/commit/4a267a5e4661e8f9adc319a7b3a561c34243f3f6))
* **Lines:** add docs, correct name ([f868d4e](https://github.com/Tresjs/cientos/commit/f868d4e1e7ab738fbe7c846d12e15f1beb49e930))
* **Lines:** adjust types ([e876314](https://github.com/Tresjs/cientos/commit/e87631436abd2f4bab17ada47dc9a1c70650f38b))
* **Lines:** correct segments prop description ([a22d25d](https://github.com/Tresjs/cientos/commit/a22d25d582cb5339235056399634116ec754f2eb))
* **Lines:** fix linter errors ([6ab3ef5](https://github.com/Tresjs/cientos/commit/6ab3ef5ea4e70f10cebc1df6565824e85d6d9bbb))
* **Lines:** format docs ([a3b612f](https://github.com/Tresjs/cientos/commit/a3b612fc3c94736ba294f9d41960cc27b0ec9350))
* **Lines:** format docs ([28e78b1](https://github.com/Tresjs/cientos/commit/28e78b137376f9ac25b24ffb2ca6650b7b2ea033))
* **Lines:** make Line2 import relative ([6788d8e](https://github.com/Tresjs/cientos/commit/6788d8e30045e6b009694bf9769154efafd5e7ec))
* **Lines:** remove unneeded refs, objects from demos ([128ea59](https://github.com/Tresjs/cientos/commit/128ea59e40ef8ad1e44f8593142a5b9240bd97d6))
* **Lines:** reword docs ([45002ed](https://github.com/Tresjs/cientos/commit/45002ed0facb2b8586676b690d05a65f5ae2de69))
* remove pauseTrigger, now play-trigger element also work for pause state when is playing ([6973f23](https://github.com/Tresjs/cientos/commit/6973f23c3e5f0b6193934863a7e53e0449a916ca))


### Bug Fixes

* 147 enhance environment and useenvironment abstractions ([#219](https://github.com/Tresjs/cientos/issues/219)) ([876fa9f](https://github.com/Tresjs/cientos/commit/876fa9f01677ba2b0c6d8fa7eac18b08d9dbe884))
* **deps:** update dependency @tresjs/core to v3.3.0 ([#200](https://github.com/Tresjs/cientos/issues/200)) ([c33d383](https://github.com/Tresjs/cientos/commit/c33d383d08a92643ae60b8e5739305eefd1e4fce))
* **Levioso:** changing speed causes jerkiness ([#212](https://github.com/Tresjs/cientos/issues/212)) ([a941576](https://github.com/Tresjs/cientos/commit/a941576054ec25c71cb671edc6b6b949bf66a589))
* v3.4.1 ([#238](https://github.com/Tresjs/cientos/issues/238)) ([8be6c82](https://github.com/Tresjs/cientos/commit/8be6c8276bb89cc054ea0c5781c13146a54e9b2e))

## [3.4.1](https://github.com/Tresjs/cientos/compare/3.4.0...3.4.1) (2023-09-27)


### Bug Fixes

* fake commit to force a patch ([b1a055c](https://github.com/Tresjs/cientos/commit/b1a055c07765bb5b97c6b5ff66e2c4183bf54fba))
* remove es only format bundle ([b9bb1b9](https://github.com/Tresjs/cientos/commit/b9bb1b99905767b4280260e1d439acb7215d0195))

## [3.4.0](https://github.com/Tresjs/cientos/compare/3.3.0...3.4.0) (2023-09-26)


### Features

* add first directive vLog ([071c63f](https://github.com/Tresjs/cientos/commit/071c63f5f7723d0cb4722d535bb216edf9d42814))
* add smoke demo ([6aa3f06](https://github.com/Tresjs/cientos/commit/6aa3f064a99cd64d2149a29c9213393f75252b65))
* add stats-gl component ([68bee97](https://github.com/Tresjs/cientos/commit/68bee97f5f11292d275d2c3376e8222809d53630))
* add v-always-look-at directive ([ab3cfa3](https://github.com/Tresjs/cientos/commit/ab3cfa32b791f1188253578119228a52cb28b5a2))
* add v-light-helper component ([d3e79d7](https://github.com/Tresjs/cientos/commit/d3e79d7dad5075e2bcee5aaa641ace772823f931))
* **cientos:** 176 remove models ([#199](https://github.com/Tresjs/cientos/issues/199)) ([1314488](https://github.com/Tresjs/cientos/commit/13144884b99de956397f40e436433e598b8bc110))
* **cientos:** 178 v-light-helper ([#214](https://github.com/Tresjs/cientos/issues/214)) ([0652eed](https://github.com/Tresjs/cientos/commit/0652eed4499e4600a9e1d0ecbb2644b201bb5532))
* **Lensflare:** add color, distance, size, texture to component ([f90988e](https://github.com/Tresjs/cientos/commit/f90988eae396df7334bfe507e5341bcc1ec4ea08))
* **Lensflare:** add defaultChoice ([4246245](https://github.com/Tresjs/cientos/commit/4246245c1b06421b51c341a2ef4ca71ffe689c99))
* **Lensflare:** add docs ([dcd956b](https://github.com/Tresjs/cientos/commit/dcd956b82cc8caa688216b0cb19b22ea65d31b0d))
* **Lensflare:** add Leches ([14e03a0](https://github.com/Tresjs/cientos/commit/14e03a0548163ce3455d6540f5d424ac7200d095))
* **Lensflare:** add Lensflare ([6605eaa](https://github.com/Tresjs/cientos/commit/6605eaa1e5081783ed1b9ba2d02f2dd3aa393785))
* **Lensflare:** add Lensflare ([fb1f52d](https://github.com/Tresjs/cientos/commit/fb1f52d72838d9e9a18cf841e38335232cf9abd7))
* **Lensflare:** add seed, color ([c895fe1](https://github.com/Tresjs/cientos/commit/c895fe1fadfeaf647bfa3b8b1bc3964098f07f13))
* **Lensflare:** change exposed ref name ([9279cfe](https://github.com/Tresjs/cientos/commit/9279cfef194ca2ad98f8dc3b14e1e6616c6ea8cd))
* **Lensflare:** clean up imports ([b8ef198](https://github.com/Tresjs/cientos/commit/b8ef1981c454eb407df9101eae14d78a03eede6b))
* **Lensflare:** fix linter error ([84f3a79](https://github.com/Tresjs/cientos/commit/84f3a7947abc25b5232ff89434f7cfd6a7418438))
* **Lensflare:** fix linter errors ([224ecc4](https://github.com/Tresjs/cientos/commit/224ecc4acb44ee0b79eeb50e9ac98b6f3f7cd21a))
* **Lensflare:** fix path ([7f18278](https://github.com/Tresjs/cientos/commit/7f1827801cf7d5cfcf7f0dbf13bfb46813e33c43))
* **Lensflare:** fix paths ([7bc7cd2](https://github.com/Tresjs/cientos/commit/7bc7cd2ce31d08528b4ee0b6daf632d85b339101))
* **Lensflare:** formatting ([fc8ad30](https://github.com/Tresjs/cientos/commit/fc8ad30ea1e7b1fd976d959a52734a02ae064426))
* **Lensflare:** group constants into objects ([022529f](https://github.com/Tresjs/cientos/commit/022529f1f434c597e4a8759bfe38c8a38a0fe9f7))
* **Lensflare:** guard against undefined ref value ([2c6c912](https://github.com/Tresjs/cientos/commit/2c6c9123cf92e706a6e15965e68d96d62c43a5aa))
* **Lensflare:** move easing functions to /src/utils ([f443bbc](https://github.com/Tresjs/cientos/commit/f443bbc51d34e8256a567b3b31490c47d0cc063d))
* **Lensflare:** move preset values to constants.ts ([9766d6b](https://github.com/Tresjs/cientos/commit/9766d6bc819f683ac32d654b5abedb57fc9ff085))
* **Lensflare:** move to own subdirectory ([76e897c](https://github.com/Tresjs/cientos/commit/76e897c803f1e1c25a69988ee078dc6208855c63))
* **Lensflare:** refactor Leches setup ([f8c69c0](https://github.com/Tresjs/cientos/commit/f8c69c05e6c57461144697c27882c4cfde895182))
* **Lensflare:** refactor Leches setup ([0715ccf](https://github.com/Tresjs/cientos/commit/0715ccfe084ea7286178ff1674007cb34a387f26))
* **Lensflare:** remove 4, 8 sided textures ([3c23042](https://github.com/Tresjs/cientos/commit/3c2304275c75bcbb8cc89f376be48d104ddfab8e))
* **Lensflare:** remove duplicate RandUtils ([d816e8e](https://github.com/Tresjs/cientos/commit/d816e8eb82abbf73bbebcc2ce35533d1294ce86e))
* **Lensflare:** remove scaleRef from demo ([50271ea](https://github.com/Tresjs/cientos/commit/50271ea67256183f1f4d86cb8851ce480be45ad9))
* **Lensflare:** rename folder ([3fc7374](https://github.com/Tresjs/cientos/commit/3fc7374c953fb52cd397194a09d9206fda2440b8))
* **Lensflare:** rename function, variables ([e0c382d](https://github.com/Tresjs/cientos/commit/e0c382d052d4e699b9a64ac6e479d8f7e683344b))
* **Lensflare:** rename prop flare -> elements ([fb199f6](https://github.com/Tresjs/cientos/commit/fb199f6dbbf858d307cdd07aee9c84a29682f7f7))
* **Lensflare:** resolve infinite while loop bug ([dfa5d8a](https://github.com/Tresjs/cientos/commit/dfa5d8a39095c6d0cf7c3588c3d8e93daebaadc7))
* **Lensflare:** scale fix ([c439895](https://github.com/Tresjs/cientos/commit/c4398957fe75efe149df829ac4682b85291ddedb))
* **Lensflare:** simplify prop precedence ([91833e6](https://github.com/Tresjs/cientos/commit/91833e6017c7dbe89f52bf686b6122fe6ed5a1ad))
* **Lensflare:** smooth out types/conversion ([b9a60e8](https://github.com/Tresjs/cientos/commit/b9a60e808c3c0ce43af34c37cb6bd34f9478988f))
* **Lensflare:** update route to LensflareDemo ([7dfce1b](https://github.com/Tresjs/cientos/commit/7dfce1b06c557a1421c06db5022bf6d30050e14e))
* **Lensflare:** update seed with random value ([fba64dc](https://github.com/Tresjs/cientos/commit/fba64dc2720884eb16dcae446de9dd7a066c0ea6))
* **Lensflare:** use Tresjs/assets for texture URLS ([3dc7e90](https://github.com/Tresjs/cientos/commit/3dc7e9010a6ee75ad50849701dd2d09a576df8d7))
* **RandUtils:** add RandUtils ([e1693c1](https://github.com/Tresjs/cientos/commit/e1693c11369791b075341533f1e5fd350240b789))
* **RandUtils:** add RandUtils ([5fa7111](https://github.com/Tresjs/cientos/commit/5fa7111078b683cb15951d1dbb27691e81a8b304))
* remove cardbobot, suzanne. Add blender-cube in backdrop demo ([c9f95ac](https://github.com/Tresjs/cientos/commit/c9f95acd260470a26ccce8db9bd700b1039924d2))
* **Sky:** add distance prop to docs ([5c29e9b](https://github.com/Tresjs/cientos/commit/5c29e9b0bb3c058a8649b2ad86476933e7b1b3e0))
* **Sky:** add distance to demo ([7440216](https://github.com/Tresjs/cientos/commit/74402160cf3045a0c528b851d2609ee82c940c27))
* **Sky:** add docs ([110e4a8](https://github.com/Tresjs/cientos/commit/110e4a8773fbaf422bbe2be22a6aaed9e3eba23e))
* **Sky:** add exposure to demo ([323fc82](https://github.com/Tresjs/cientos/commit/323fc829f2ee7a0439fd7f94de689e36b9426da5))
* **Sky:** add Sky ([894d71e](https://github.com/Tresjs/cientos/commit/894d71ee6eb9e51b9526e4dd281fa86f5aa463d4))
* **Sky:** change azimuth default ([12b7c38](https://github.com/Tresjs/cientos/commit/12b7c386d59cd09047d4c82693daf2be47fd68ff))
* **Sky:** disable zoom/pan idiomatically in demo ([08d2f67](https://github.com/Tresjs/cientos/commit/08d2f67095cfa1bb34cff101b4f9ec040e6d98ec))
* **Sky:** fix linter whitespace errors ([dbc191d](https://github.com/Tresjs/cientos/commit/dbc191d73019d3eb5e1faa040cac5c025d9e6dcf))
* **Sky:** make prop descriptions consistent in docs ([a62b6d2](https://github.com/Tresjs/cientos/commit/a62b6d2fd7d4050c1218fd63e0986f961ea8ed3a))
* **Sky:** remove grid ([0eaa3e6](https://github.com/Tresjs/cientos/commit/0eaa3e6c5f2785045eddcf1076aa65e659c26c85))
* **Sky:** remove unused ref from from demo ([4968785](https://github.com/Tresjs/cientos/commit/496878597b5ecdefc7c014b1a934b0d81dca339b))
* **Sky:** set demo max mieDirectionalG to 0.99 ([a4475db](https://github.com/Tresjs/cientos/commit/a4475db929acf50c923a0af9d6d670da705b2d0d))
* **Sky:** use Vue props instead of watchers for uniforms ([c45ed6f](https://github.com/Tresjs/cientos/commit/c45ed6f9e840d5c38bdec60e06aff9852a5dbb18))


### Bug Fixes

* check background prop if its empty string ([#217](https://github.com/Tresjs/cientos/issues/217)) ([ec20d69](https://github.com/Tresjs/cientos/commit/ec20d69412bec12ca3fb8cc5b04c4c00e33d22db))
* use camera's z position as default distance in CameraControls ([8a62a43](https://github.com/Tresjs/cientos/commit/8a62a436e7ca4de50b89665e0e77584feba97578))

## [3.3.0](https://github.com/Tresjs/cientos/compare/3.2.1...3.3.0) (2023-09-11)


### Features

* 158 stats ([#166](https://github.com/Tresjs/cientos/issues/166)) ([4a71885](https://github.com/Tresjs/cientos/commit/4a71885dc585a6a8ee733239fe73453157eca85c))
* add distance prop in camera controls ([388b5de](https://github.com/Tresjs/cientos/commit/388b5de4a7819fe9ef4c09ff9828a102661893dd))
* SVG ([28e3b6a](https://github.com/Tresjs/cientos/commit/28e3b6a4a47bfe2db16ed61214ea6d4cbddcb0c3))
* **SVG:** add depth demo ([ba1fd18](https://github.com/Tresjs/cientos/commit/ba1fd18ff18d52b4eec4d93d70ffd19c058055a6))
* **SVG:** add depth options ([e453a1d](https://github.com/Tresjs/cientos/commit/e453a1dad3a67a7bf612294a016a7c2cced851c7))
* **SVG:** add docs ([b176dc4](https://github.com/Tresjs/cientos/commit/b176dc4fb782b151ba2f2acb9b3b1434db897ba2))
* **SVG:** change 'depth' default to 'renderOrder' ([5c1dd27](https://github.com/Tresjs/cientos/commit/5c1dd2731c2974b5e3aaaa088393f25c3edb742a))
* **SVG:** dispose of geometries ([a75d571](https://github.com/Tresjs/cientos/commit/a75d57189697405dbe2ebc6a67746fd2de4065f2))
* **SVG:** fix linter warnings ([80dbaab](https://github.com/Tresjs/cientos/commit/80dbaabdbd27daa4145dbbd9bb75635c8ac9f0bf))
* **SVG:** fix type error ([4439aa1](https://github.com/Tresjs/cientos/commit/4439aa10bdc8ef4e3b3d7a353a627fcf40cedf82))
* **SVG:** remove depth prop demo ([ca82737](https://github.com/Tresjs/cientos/commit/ca82737f3a82de6a7bfbb56ae708b694ac6fa873))
* **SVG:** remove depth prop from demo ([87ceb34](https://github.com/Tresjs/cientos/commit/87ceb34a368680119843287ac824ca43d51f0bd8))
* **SVG:** remove key ([01061a9](https://github.com/Tresjs/cientos/commit/01061a9b3e9ffc356ee20c1948c10197aa3f085e))
* **SVG:** remove unused variable ([c85a96f](https://github.com/Tresjs/cientos/commit/c85a96fa227ec71d063365f18f1820a4679d9fee))
* **SVG:** rename exposed ref ([95bada9](https://github.com/Tresjs/cientos/commit/95bada9d80893fcd0c29cbc300b6ca82c366831d))
* **SVG:** split line for linter ([469273a](https://github.com/Tresjs/cientos/commit/469273acbe61ecc5b3aee611f5b0cc0945b99b1b))
* **SVG:** update JSDoc ([8c0aaf6](https://github.com/Tresjs/cientos/commit/8c0aaf6dc87396b3ac07bc251e78bfdc64a6d548))
* **SVG:** update props, depth in docs ([da85374](https://github.com/Tresjs/cientos/commit/da853745a0c3949f5c3f08c92f360206ee688763))
* **SVG:** whitespace ([d83493b](https://github.com/Tresjs/cientos/commit/d83493b76f0e37910ebdd012483649ef39e23c39))
* update lint rules, ([#196](https://github.com/Tresjs/cientos/issues/196)) ([ccdf81f](https://github.com/Tresjs/cientos/commit/ccdf81f89805e7b4d546592e2a188d704449439e))


### Bug Fixes

* **cientos:** controls props priority ([a9e47fc](https://github.com/Tresjs/cientos/commit/a9e47fc17c5507d1f0c37cfa05c9e7c1d57b4d95))
* dead link ([f784021](https://github.com/Tresjs/cientos/commit/f784021d949bac5cac8dad90e572ea7794c6bb29))
* set `@tresjs/core` as peer ([#211](https://github.com/Tresjs/cientos/issues/211)) ([9636ec9](https://github.com/Tresjs/cientos/commit/9636ec976fa2414f78f69f7e970dd50a7222c384))

## [3.3.0-next.0](https://github.com/Tresjs/cientos/compare/3.2.1...3.3.0-next.0) (2023-09-11)


### Features

* 158 stats ([#166](https://github.com/Tresjs/cientos/issues/166)) ([4a71885](https://github.com/Tresjs/cientos/commit/4a71885dc585a6a8ee733239fe73453157eca85c))
* add distance prop in camera controls ([388b5de](https://github.com/Tresjs/cientos/commit/388b5de4a7819fe9ef4c09ff9828a102661893dd))
* SVG ([28e3b6a](https://github.com/Tresjs/cientos/commit/28e3b6a4a47bfe2db16ed61214ea6d4cbddcb0c3))
* **SVG:** add depth demo ([ba1fd18](https://github.com/Tresjs/cientos/commit/ba1fd18ff18d52b4eec4d93d70ffd19c058055a6))
* **SVG:** add depth options ([e453a1d](https://github.com/Tresjs/cientos/commit/e453a1dad3a67a7bf612294a016a7c2cced851c7))
* **SVG:** add docs ([b176dc4](https://github.com/Tresjs/cientos/commit/b176dc4fb782b151ba2f2acb9b3b1434db897ba2))
* **SVG:** change 'depth' default to 'renderOrder' ([5c1dd27](https://github.com/Tresjs/cientos/commit/5c1dd2731c2974b5e3aaaa088393f25c3edb742a))
* **SVG:** dispose of geometries ([a75d571](https://github.com/Tresjs/cientos/commit/a75d57189697405dbe2ebc6a67746fd2de4065f2))
* **SVG:** fix linter warnings ([80dbaab](https://github.com/Tresjs/cientos/commit/80dbaabdbd27daa4145dbbd9bb75635c8ac9f0bf))
* **SVG:** fix type error ([4439aa1](https://github.com/Tresjs/cientos/commit/4439aa10bdc8ef4e3b3d7a353a627fcf40cedf82))
* **SVG:** remove depth prop demo ([ca82737](https://github.com/Tresjs/cientos/commit/ca82737f3a82de6a7bfbb56ae708b694ac6fa873))
* **SVG:** remove depth prop from demo ([87ceb34](https://github.com/Tresjs/cientos/commit/87ceb34a368680119843287ac824ca43d51f0bd8))
* **SVG:** remove key ([01061a9](https://github.com/Tresjs/cientos/commit/01061a9b3e9ffc356ee20c1948c10197aa3f085e))
* **SVG:** remove unused variable ([c85a96f](https://github.com/Tresjs/cientos/commit/c85a96fa227ec71d063365f18f1820a4679d9fee))
* **SVG:** rename exposed ref ([95bada9](https://github.com/Tresjs/cientos/commit/95bada9d80893fcd0c29cbc300b6ca82c366831d))
* **SVG:** split line for linter ([469273a](https://github.com/Tresjs/cientos/commit/469273acbe61ecc5b3aee611f5b0cc0945b99b1b))
* **SVG:** update JSDoc ([8c0aaf6](https://github.com/Tresjs/cientos/commit/8c0aaf6dc87396b3ac07bc251e78bfdc64a6d548))
* **SVG:** update props, depth in docs ([da85374](https://github.com/Tresjs/cientos/commit/da853745a0c3949f5c3f08c92f360206ee688763))
* **SVG:** whitespace ([d83493b](https://github.com/Tresjs/cientos/commit/d83493b76f0e37910ebdd012483649ef39e23c39))
* update lint rules, ([#196](https://github.com/Tresjs/cientos/issues/196)) ([ccdf81f](https://github.com/Tresjs/cientos/commit/ccdf81f89805e7b4d546592e2a188d704449439e))


### Bug Fixes

* **cientos:** controls props priority ([a9e47fc](https://github.com/Tresjs/cientos/commit/a9e47fc17c5507d1f0c37cfa05c9e7c1d57b4d95))
* dead link ([f784021](https://github.com/Tresjs/cientos/commit/f784021d949bac5cac8dad90e572ea7794c6bb29))
* set `@tresjs/core` as peer ([77f7a3c](https://github.com/Tresjs/cientos/commit/77f7a3ca39dd1c433db5e64afa73076943baea15))

## [3.2.1](https://github.com/Tresjs/cientos/compare/3.2.0...3.2.1) (2023-09-01)


### Bug Fixes

* **deps:** update dependency @tresjs/core to v3.1.1 ([#186](https://github.com/Tresjs/cientos/issues/186)) ([0f5d9cf](https://github.com/Tresjs/cientos/commit/0f5d9cf2b4b00f9762a1de6df617b6b63cda7f75))
* removed `toFixed` for progress value ([#191](https://github.com/Tresjs/cientos/issues/191)) ([d46f90f](https://github.com/Tresjs/cientos/commit/d46f90f6e11c66f2fdf570340d91f63996bc94b1))

## [3.2.0](https://github.com/Tresjs/cientos/compare/3.1.0...3.2.0) (2023-08-25)


### Features

* 107 use video texture ([#167](https://github.com/Tresjs/cientos/issues/167)) ([f0f1f9b](https://github.com/Tresjs/cientos/commit/f0f1f9bc6107c2d040195ca76f647ef6dcbeb2d3))
* add glass material ([#172](https://github.com/Tresjs/cientos/issues/172)) ([5f60864](https://github.com/Tresjs/cientos/commit/5f608640ccd4eaa14357101a3784eeeac3592646))


### Bug Fixes

* 179 tweakpane plugin essentials ([#180](https://github.com/Tresjs/cientos/issues/180)) ([67b8d57](https://github.com/Tresjs/cientos/commit/67b8d57bbfdbdcd01e7a24f470934acafa6ae300))

## [3.2.0-next.0](https://github.com/Tresjs/cientos/compare/3.1.0...3.2.0-next.0) (2023-08-23)


### Features

* 107 use video texture ([#167](https://github.com/Tresjs/cientos/issues/167)) ([f0f1f9b](https://github.com/Tresjs/cientos/commit/f0f1f9bc6107c2d040195ca76f647ef6dcbeb2d3))


### Bug Fixes

* remove tweakpane essentials import ([eeed334](https://github.com/Tresjs/cientos/commit/eeed334398374089d17b3ebf34bfc7b5f963372b))

## [3.1.0](https://github.com/Tresjs/cientos/compare/3.0.1...3.1.0) (2023-08-17)


### Features

* add camera controls to new context ([21ab955](https://github.com/Tresjs/cientos/commit/21ab955b9e8560d513a1804387e6bac707245a38))
* chg to event, rmv vmodel, ([9b739a2](https://github.com/Tresjs/cientos/commit/9b739a23ef860ba8f3fe8120beaba76fc794fade))
* remove tweakpane deps from final bundle ([#169](https://github.com/Tresjs/cientos/issues/169)) ([b99ac3c](https://github.com/Tresjs/cientos/commit/b99ac3cdc957d3fb1cd8257d03cde316ab22b573))


### Bug Fixes

* useGLTF return types ([#174](https://github.com/Tresjs/cientos/issues/174)) ([7f78106](https://github.com/Tresjs/cientos/commit/7f781069ca7d04986790ff644e8b3c8b62446a20))

## [3.0.1](https://github.com/Tresjs/cientos/compare/3.0.0...3.0.1) (2023-07-29)


### Bug Fixes

* removed axesHelper from Contact Shadows ([#152](https://github.com/Tresjs/cientos/issues/152)) ([821205a](https://github.com/Tresjs/cientos/commit/821205ad3780a28b18554de9f1f544c884287181))

## [3.0.0](https://github.com/Tresjs/cientos/compare/2.3.0...3.0.0) (2023-07-29)


### ⚠ BREAKING CHANGES

* core v3 provides a new state context `useTresContext` which impacts all the abstractions depending on the state

* chore: move core to deps

* chore: updated lock

* chore: fix lint

* feat: removed useCientos and useTresContext instead

### Features

* 120 refactor usecientos to new state context provider ([#143](https://github.com/Tresjs/cientos/issues/143)) ([723a323](https://github.com/Tresjs/cientos/commit/723a3231da239a1214d0ffdfb3b6a6e7cb62eedc))
* add more camera-controls playground examples ([d3c5dd3](https://github.com/Tresjs/cientos/commit/d3c5dd3ceefe3d816abd268f4b1a994d024f0d37))
* add preliminary camera-controls abstraction ([bef41b9](https://github.com/Tresjs/cientos/commit/bef41b9f0ef6508ecd56735cd5e2d6fb205e114a))
* backdrop stage abstraction ([#116](https://github.com/Tresjs/cientos/issues/116)) ([62f677c](https://github.com/Tresjs/cientos/commit/62f677c881dfc7b0386a79f9d5b0c162596c2838))


### Bug Fixes

* add reactivity to stars component, rmv factor as props unnecessary ([#144](https://github.com/Tresjs/cientos/issues/144)) ([ad5c6c8](https://github.com/Tresjs/cientos/commit/ad5c6c8572f2ac472063886fde48c63f81b667dc))
* background not checked right useEnvironment ([#138](https://github.com/Tresjs/cientos/issues/138)) ([28d40fd](https://github.com/Tresjs/cientos/commit/28d40fde9a690cb44943c875799e48f3c17d5eb4))
* map correct camera-controls events ([e7095eb](https://github.com/Tresjs/cientos/commit/e7095ebe958e690de0a8aba37a55679f6a321e10))
* MouseParallax, clean code ([#134](https://github.com/Tresjs/cientos/issues/134)) ([257238a](https://github.com/Tresjs/cientos/commit/257238aa38bc921983dc4ae37ac4891becfb5113))
* nuxt problem with scrollControls ([#130](https://github.com/Tresjs/cientos/issues/130)) ([1739965](https://github.com/Tresjs/cientos/commit/1739965dbbd3e7aef9921a91c6ffbfe5502074aa))

## [2.3.0](https://github.com/Tresjs/cientos/compare/2.2.0...2.3.0) (2023-07-11)


### Features

* scroll-controls ([#118](https://github.com/Tresjs/cientos/issues/118)) ([293fcdc](https://github.com/Tresjs/cientos/commit/293fcdc2365c27a3565626d148d465ed52d0ef55))


### Bug Fixes

* initial camera position in keyboard controls ([#119](https://github.com/Tresjs/cientos/issues/119)) ([e4a03a6](https://github.com/Tresjs/cientos/commit/e4a03a6d7484c0c626142e79f3cc4dd9a43fdb25))
* remove deconstructive props ([#124](https://github.com/Tresjs/cientos/issues/124)) ([d83d00d](https://github.com/Tresjs/cientos/commit/d83d00d089467807fd1f5bdb42a4df761dc44237))

## [2.2.0](https://github.com/Tresjs/cientos/compare/2.1.4...2.2.0) (2023-06-29)


### Features

* keyboard controls ([#68](https://github.com/Tresjs/cientos/issues/68)) ([1b7a624](https://github.com/Tresjs/cientos/commit/1b7a624159db5370c89c9f0fd1f99ed3c6cc6d8a))
* useProgress composable ([b6f3f33](https://github.com/Tresjs/cientos/commit/b6f3f333caa31234a10c89ad0b5edb61410c2a47))


### Bug Fixes

* add playground to examples ([#104](https://github.com/Tresjs/cientos/issues/104)) ([ce442a4](https://github.com/Tresjs/cientos/commit/ce442a44e44d69142f6a0d57c16692a84cf8c915))
* added default for touches prop ([#100](https://github.com/Tresjs/cientos/issues/100)) ([#111](https://github.com/Tresjs/cientos/issues/111)) ([de6ebab](https://github.com/Tresjs/cientos/commit/de6ebab31c833f0ed4676e531a17572c46478177))
* **deps:** update dependency @tresjs/core to v2.3.0 ([599f36b](https://github.com/Tresjs/cientos/commit/599f36b0df72a315f45aa485a78256cfce75c329))
* styles in dark theme, same as in the core ([#105](https://github.com/Tresjs/cientos/issues/105)) ([1a8d0a5](https://github.com/Tresjs/cientos/commit/1a8d0a5b4cb083581c9adfd5dc687f79befc6f8b))
* useProgress correct export from loaders ([af33533](https://github.com/Tresjs/cientos/commit/af335337569eaa5bb33bbc91298dd5482e354423))

### [2.1.4](https://github.com/Tresjs/cientos/compare/2.1.2...2.1.4) (2023-06-14)


### Bug Fixes

* chg log linter rule to warn ([18eeb72](https://github.com/Tresjs/cientos/commit/18eeb72771339ad0c7e6c5d41ceb47caf392ca28))
* fix types in precipitation, stars. rmv log rule linter ([1c15ecb](https://github.com/Tresjs/cientos/commit/1c15ecbe12250d5c1f2f3ef0a347eb8947c77413))
* precipitation-area issue, rmv log mouseparallax, add rule lint ([994efaa](https://github.com/Tresjs/cientos/commit/994efaa3785d3ab02e27f31a2485c37d9f82727f))
* return control value on event emitters ([d072223](https://github.com/Tresjs/cientos/commit/d072223afd055c5e00fa7f608c0a2f1a850b699f))

### [2.1.2](https://github.com/Tresjs/cientos/compare/2.1.1...2.1.2) (2023-05-26)


### Bug Fixes

* fix lint on the demo ([8873e41](https://github.com/Tresjs/cientos/commit/8873e411cbe742532f1a88157f5d41f59253b220))
* refactor transform controls with deconstructor ([8e7f673](https://github.com/Tresjs/cientos/commit/8e7f673f20016148749f3b14af0940a303d27b38))

### [2.1.1](https://github.com/Tresjs/cientos/compare/2.1.0...2.1.1) (2023-05-24)


### Bug Fixes

* contact shadows helper as prop ([f7054d0](https://github.com/Tresjs/cientos/commit/f7054d0d471ad3636841ee625801eaf5950a1225))

## [2.1.0](https://github.com/Tresjs/cientos/compare/2.0.0...2.1.0) (2023-05-24)


### Features

* add events to orbit controls ([6815d12](https://github.com/Tresjs/cientos/commit/6815d126731005d777bb451ba478009407388f5f))
* add Rain component ([7dca86d](https://github.com/Tresjs/cientos/commit/7dca86d11e796fa04da51a9a415fa971880379e6))
* contact shadows is alive and reactive ([188cf8c](https://github.com/Tresjs/cientos/commit/188cf8c4431c857bd8d9c562b36c4dd5816af25e))
* contact-shadows implementation ([81baf86](https://github.com/Tresjs/cientos/commit/81baf8618de9d8dc1e25d0fc9c40671f4255ffbf))
* deconstruct those Props ([ccd0581](https://github.com/Tresjs/cientos/commit/ccd058170b9c83032f616046d36df030df4bb001))
* enhanced orbit-controls ([27f2e88](https://github.com/Tresjs/cientos/commit/27f2e886e8f39a308ce5cc12c9025c155c560b22))
* temporally tweak eslint for deconstructed props ([8803e8f](https://github.com/Tresjs/cientos/commit/8803e8faa74d8dfa5d6df0af661a9d7359c2a913))
* update parallax mouse abstraction ([88885a3](https://github.com/Tresjs/cientos/commit/88885a3a815dfc1b13b2eb7cbec136078f81d48c))
* update to core v2.1.0 and fix types ([f099387](https://github.com/Tresjs/cientos/commit/f099387ff16511632b0fcfc6afac3f774f25f144))


### Bug Fixes

* added missing prop target and removed withDefaults ([43ddf6b](https://github.com/Tresjs/cientos/commit/43ddf6b7c4028fc0184f153070d67f2adee76fb8))
* change smoke texture encoding for colorSpace ([2338803](https://github.com/Tresjs/cientos/commit/23388035bb7b94f3321c1850c5410f59d8ba4d27))
* core types ([266088b](https://github.com/Tresjs/cientos/commit/266088b2a8e29d06e6dbdcc3b4fe40b12b8c8397))
* event headline h2 ([c506769](https://github.com/Tresjs/cientos/commit/c50676956fd98a6b5750a63c0cbbda8b658ba8e3))
* remove import leftovers ([fef7e86](https://github.com/Tresjs/cientos/commit/fef7e861647314845f619213c53608e9e8d505d4))
* templateRef  name casing ([8844612](https://github.com/Tresjs/cientos/commit/8844612e804f87536963d82302ba0858fad48b2b))

## [2.0.0](https://github.com/Tresjs/cientos/compare/2.0.0-rc.3...2.0.0) (2023-05-12)

## [2.0.0-rc.3](https://github.com/Tresjs/cientos/compare/2.0.0-rc.1...2.0.0-rc.3) (2023-05-08)


### Bug Fixes

* fbxModel inherit props ([b15935e](https://github.com/Tresjs/cientos/commit/b15935e6a9d680b7e7159f8057493b7c1befb62f))
* gltfModel inherit props ([a80506e](https://github.com/Tresjs/cientos/commit/a80506e6ce41e98df588e31b0e3f8d08e130cb01))

## [2.0.0-rc.1](https://github.com/Tresjs/cientos/compare/2.0.0-rc.0...2.0.0-rc.1) (2023-05-03)


================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Code of Conduct

## Our Pledge

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.

## Our Standards

Examples of behavior that contributes to creating a positive environment include:

- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others’ private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting

## Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.

## Scope

This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [TresJS Discord](https://discord.gg/UCr96AQmWn). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project’s leadership.

## Attribution

This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html


================================================
FILE: CONTRIBUTING.md
================================================
![repository-banner.png](https://res.cloudinary.com/alvarosaburido/image/upload/v1683452574/repo-banner_d2xeem.png)

# Tres Contributing Guide

Hi there!! If you are reading this guide, you are probably interested in contributing to Tres. You're awesome 🤩.

No contribution is too small, whether it is a typo in the docs, a bug report or refactoring a piece of code, every contribution is welcome, just make sure to follow the guidelines below ✌️.

Thanks from the heart 💚 for taking the time to help out. This guide will help you to get started with the project.

## Ecosystem
- [@tresjs/core](https://github.com/Tresjs/tres) - The core package.
- [@tresjs/cientos](https://github.com/Tresjs/cientos) - The abstractions package.
- [@tresjs/postprocessing](https://github.com/Tresjs/post-processing) - The post-processing package.

## Setup

All the packages in the ecosystem use [pnpm workspaces](https://pnpm.io/workspaces). PnPM is a package manager that is faster than npm and yarn. It also uses symlinks to avoid code duplication.

The `workspace` has the following structure:

```
.
├── docs // The documentation
├── playground // The playground to test the package
├── src // The source code

```

Make sure you are using [Node.js](https://nodejs.org/en/) version 14 or higher.

You can install pnpm using npm:

```bash
npm install -g pnpm
```

or using homebrew:

If you have the package manager installed, you can install pnpm using the following command:

```
brew install pnpm
```

## Development

To start developing, you can run `pnpm playground` in the root folder.

This will start the dev server for the playground at `http://localhost:5173/` where you can test the changes you are making in the `src` folder.

> **Important**
> There is no need to run anything in the `src` folder or in the root, the `playground` will take care of it

Whenever you are working on a new feature or fixing a bug, make sure to add a demo under `playground/src/pages` and create a route in the `playground/src/router.ts` to test the changes you are making.

> **Warning**
> Make sure to check if there is already a demo for the feature you are working on. If so, feel free to add your changes to the existing demo.

### Docs

The docs are built using [vitepress](https://vitepress.vuejs.org/).

You can run `pnpm docs:dev` to start the dev server for the documentation. All the docs are located in the `docs` folder in markdown.

If you are adding a new page, make sure to add it to the `docs/.vitepress/config.ts` file following the sidebar structure.

### Testing

Currently there are no tests in place, but we are working on it. If you want to contribute with tests, please open an issue first to discuss the best approach.

## Pull Requests

Before opening a pull request, make sure to run `pnpm lint` to make sure the code is following the code style.

- Checkout a topic branch from the base branch `main` branch and merge back against that branch.
- Please follow the [commit message conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) when committing your changes. This is important because the release notes will be automatically generated from these messages. Small scoped commits are always preferred, as it is easier to review them.
- If adding new feature:
  - Provide convincing reason to add this feature. Ideally you should open a suggestion issue first and have it greenlighted before working on it. We would reject feature PRs that are not first opened as suggestions except for trivial changes.
  - Create a `feature/{issue-number}-add-test-to-cientos` branch for this feature. Make the name meaningful.
  - PR title must start with `feat(pkg): Descriptive title`. For example: `feat(cientos): added unit test to composables`.
- If fixing a bug 🐛:

  - Provide detailed description of the bug in the PR. Live demo preferred.
  - Create a `fix/{issue-number}-fix-test-in-core` branch for this bug fix.
  - If you are resolving a special issue, add `(fix #xxx[,#xxx])` (#xxx is the issue id) in your PR title for a better release log, e.g. `update entities encoding/decoding (fix #3899)`.

## Third Party Libraries

Adding a new third party library is generally discouraged, unless it is absolutely necessary. If you want to add a new library, please open an issue first to discuss the best approach.


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2022-present, (alvarosabu) Alvaro Saburido and Tres contributors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# ⚠️ This repository has been archived

This package has been moved to the TresJS monorepo.

## New Location

👉 **[github.com/Tresjs/tres](https://github.com/Tresjs/tres)**

All future development, issues, and pull requests should be directed to the monorepo.

## Installation

The package is still available on npm with the same name. Installation instructions remain the same:

```bash
pnpm add @tresjs/cientos
```

## Documentation

📚 Visit [docs.tresjs.org](https://docs.tresjs.org) for the latest documentation.


================================================
FILE: core.d.ts
================================================
export * from './dist/core/index.js'


================================================
FILE: docs/.eslintrc.json
================================================
{
  "extends": "@tresjs/eslint-config-vue"
}


================================================
FILE: docs/.vitepress/config.ts
================================================
import { defineConfig } from 'vitepress'
import { resolve } from 'pathe'

import components from '../component-list/components'

const whitelist = ['TresCanvas', 'TresLeches', 'TresScene']

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: 'Cientos',
  description:
    'Collection of useful helpers and fully functional, ready-made abstractions for TresJS',
  head: [
    ['link', { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }],
    ['meta', { name: 'theme-color', content: '#82DBC5' }],
    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
    ['meta', { name: 'twitter:site', content: '@tresjs_dev' }],
    ['meta', { name: 'twitter:creator', content: '@tresjs_dev' }],
    ['meta', { property: 'og:type', content: 'website' }],
    ['meta', { property: 'og:site_name', content: 'Cientos - TresJS' }],
    [
      'meta',
      {
        property: 'og:image',
        content:
          'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
      },
    ],
    [
      'meta',
      {
        property: 'twitter:image',
        content:
          'https://repository-images.githubusercontent.com/571314349/10996566-7f70-473b-a8e5-4e56fc0ca850',
      },
    ],
    [
      'script',
      {
        'defer': 'true',
        'data-site': 'OWBUVCJK',
        'src': 'https://cdn.usefathom.com/script.js',
      },
    ],
  ],
  themeConfig: {
    logo: '/logo.svg',
    search: {
      provider: 'local',
    },
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: 'Guide', link: '/guide/' },
      { text: 'Components', link: '/component-list/' },
      { text: 'Examples', link: 'https://lab.tresjs.org/' },
    ],

    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/guide/' },
          { text: 'Migration from v3', link: '/guide/migrating-from-v3' },
        ],
      },
      ...components,

    ],

    socialLinks: [
      { icon: 'github', link: 'https://github.com/tresjs/cientos' },
      { icon: 'twitter', link: 'https://twitter.com/tresjs_dev' },
      { icon: 'discord', link: 'https://discord.gg/UCr96AQmWn' },
    ],
  },
  vite: {
    optimizeDeps: {
      exclude: ['vitepress'],
      include: ['three'],
    },
    server: {
      hmr: {
        overlay: false,
      },
    },
    resolve: {
      alias: {
        '@tresjs/cientos': resolve(__dirname, '../../dist/trescientos.js'),
      },
      dedupe: ['three'],
    },
  },
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag: string) =>
          (tag.startsWith('Tres') && !whitelist.includes(tag))
          || tag === 'primitive',
      },
    },
  },
})


================================================
FILE: docs/.vitepress/theme/TresLayout.vue
================================================
<script setup>
import Theme from 'vitepress/theme'
import LoveVueThreeJS from './components/LoveVueThreeJS.vue'

const { Layout } = Theme
</script>

<template>
  <Layout>
    <template #home-hero-image>
      <LoveVueThreeJS />
    </template>
  </Layout>
</template>


================================================
FILE: docs/.vitepress/theme/components/AccumulativeShadowsDemo.vue
================================================
<script setup lang="ts">
import { AccumulativeShadows, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#fbb03b" :shadows="true">
    <OrbitControls />
    <TresMesh :position-y="0.3" :scale="0.4" :cast-shadow="true">
      <TresTorusKnotGeometry />
      <TresMeshNormalMaterial />
    </TresMesh>
    <AccumulativeShadows
      :blend="100"
      color="#fbb03b"
      once
      :position-y="-0.4"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/AlignDemo.vue
================================================
<script setup lang="ts">
import { Align, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#222">
    <TresPerspectiveCamera />
    <OrbitControls />

    <TresAxesHelper :scale="2" />

    <Align top right back>
      <TresMesh>
        <TresBoxGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </Align>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/AnimatedSpriteCenterDemo.vue
================================================
<script setup lang="ts">
import { AnimatedSprite, Box, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import type { AtlasData } from '../../../../src/core/abstractions/AnimatedSprite/Atlas'
import '@tresjs/leches/styles'

const { centerX, centerY, fps, asSprite } = useControls({
  centerX: { value: 0.5, min: 0, max: 1, step: 0.1 },
  centerY: { value: 0.5, min: 0, max: 1, step: 0.1 },
  fps: { value: 5, min: 0, max: 30, step: 1 },
  asSprite: true,
})

const centerDemoAtlas: AtlasData = { frames: [] }
const centerDemoImgData = (() => {
  const NUM_ROWS_COLS = 64
  const rects: { x: number, y: number, w: number, h: number }[] = []
  let h = 0
  for (let r = 0; r < NUM_ROWS_COLS; r += h) {
    let w = 0
    h++
    if (r + h >= NUM_ROWS_COLS) {
      continue
    }
    for (let c = 0; c < NUM_ROWS_COLS; c += w) {
      w++
      if (c + w >= NUM_ROWS_COLS) {
        continue
      }
      rects.push({ x: c, y: r, w, h })
    }
  }

  const canvas = document.createElement('canvas')
  const IMG_SIZE = 2048
  const COL_SIZE = IMG_SIZE / NUM_ROWS_COLS
  const ROW_SIZE = IMG_SIZE / NUM_ROWS_COLS
  canvas.width = IMG_SIZE
  canvas.height = IMG_SIZE
  document.body.append(canvas)
  const ctx = canvas.getContext('2d')!
  const EDGE_center_SIZE = 6
  rects.forEach((rect, i) => {
    const frame = { x: rect.x * COL_SIZE, y: rect.y * ROW_SIZE, w: rect.w * COL_SIZE, h: rect.h * ROW_SIZE }
    const { x, y, w, h } = frame
    centerDemoAtlas.frames.push({ filename: `rect_${i.toString().padStart(4, '0')}`, frame })
    ctx.fillStyle = '#222'
    ctx.fillRect(x, y, w, h)

    ctx.fillStyle = '#999'
    ctx.fillRect(
      x + w * 0.5 - EDGE_center_SIZE * 0.5,
      y + h * 0.5 - EDGE_center_SIZE * 0.5,
      EDGE_center_SIZE,
      EDGE_center_SIZE,
    )

    ctx.fillRect(x, y, EDGE_center_SIZE, EDGE_center_SIZE)
    ctx.fillRect(x + w * 0.5 - EDGE_center_SIZE * 0.5, y, EDGE_center_SIZE, EDGE_center_SIZE)
    ctx.fillRect(x + w - EDGE_center_SIZE, y, EDGE_center_SIZE, EDGE_center_SIZE)

    ctx.fillRect(x, y + h * 0.5 - EDGE_center_SIZE * 0.5, EDGE_center_SIZE, EDGE_center_SIZE)
    ctx.fillRect(x + w - EDGE_center_SIZE, y + h * 0.5 - EDGE_center_SIZE * 0.5, EDGE_center_SIZE, EDGE_center_SIZE)

    ctx.fillRect(x, y + h - EDGE_center_SIZE, EDGE_center_SIZE, EDGE_center_SIZE)
    ctx.fillRect(x + w * 0.5 - EDGE_center_SIZE * 0.5, y + h - EDGE_center_SIZE, EDGE_center_SIZE, EDGE_center_SIZE)
    ctx.fillRect(x + w - EDGE_center_SIZE, y + h - EDGE_center_SIZE, EDGE_center_SIZE, EDGE_center_SIZE)
  })
  const imgData = canvas.toDataURL()
  canvas.parentElement?.removeChild(canvas)
  return imgData
})()
</script>

<template>
  <TresLeches style="position:absolute; left:10px; top:10px;" />
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera
      :position="[5, 1, 5]"
      :look-at="[-2, 0, 0]"
    />
    <OrbitControls />
    <TresGroup :position-x="2">
      <Suspense>
        <AnimatedSprite
          :image="centerDemoImgData"
          :atlas="centerDemoAtlas"
          animation="rect"
          :center="[centerX.value, centerY.value]"
          :fps="fps.value"
          :as-sprite="asSprite.value"
        >
          <TresGroup :scale="0.5">
            <Box
              :scale="[1, 0.06, 0.06]"
              color="red"
            />
            <Box
              :scale="[0.06, 1, 0.06]"
              color="blue"
            />
            <Box
              :scale="[0.06, 0.06, 1]"
              color="green"
            />
          </TresGroup>
        </AnimatedSprite>
      </Suspense>
      <TresGridHelper :args="[10, 10]" />
    </TresGroup>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/AnimatedSpriteDefinitionsDemo.vue
================================================
<script setup lang="ts">
import { AnimatedSprite } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

const ASSETS_URL = 'https://raw.githubusercontent.com/Tresjs/'
  + 'assets/main/textures/animated-sprite/'
</script>

<template>
  <TresCanvas clear-color="#666">
    <TresPerspectiveCamera :position="[0, 0, 15]" />
    <Suspense>
      <AnimatedSprite
        :image="`${ASSETS_URL}cientosTexture.png`"
        :atlas="`${ASSETS_URL}cientosAtlas.json`"
        animation="cientosIdle"
        :definitions="{
          cientosIdle: '0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)',
        }"
        :fps="15"
        :loop="true"
      />
    </Suspense>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/AnimatedSpriteDemo.vue
================================================
<script setup lang="ts">
import { AnimatedSprite } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

const ASSETS_URL = 'https://raw.githubusercontent.com/Tresjs/'
  + 'assets/main/textures/animated-sprite/'
</script>

<template>
  <TresCanvas clear-color="#FBB03B">
    <TresPerspectiveCamera :position="[0, 0, 15]" />
    <Suspense>
      <AnimatedSprite
        :image="`${ASSETS_URL}cientosTexture.png`"
        :atlas="`${ASSETS_URL}cientosAtlas.json`"
        animation="cientosIdle"
        :fps="15"
        :loop="true"
      />
    </Suspense>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/AnimatedSpriteNamedAnimationDemo.vue
================================================
<script setup lang="ts">
import { AnimatedSprite } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { ref } from 'vue'

const ASSETS_URL = 'https://raw.githubusercontent.com/Tresjs/'
  + 'assets/main/textures/animated-sprite/'

const animations = ref(
  ['cientosIdle', 'cientosIdleToWalkTransition', 'cientosWalk'],
)
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[0, 0, 15]" />
    <Suspense>
      <AnimatedSprite
        :image="`${ASSETS_URL}cientosTexture.png`"
        :atlas="`${ASSETS_URL}cientosAtlas.json`"
        :animation="animations[0]"
        :fps="15"
        :loop="true"
        @click="() => { animations.push(animations.shift() as string) }"
      />
    </Suspense>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/BackdropDemo.vue
================================================
<script setup lang="ts">
import { Backdrop, GLTFModel, useProgress } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import type { Camera } from 'three'
import { PCFSoftShadowMap, SRGBColorSpace } from 'three'
import { ref, watchEffect } from 'vue'

const gl = {
  clearColor: 'pink',
  shadows: true,
  alpha: false,
  shadowMapType: PCFSoftShadowMap,
  outputColorSpace: SRGBColorSpace,
}

const cameraRef = ref(null)

watchEffect(() => {
  if (cameraRef.value) {
    (cameraRef.value as Camera).lookAt(0, 5, 0)
  }
})

const { hasFinishLoading, progress } = await useProgress()
</script>

<template>
  <div class="aspect-video w-full relative">
    <Transition
      name="fade-overlay"
      enter-active-class="opacity-1 transition-opacity duration-200"
      leave-active-class="opacity-0 transition-opacity duration-200"
    >
      <div
        v-show="!hasFinishLoading"
        class="absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
      >
        <div class="w-200px">
          Loading... {{ progress }} %
        </div>
      </div>
    </Transition>
    <TresCanvas v-bind="gl">
      <TresPerspectiveCamera
        :position="[0.07224002153117198, 0.5245876539770153, 2.9469498522622626]"
        :rotation="[-0.04419077275543715, 0.025561987075415186, 0.0011302162688196786]"
        :fov="35"
      />
      <Suspense>
        <GLTFModel
          path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb"
          :rotation="[0, 0.5, 0]"
          :position="[0, 0.4, 0]"
          :scale="0.5"
        />
      </Suspense>
      <Backdrop
        :floor="1.5"
        :scale="[10, 3, 3]"
        :position="[0, 0, -3]"
        receive-shadow
      >
        <TresMeshPhysicalMaterial
          :roughness="1"
          color="pink"
          :side="2"
        />
      </Backdrop>
      <TresAmbientLight :intensity="0.5" />
      <TresDirectionalLight
        :args="['white', 2]"
        cast-shadow
        :position="[3, 4, 4]"
        :look-at="[0, 0, 0]"
        :shadow-camera-near="0.5"
        :shadow-camera-left="-10"
      />
      <TresDirectionalLight
        :args="['pink', 1]"
        cast-shadow
        :position="[-3, 2, 4]"
        :look-at="[0, 0, 0]"
        :shadow-camera-near="0.5"
        :shadow-camera-left="-10"
      />
    </TresCanvas>
  </div>
</template>


================================================
FILE: docs/.vitepress/theme/components/BakeShadowsDemo.vue
================================================
<script setup lang="ts">
import { BakeShadows } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { shallowRef } from 'vue'

const cubeRef = shallowRef()

function onLoop({ elapsed }: { elapsed: number }) {
  if (cubeRef.value) {
    cubeRef.value.rotation.y = elapsed * 0.5
    cubeRef.value.rotation.x = elapsed * 0.5
  }
}
</script>

<template>
  <TresCanvas
    clear-color="#82DBC5"
    shadows
    @loop="onLoop"
  >
    <TresPerspectiveCamera
      :position="[0, 2, 5]"
      :look-at="[0, 0, 0]"
    />
    <BakeShadows />
    <TresMesh
      ref="cubeRef"
      cast-shadow
    >
      <TresBoxGeometry />
      <TresMeshStandardMaterial :color="0x00FF00" />
    </TresMesh>
    <TresMesh
      receive-shadow
      :position="[0, -2, 0]"
      :rotation-x="-Math.PI / 2"
    >
      <TresPlaneGeometry :args="[5, 5]" />
      <TresMeshStandardMaterial :color="0xF7F7F7" />
    </TresMesh>
    <TresDirectionalLight
      cast-shadow
      :position="[0, 10, 0]"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/BillboardDemo.vue
================================================
<script setup lang="ts">
import { Billboard, Box, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { Vector3 } from 'three'

const COUNT = 5 * 5
const positions = Array.from({ length: COUNT }).fill(0).map((_, i) => {
  return new Vector3(
    i % 5 - 2,
    Math.floor(i / 5) - 2,
    0,
  )
})
</script>

<template>
  <TresCanvas clear-color="#333333">
    <OrbitControls />
    <TresPerspectiveCamera :position="[0, 0, 10]" />
    <Billboard v-for="position, i of positions" :key="i" :position="position">
      <Box :scale="[0.5, 0.5, 0.001]">
        <TresMeshNormalMaterial />
      </Box>
    </Billboard>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/BoundsDemo.vue
================================================
<script setup lang="ts">
import { Bounds, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { Vector3 } from 'three'
import { shallowRef } from 'vue'

const { sin, cos, PI } = Math
const positions = Array.from(
  { length: 8 },
  (_, i) => new Vector3(cos(i * PI / 4) * 4, sin(i * PI / 4) * 4, 0),
)

const b = shallowRef()
</script>

<template>
  <TresCanvas clear-color="#4f4f4f">
    <TresPerspectiveCamera :position="[0, 0, -15]" />
    <OrbitControls make-default />
    <Bounds ref="b" clip use-mounted :offset="0.75">
      <TresMesh
        v-for="p, i of positions"
        :key="i"
        :position="p"
        @click="(e) => b.instance.lookAt(e.object)"
      >
        <TresBoxGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </Bounds>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/CameraControlsDemo.vue
================================================
<script setup lang="ts">
import { Box, CameraControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { reactive } from 'vue'

const controlsState = reactive({
  minDistance: 0,
  maxDistance: 100,
})
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[5, 5, 5]" />
    <CameraControls
      v-bind="controlsState"
      make-default
    />
    <TresGridHelper :position="[0, -1, 0]" />
    <Box :scale="2">
      <TresMeshToonMaterial color="orange" />
    </Box>
    <TresAmbientLight />
    <TresDirectionalLight :position="[0, 2, 4]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/CatmullRomCurve3Demo.vue
================================================
<script setup lang="ts">
import { CatmullRomCurve3, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#4f4f4f">
    <CatmullRomCurve3
      :points="[[-1.5, 0, 0], [-0.5, 1, 0], [0.5, 0, 0], [1.5, 1, 0]]"
      :segments="40"
      :line-width="10"
      color="#fbb03b"
    />
    <TresGridHelper />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/CientosComponentListGridView/index.vue
================================================
<script setup lang="ts">
import componentList, { icons } from '../../../../component-list/components'
</script>

<template>
  <div class="grid md-grid-cols-3 sm-grid-cols-2">
    <template v-for="c, i of componentList" :key="i">
      <div>
        <h3 class="text-sm">
          <div
            v-if="c.text.toLowerCase() in icons"
            class="inline-block text-2xl p-1 p-x-2 m-r-1 m-b-5 text-2xl bg-zinc-500/10 rounded"
          >
            {{ icons[c.text.toLowerCase()] }}
          </div>
          {{ c.text }}
        </h3>
        <div v-for="item, ii of c.items" :key="ii" class="m-b-2">
          <a :href="item.link"><span class="text-sm font-medium">{{ item.text }}</span></a>
        </div>
      </div>
    </template>
  </div>
</template>


================================================
FILE: docs/.vitepress/theme/components/CircleShadowDemo.vue
================================================
<script setup lang="ts">
import { CircleShadow, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera />
    <OrbitControls />
    <TresGroup :position-y="-0.5">
      <TresMesh :position-y="1">
        <TresBoxGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
      <CircleShadow :scale="1.5" />
    </TresGroup>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ContactShadowsDemo.vue
================================================
<script setup lang="ts">
import { ContactShadows, Levioso, TorusKnot } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="white">
    <Levioso :speed="2" :range="[0, 0.7]" :rotation-factor="9">
      <TorusKnot :scale="0.45">
        <TresMeshNormalMaterial />
      </TorusKnot>
    </Levioso>
    <ContactShadows :position-y="-1" color="#335" :scale="20" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/CubeCameraDemo.vue
================================================
<script setup lang="ts">
import { CubeCamera, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { onMounted, onUnmounted, shallowRef } from 'vue'

const x = shallowRef(1)
const y0 = shallowRef(1)
const y1 = shallowRef(1)
let intervalId: ReturnType<typeof setInterval>

let elapsed = 0
onMounted(() => {
  intervalId = setInterval(() => {
    elapsed += 1000 / 30
    x.value = Math.cos(elapsed * 0.001) * 3
    y0.value = (Math.sin(elapsed * 0.001) + 1) * 2
    y1.value = (Math.sin(elapsed * 0.001 + Math.PI) + 1) * 2
  }, 1000 / 30)
})

onUnmounted(() => { clearInterval(intervalId) })
</script>

<template>
  <TresCanvas clear-color="#222">
    <TresPerspectiveCamera :position="[0, 5, 20]" />
    <OrbitControls />

    <CubeCamera :position-y="5" :resolution="128">
      <TresMesh :position="[-2, y0, 0]" :scale="2">
        <TresSphereGeometry />
        <TresMeshPhysicalMaterial :roughness="0" :metalness="1" />
      </TresMesh>
      <TresMesh :position="[2, y1, 0]" :scale="2">
        <TresSphereGeometry />
        <TresMeshPhysicalMaterial :roughness="0.25" :metalness="1" />
      </TresMesh>
    </CubeCamera>

    <TresMesh :position="[x, 1, 0]">
      <TresSphereGeometry />
      <TresMeshBasicMaterial color="#fbb03b" />
    </TresMesh>

    <TresGridHelper :args="[100, 10]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/CubicBezierLineDemo.vue
================================================
<script setup lang="ts">
import { CubicBezierLine, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresLeches />
  <TresCanvas clear-color="#4f4f4f">
    <TresPerspectiveCamera :position="[0, 4, 0]" />
    <CubicBezierLine
      :start="[-1, 0, 0]"
      :end="[1, 0, 0]"
      :midA="[-1, 2, -2]"
      :midB="[1, 2, 2]"
      :line-width="10"
      color="#82dbc5"
    />
    <TresGridHelper />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/CustomShaderMaterialDemo.vue
================================================
<script setup lang="ts">
import { CustomShaderMaterial } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { MeshBasicMaterial } from 'three'

import { watch } from 'vue'
import '@tresjs/leches/styles'

const gl = {
  clearColor: '#82DBC5',
}

const materialProps = {
  baseMaterial: MeshBasicMaterial,
  fragmentShader: `
    varying float vWobble;

    uniform float u_Time;

    void main() {
      float wobble = vWobble * 0.5 + 0.5;
      csm_FragColor = mix(vec4(0.0, 0.4, 1.5, 1.0), vec4(1.2, 0.6, 0.8, 1.0), wobble);
    }
  `,
  vertexShader: `
    uniform float u_Time;
    uniform float u_WobbleSpeed;
    uniform float u_WobbleAmplitude;
    uniform float u_WobbleFrequency;

    varying float vWobble;

    void main() {
      float wobble = sin(csm_Position.z * u_WobbleFrequency + u_Time * u_WobbleSpeed);
      csm_Position += normal * wobble * u_WobbleAmplitude;

      vWobble = wobble;
    }
  `,
  uniforms: {
    u_Time: { value: 0 },
    u_WobbleSpeed: { value: 3 },
    u_WobbleAmplitude: { value: 0.07 },
    u_WobbleFrequency: { value: 3 },
  },
}

function onLoop() {
  materialProps.uniforms.u_Time.value += 0.01 * materialProps.uniforms.u_WobbleSpeed.value
}

const { speed, amplitude, frequency } = useControls({
  speed: {
    value: materialProps.uniforms.u_WobbleSpeed.value,
    min: 0,
    max: 10,
  },

  amplitude: {
    value: materialProps.uniforms.u_WobbleAmplitude.value,
    min: 0,
    max: 0.2,
    step: 0.01,
  },

  frequency: {
    value: materialProps.uniforms.u_WobbleFrequency.value,
    min: 1,
    max: 30,
  },
})

watch([speed.value, amplitude.value, frequency.value], () => {
  materialProps.uniforms.u_WobbleSpeed.value = speed.value.value
  materialProps.uniforms.u_WobbleAmplitude.value = amplitude.value.value
  materialProps.uniforms.u_WobbleFrequency.value = frequency.value.value
})
</script>

<template>
  <TresLeches class="top-0 important-left-4" />
  <TresCanvas v-bind="gl" @loop="onLoop">
    <TresPerspectiveCamera
      :position="[0, 2, 4]"
      :look-at="[-1, 0, 0]"
    />
    <TresMesh>
      <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
      <CustomShaderMaterial v-bind="materialProps" />
    </TresMesh>
  </TresCanvas>

  <div class="debug-container"></div>
</template>

<style scoped>
.debug-container {
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>


================================================
FILE: docs/.vitepress/theme/components/DocsDemo.vue
================================================
<script setup lang="ts">
</script>

<template>
  <ClientOnly>
    <div
      class="relative aspect-video"
      style=" height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"
    >
      <Suspense>
        <slot></slot>
      </Suspense>
    </div>
  </ClientOnly>
</template>


================================================
FILE: docs/.vitepress/theme/components/EdgesDemo.vue
================================================
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Box, ContactShadows, Edges, OrbitControls } from '@tresjs/cientos'
import { MOUSE, TOUCH } from 'three'

const gl = {
  clearColor: '#f6f6f6',
  alpha: false,
}

const dataBoxes = [{
  color: '#82DBC5',
  edgeColor: '#505050',
}, {
  color: '#505050',
  edgeColor: 'white',
}, {
  color: '#F6B03B',
  edgeColor: '#505050',
}]
</script>

<template>
  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <OrbitControls
      make-default
      auto-rotate
      :enableZoom="false"
      :auto-rotate-speed="1"
      :mouseButtons="{ LEFT: MOUSE.ROTATE, RIGHT: MOUSE.NONE }"
      :touches="{ ONE: TOUCH.ROTATE, TWO: TOUCH.NONE }"
    />

    <Box
      v-for="(x, index) in [-1.5, 0, 1.5]"
      :key="`docs-edges-demo-box-${index}`"
      :position="[x, 0, 0]"
    >
      <TresMeshBasicMaterial
        :color="dataBoxes[index].color"
      />
      <Edges :color="dataBoxes[index].edgeColor" />
    </Box>

    <ContactShadows
      :blur="2"
      :resolution="512"
      :opacity=".25"
      :position-y="-1"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/EnvironmentDemo.vue
================================================
<script setup lang="ts">
import { Environment, OrbitControls, Sphere, useProgress } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

import { TresLeches, useControls } from '@tresjs/leches'
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
import { ref } from 'vue'
import '@tresjs/leches/styles'

const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
  alpha: false,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}

const { background, blur } = useControls({
  background: true,
  blur: {
    value: 0,
    min: 0,
    max: 1,
    step: 0.01,
  },
}, {
  uuid: 'environment',
})

const environmentRef = ref(null)

const { progress, hasFinishLoading } = await useProgress()
</script>

<template>
  <Transition
    name="fade-overlay"
    enter-active-class="opacity-1 transition-opacity duration-200"
    leave-active-class="opacity-0 transition-opacity duration-200"
  >
    <div
      v-show="!hasFinishLoading"
      class="absolute bg-white t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
    >
      <div class="w-200px">
        Loading... {{ progress }} %
        <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
      </div>
    </div>
  </Transition>
  <TresLeches
    class="top-0 important-left-4"
    uuid="environment"
  />
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[7, 7, 7]" />
    <OrbitControls />
    <Suspense>
      <Environment
        ref="environmentRef"
        :background="background.value"
        :files="environmentFiles"
        :blur="blur.value"
        path="https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap"
      />
      <!-- <Environment
        :background="background.value"
        :blur="blur.value"
        preset="sunset"
      /> -->
    </Suspense>
    <Sphere>
      <TresMeshStandardMaterial
        color="yellow"
        :roughness="0"
        :metalness="0.5"
      />
    </Sphere>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/EnvironmentPresetsDemo.vue
================================================
<script setup lang="ts">
import { Environment, OrbitControls, TorusKnot, useProgress } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

import { TresLeches, useControls } from '@tresjs/leches'
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
import { ref } from 'vue'
import '@tresjs/leches/styles'

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
  alpha: false,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}

const { blur, preset } = useControls({
  background: true,
  blur: {
    value: 0,
    min: 0,
    max: 1,
    step: 0.01,
  },
  preset: {
    options: [
      'sunset',
      'studio',
      'city',
      'umbrellas',
      'night',
      'forest',
      'snow',
      'dawn',
      'hangar',
      'urban',
      'modern',
      'shangai',
    ],
    value: 'sunset',
  },
}, {
  uuid: 'presets',
})

const environmentRef = ref(null)

const { progress, hasFinishLoading } = await useProgress()
</script>

<template>
  <Transition
    name="fade-overlay"
    enter-active-class="opacity-1 transition-opacity duration-200"
    leave-active-class="opacity-0 transition-opacity duration-200"
  >
    <div
      v-show="!hasFinishLoading"
      class="absolute bg-white t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
    >
      <div class="w-200px">
        Loading... {{ progress }} %
        <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
      </div>
    </div>
  </Transition>
  <TresLeches
    class="top-0 important-left-4"
    uuid="presets"
  />
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[5, 5, 5]" />
    <OrbitControls />
    <Suspense>
      <Environment
        ref="environmentRef"
        background
        :blur="blur.value"
        :preset="preset.value"
      />
    </Suspense>
    <TorusKnot>
      <TresMeshStandardMaterial
        color="yellow"
        :roughness="0"
        :metalness="0.5"
      />
    </TorusKnot>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/FBXModelDemo.vue
================================================
<script setup lang="ts">
import { FBXModel, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
  alpha: false,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
    <OrbitControls />
    <FBXModel
      path="https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx"
      cast-shadow
      :scale="0.01"
      :position="[0, -1.6, 0]"
      :rotation-y="-Math.PI * 0.5"
    />
    <TresMesh
      :rotate-x="Math.PI * -0.5"
      :position-y="-2"
      receive-shadow
    >
      <TresPlaneGeometry :args="[40, 40]" />
      <TresMeshStandardMaterial :color="0xF7F7F7" />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
    <TresDirectionalLight
      :intensity="1"
      cast-shadow
      :position="[5, 10, 5]"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/FboCube.vue
================================================
<script setup lang="ts">
import { useFBO } from '@tresjs/cientos'

const fboTarget = useFBO({
  depth: true,
  width: 512,
  height: 512,
  settings: {
    samples: 1,
  },
})
</script>

<template>
  <TresMesh>
    <TresBoxGeometry :args="[1, 1, 1]" />

    <TresMeshBasicMaterial
      :color="0xFFFFFF"
      :map="fboTarget?.texture ?? null"
    />
  </TresMesh>
</template>


================================================
FILE: docs/.vitepress/theme/components/FboDemo.vue
================================================
<script setup lang="ts">
import { Fbo, OrbitControls } from '@tresjs/cientos'
import type { TresObject } from '@tresjs/core'
import { TresCanvas } from '@tresjs/core'
import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
import { ref, shallowReactive, shallowRef } from 'vue'

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
  alpha: false,
  outputColorSpace: SRGBColorSpace,
  toneMapping: ACESFilmicToneMapping,
}

const fboRef = ref(null)
const torusRef = shallowRef<TresObject | null>(null)
const capsuleRef = shallowRef<TresObject | null>(null)

const state = shallowReactive({
  depth: false,
  settings: {
    samples: 1,
  },
})

function onLoop({ elapsed }: { elapsed: number }) {
  if (!torusRef.value || !capsuleRef.value) { return }

  torusRef.value.rotation.x = elapsed * 0.745
  torusRef.value.rotation.y = elapsed * 0.361

  capsuleRef.value.rotation.x = elapsed * 0.471
  capsuleRef.value.rotation.z = elapsed * 0.632
}
</script>

<template>
  <TresCanvas v-bind="gl" @loop="onLoop">
    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
    <OrbitControls />

    <TresGridHelper :args="[10, 10]" />

    <Fbo
      ref="fboRef"
      v-bind="state"
    />

    <TresMesh>
      <TresBoxGeometry :args="[1, 1, 1]" />

      <TresMeshBasicMaterial
        :color="0xFFFFFF"
        :map="fboRef?.instance.texture ?? null"
      />
    </TresMesh>

    <TresMesh
      ref="torusRef"
      :position="[3, 0, 0]"
    >
      <TresTorusGeometry :args="[1, 0.5, 16, 100]" />
      <TresMeshNormalMaterial />
    </TresMesh>

    <TresMesh
      ref="capsuleRef"
      :position="[-2, 0, 0]"
    >
      <TresCapsuleGeometry :args="[0.4, 1, 4, 8]" />
      <TresMeshNormalMaterial />
    </TresMesh>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/Feather.vue
================================================
<script setup lang="ts">
import { Levioso, useGLTF } from '@tresjs/cientos'
import { shallowRef, watchEffect } from 'vue'

const { state } = useGLTF('/feather.glb')

const featherRef = shallowRef()

watchEffect(() => {
  if (featherRef.value) {
    featherRef.value.rotation.y = -Math.PI / 4
    featherRef.value.updateMatrixWorld()
  }
})
</script>

<template>
  <Levioso
    :speed="4"
  >
    <primitive
      v-if="state?.scene"
      ref="featherRef"
      :object="state?.scene"
      :position-y="-Math.PI / 4"
    />
  </Levioso>
</template>


================================================
FILE: docs/.vitepress/theme/components/FitDemo.vue
================================================
<script setup lang="ts">
import { Fit, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { BoxGeometry, MeshNormalMaterial } from 'three'

const positions: number[][] = []
for (let y = 100; y <= 120; y += 10) {
  for (let x = 100; x <= 120; x += 10) {
    positions.push([x, y, 9999])
  }
}
const geom = new BoxGeometry()
const mat = new MeshNormalMaterial()
</script>

<template>
  <TresCanvas clear-color="#4F4F4F">
    <TresPerspectiveCamera :position="[1, 1, 1]" />
    <OrbitControls />
    <Fit>
      <TresMesh
        v-for="(p, i) in positions"
        :key="i"
        :position="p"
        :args="[geom, mat]"
      />
    </Fit>
    <TresGridHelper :args="[1, 1]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/GLTFModelDemo.vue
================================================
<script setup lang="ts">
import { GLTFModel, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#F78B3D">
    <TresPerspectiveCamera :position="[3, 2, 5]" />
    <OrbitControls />
    <GLTFModel path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb" />
    <TresDirectionalLight
      :intensity="2"
      :position="[3, 3, 3]"
    />
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/GlassMaterialDemo.vue
================================================
<script setup lang="ts">
import { MeshGlassMaterial, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <TresMesh>
      <TresTorusKnotGeometry :args="[1, 0.4, 256, 20]" />
      <MeshGlassMaterial />
    </TresMesh>
    <TresMesh :position="[0, 0, -1]">
      <TresPlaneGeometry :args="[5, 5]" />
      <TresMeshBasicMaterial :color="0xFF1111" />
    </TresMesh>
    <TresGridHelper :args="[10, 10]" />
    <TresAmbientLight />
    <TresDirectionalLight :position="[2, 2, 2]" />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/GradientTextureDemo.vue
================================================
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { GradientTexture } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas clear-color="#e3e3e3">
    <TresPerspectiveCamera :position="[0, 0, 3]" />
    <TresMesh>
      <TresPlaneGeometry />
      <TresMeshBasicMaterial>
        <GradientTexture :stops="[0.1, 0.5, 0.9]" :colors="['#4f4f4f', '#82dbc5', '#fbb03b']" />
      </TresMeshBasicMaterial>
    </TresMesh>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/GridDemo.vue
================================================
<script setup lang="ts">
import { Grid, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#222222">
    <TresPerspectiveCamera :position="[8, 10, 10]" :fov="25" />
    <OrbitControls />
    <Grid
      :args="[10.5, 10.5]"
      cell-color="#82dbc5"
      :cell-size="0.6"
      :cell-thickness="0.5"
      section-color="#fbb03b"
      :section-size="2"
      :section-thickness="1.3"
      :infinite-grid="true"
      :fade-from="0"
      :fade-distance="12"
      :fade-strength="1"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/HelperDemo.vue
================================================
<script setup lang="ts">
import { BoxHelper, PointLightHelper } from 'three'
import { VertexNormalsHelper } from 'three-stdlib'
import { Helper, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#222">
    <TresPerspectiveCamera :position="[10, 10, 10]" />
    <OrbitControls />

    <TresPointLight :position="[5, 5, -5]">
      <Helper :type="PointLightHelper" :args="[0.5]" />
    </TresPointLight>

    <TresGroup>
      <Helper :type="BoxHelper" :args="['royalblue']" />

      <TresMesh :position="[-2, 2, -1]">
        <TresSphereGeometry />
        <TresMeshBasicMaterial />
        <Helper :type="BoxHelper" :args="['red']" />
      </TresMesh>

      <TresMesh :position="[2, -2, 1]">
        <TresBoxGeometry />
        <TresMeshBasicMaterial />
        <Helper :type="VertexNormalsHelper" :args="[1, 'red']" />
      </TresMesh>
    </TresGroup>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/HolographicMaterialDemo.vue
================================================
<script setup lang="ts">
import { HolographicMaterial, Levioso, OrbitControls, useGLTF } from '@tresjs/cientos'
import type { TresObject } from '@tresjs/core'
import { TresCanvas } from '@tresjs/core'
import { shallowRef, watch } from 'vue'

const path = 'https://raw.githubusercontent.com/'
  + 'Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf'
const { state } = useGLTF(path)

const holographicMaterialRef = shallowRef()

watch(holographicMaterialRef, (value) => {
  state.value?.scene?.traverse((child: TresObject) => {
    if (child.isMesh) {
      child.material.dispose()
      child.material = value.root
    }
  })
})
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 0, 6]" />
    <Levioso :speed="5">
      <primitive
        v-if="state?.scene"
        :object="state?.scene"
        :position-y="-2.5"
      >
        <HolographicMaterial ref="holographicMaterialRef" />
      </primitive>
    </Levioso>
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/HtmlDemo.vue
================================================
<script setup lang="ts">
import { Html, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[3, 3, 8]" />
    <OrbitControls />
    <TresMesh :position="[1, 1, 1]">
      <TresBoxGeometry />
      <TresMeshNormalMaterial />
      <Html
        center
        transform
        :distance-factor="4"
        :position="[0, 0, 0.65]"
        :scale="[0.75, 0.75, 0.75]"
      >
        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
          I'm a Box 📦
        </h1>
      </Html>
    </TresMesh>
    <TresGridHelper />
    <TresAmbientLight />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/HtmlLaptopDemo.vue
================================================
<script setup lang="ts">
import { ContactShadows, Html, OrbitControls, useGLTF } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

const gl = {
  clearColor: '#241a1a',
  shadows: true,
}

const { state }
  = useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/macbook/model.gltf', { draco: true })
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[-5, 4, 3]" />
    <OrbitControls />

    <primitive v-if="state?.nodes" :object="state?.nodes.Macbook">
      <Html
        transform
        wrapper-class="webpage"
        :distance-factor="11"
        :position="[0, 8, -11]"
        occlude
        :rotation-x="-0.256"
      >
        <iframe
          class="rounded-lg w-[1024px] h-[670px]"
          src="https://tresjs.org"
          frameborder="0"
        ></iframe>
      </Html>
    </primitive>

    <ContactShadows
      :blur="3.5"
      :resolution="512"
      :opacity="1"
    />
    <TresAmbientLight :intensity="1" />
    <TresDirectionalLight
      :intensity="2"
      :position="[2, 3, 0]"
      :cast-shadow="true"
      :shadow-camera-far="50"
      :shadow-camera-left="-10"
      :shadow-camera-right="10"
      :shadow-camera-top="10"
      :shadow-camera-bottom="-10"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/HtmlOccludeDemo.vue
================================================
<script setup lang="ts">
import { Html, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { ref } from 'vue'

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
}

const sphereRef = ref(null)
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[3, 3, 8]" />
    <OrbitControls />
    <TresMesh :position="[1, 1, 1]">
      <TresBoxGeometry />
      <TresMeshNormalMaterial />
      <Html
        center
        transform
        :occlude="[sphereRef]"
        :distance-factor="4"
      >
        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
          Move camera
        </h1>
      </Html>
    </TresMesh>
    <TresMesh
      ref="sphereRef"
      :position="[3, 1, 1]"
    >
      <TresSphereGeometry />
      <TresMeshNormalMaterial />
      <Html
        center
        transform
        :distance-factor="4"
      >
        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
          Sphere
        </h1>
      </Html>
    </TresMesh>
    <TresGridHelper />
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ImageDemo.vue
================================================
<script setup lang="ts">
import { NoToneMapping, SRGBColorSpace } from 'three'
import { TresCanvas } from '@tresjs/core'
import { Image, OrbitControls } from '@tresjs/cientos'

const gl = {
  clearColor: '#82DBC5',
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}

const URL_STUB = 'https://upload.wikimedia.org/wikipedia/commons/'

const URLS = [
  'f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG',
  '3/36/Cyanistes_caeruleus_Oulu_20130323.JPG',
  '2/2e/Cyanistes_caeruleus_Oulu_20170507_02.jpg',
].map(url => URL_STUB + url)
</script>

<template>
  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera :position="[0, 0, 2]" />
    <OrbitControls />
    <Image :url="URLS[0]" :radius="0.2" :transparent="true" :position="[-1.5, 0, -1]" />
    <Image :url="URLS[1]" :radius="0.2" :transparent="true" />
    <Image :url="URLS[2]" :radius="0.2" :transparent="true" :position="[1.5, 0, -1]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/KeyboardControlsDemo.vue
================================================
<script setup lang="ts">
import { Box, KeyboardControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera />
    <Box :position-y="0.5" />
    <KeyboardControls />
    <TresGridHelper />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/LODDemo.vue
================================================
<script setup lang="ts">
import { LOD } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { BoxGeometry, IcosahedronGeometry, MeshBasicMaterial, Vector3 } from 'three'
import { onMounted, onUnmounted, ref } from 'vue'

const COUNT = 1000
const positions = Array.from({ length: COUNT }).fill(0).map((_, i) => {
  return new Vector3(
    Math.cos(i) * 1000,
    Math.sin(i) * 1000,
    8000 * (2 * i / COUNT - 1),
  )
})

const geometries = [
  new IcosahedronGeometry(100, 4),
  new IcosahedronGeometry(100, 0),
  new BoxGeometry(100, 100, 100),
]

const materials = [
  new MeshBasicMaterial({ color: '#fbb03b', wireframe: true }),
  new MeshBasicMaterial({ color: '#82dbc5', wireframe: true }),
  new MeshBasicMaterial({ color: '#4f4f4f', wireframe: true }),
]

const z = ref(0)
let intervalId: ReturnType<typeof setInterval>
let elapsed = 0

onMounted(() => {
  intervalId = setInterval(() => {
    elapsed += 0.005
    z.value = Math.cos(elapsed) * 5000
  }, 1000 / 30)
})

onUnmounted(() => {
  clearInterval(intervalId)
})
</script>

<template>
  <TresCanvas clear-color="gray">
    <TresPerspectiveCamera :near="1" :far="25000" :position="[0, 0, 0]" />
    <TresGroup :position-z="z">
      <LOD v-for="position, i of positions" :key="i" :levels="[1500, 3000, 4000]" :position="position">
        <TresMesh :geometry="geometries[0]" :material="materials[0]" />
        <TresMesh :geometry="geometries[1]" :material="materials[1]" />
        <TresMesh :geometry="geometries[2]" :material="materials[2]" />
      </LOD>
    </TresGroup>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/LensflareDemo.vue
================================================
<script setup lang="ts">
import { Lensflare, OrbitControls, Torus } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { shallowRef } from 'vue'
import '@tresjs/leches/styles'

const [x, z] = [shallowRef(0), shallowRef(0)]

function onLoop({ elapsed }: { elapsed: number }) {
  z.value = Math.cos(elapsed * 0.5) * 2
  x.value = Math.sin(elapsed)
}

const { value: scale } = useControls({
  scale: { value: 0.33, min: 0.01, max: 2, step: 0.01 },
})
</script>

<template>
  <TresLeches class="important-top-4 important-left-4" />
  <TresCanvas clear-color="#333" @loop="onLoop">
    <OrbitControls />
    <TresPointLight :position="[x, 0, z]">
      <Lensflare
        :seed="1028"
        :scale="scale"
      />
    </TresPointLight>
    <Torus
      v-for="n in [-2, 0, 2]"
      :key="n"
      :args="[0.7, 0.15]"
      :position-z="n"
      :rotation-y="Math.PI * 0.5"
    >
      <TresMeshPhongMaterial color="#888" />
    </Torus>
    <TresGridHelper :position="[0, -0.9, 0]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/LeviosoDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
import Feather from './Feather.vue'

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
  alpha: false,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}
</script>

<template>
  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera :position="[1, 2, 1]" />
    <Suspense>
      <Feather />
    </Suspense>
    <TresAmbientLight :intensity="1" />
    <TresDirectionalLight
      :intensity="1"
      :position="[2, 2, 2]"
    />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/Line2Demo.vue
================================================
<script setup lang="ts">
import { Line2, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas v-bind="{ clearColor: '#4f4f4f' }">
    <Line2
      :points="[[-0.5, 0, 0], [0.5, 0, 0], [0, 0.8660, 0], [-0.5, 0, 0]]"
      :line-width="10"
      color="#82dbc5"
    />
    <TresGridHelper />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/LoveVueThreeJS.vue
================================================
<script setup lang="ts">
/// <reference types="vite-svg-loader" />
import { gsap } from 'gsap'
import { onMounted, ref } from 'vue'
import SecondRow from '../assets/second-row.svg'
import ThirdRow from '../assets/third-row.svg'
import Triangle from '../assets/triangle.svg'

const triangleRef = ref()
const secondRowRef = ref()
const thirdRowRef = ref()

const tl2r = gsap.timeline()
const tl3r = gsap.timeline()

const heightOfSignleSvg = 150

async function restartAnimation() {
  gsap.to(secondRowRef.value.$el, {
    duration: 1,
    y: 0,
    ease: 'elastic.out(0.7, 0.2)',
  })
  await gsap.to(thirdRowRef.value.$el, {
    delay: 0.65,
    duration: 1,
    y: 0,
    ease: 'steps(4)',
  })

  tl2r.restart()
  tl3r.restart()
}

onMounted(() => {
  tl2r.to(secondRowRef.value.$el, {
    delay: 1,
    duration: 2,
    y: -(8 * heightOfSignleSvg),
    ease: 'elastic.easeOut',
  })
  tl3r.to(thirdRowRef.value.$el, {
    delay: 1.25,
    duration: 2,
    y: -(12 * heightOfSignleSvg),
    ease: 'power1.out',
  })
})
</script>

<template>
  <div
    class="grid items-center w-full min-w-370px -translate-x-20px md:translate-x-20px h-full scale-75"
    @click="restartAnimation"
  >
    <div class="grid grid-cols-3 gap-8 overflow-hidden h-93px">
      <Triangle ref="triangleRef" />
      <SecondRow ref="secondRowRef" />
      <ThirdRow ref="thirdRowRef" />
    </div>
  </div>
</template>


================================================
FILE: docs/.vitepress/theme/components/MapControlsDemo.vue
================================================
<script setup lang="ts">
import { MapControls, Sphere } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <MapControls />
    <TresGridHelper />
    <Sphere :scale="0.5">
      <TresMeshNormalMaterial />
    </Sphere>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/MarchingCubesDemo.vue
================================================
<script setup lang="ts">
import { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { NoToneMapping, Vector3 } from 'three'

const rand = () => (Math.random() - 0.5) * 1.25
const positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))
</script>

<template>
  <TresCanvas clear-color="#222" :tone-mapping="NoToneMapping">
    <TresPerspectiveCamera />
    <OrbitControls />

    <MarchingCubes :resolution="40" :max-poly-count="40000">
      <MarchingPlane plane-type="y" />
      <MarchingCube
        v-for="position, i of positions"
        :key="i"
        :position="position"
      />
      <TresMeshPhongMaterial specular="#111111" :shininess="30" color="#049ef4" :reflectivity="1" />
    </MarchingCubes>

    <TresAxesHelper />
    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[0, 200, 0]" />
    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[100, 200, 100]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/MaskDemo.vue
================================================
<script setup lang="ts">
import { NoToneMapping } from 'three'
import { Mask, OrbitControls, useMask } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresLeches />
  <TresCanvas :tone-mapping="NoToneMapping" :stencil="true" clear-color="#4f4f4f">
    <TresPerspectiveCamera />
    <OrbitControls />

    <TresGroup :scale="2">
      <TresMesh>
        <TresRingGeometry :args="[0.95, 1, 64]" />
        <TresMeshBasicMaterial color="white" />
      </TresMesh>
      <Mask>
        <TresCircleGeometry />
        <TresMeshBasicMaterial color="#fbb03b" />
      </Mask>
    </TresGroup>

    <TresMesh :position-z="-1">
      <TresBoxGeometry />
      <TresMeshNormalMaterial v-bind="useMask(1)" />
    </TresMesh>

    <TresMesh :position-z="-3">
      <TresBoxGeometry />
      <TresMeshNormalMaterial v-bind="useMask(1)" />
    </TresMesh>

    <TresMesh :position-z="-5">
      <TresBoxGeometry />
      <TresMeshNormalMaterial />
    </TresMesh>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/MeshReflectionMaterialDemo.vue
================================================
<script setup lang="ts">
import { MeshReflectionMaterial, UseSVG as MySVG, OrbitControls, useTexture } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

const normalMapSrc = 'https://raw.githubusercontent.com/'
  + 'Tresjs/assets/main/textures/rock/normal.jpg'
const { state: normalMap } = useTexture(normalMapSrc)
const svgSrc = '/logo.svg'
</script>

<template>
  <Suspense>
    <TresCanvas clear-color="white">
      <TresMesh :rotation-x="-Math.PI / 2">
        <TresPlaneGeometry :args="[30, 30]" />
        <MeshReflectionMaterial
          :roughness="0"
          :normal-map="normalMap"
        />
      </TresMesh>
      <TresPerspectiveCamera :position="[0, 2, 20]" />
      <OrbitControls />
      <MySVG
        :src="svgSrc"
        :position="[-8.0, 4, 0]"
        :scale="0.04"
        :depth="1"
      />
    </TresCanvas>
  </Suspense>
</template>


================================================
FILE: docs/.vitepress/theme/components/MouseParallaxDemo.vue
================================================
<script setup lang="ts">
import { MouseParallax, TorusKnot } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera
      :position="[0, 0, 7.5]"
      :fov="75"
    />
    <TorusKnot>
      <TresMeshNormalMaterial />
    </TorusKnot>
    <MouseParallax
      :factor="5"
      :ease="[3, 0.1]"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/OceanDemo.vue
================================================
<script setup lang="ts">
import { Ocean, OrbitControls, Sky } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[0, 1, 1]" />
    <Sky :azimuth="0" />
    <Suspense>
      <Ocean />
    </Suspense>
    <TresMesh :position-y="1">
      <TresBoxGeometry :args="[1, 1, 1]" />
    </TresMesh>
    <OrbitControls
      :enable-pan="false"
      :enable-zoom="false"
      :max-polar-angle="Math.PI * 0.495"
      :min-distance="40.0"
      :max-distance="200.0"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/OrbitControlsDemo.vue
================================================
<script setup lang="ts">
import { Box, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <OrbitControls />
    <Box :scale="2">
      <TresMeshToonMaterial color="orange" />
    </Box>
    <TresAmbientLight />
    <TresDirectionalLight
      :position="[0, 2, 4]"
    />
    <TresGridHelper />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/OutlineDemo.vue
================================================
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, Outline } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas clear-color="#4f4f4f">
    <TresPerspectiveCamera />
    <OrbitControls />
    <TresAmbientLight :intensity="3.14" />
    <TresPointLight :intensity="50" :position="[2, 2, 0]" />
    <TresMesh :position-x="-0.75">
      <TresBoxGeometry />
      <TresMeshPhongMaterial />
      <Outline :thickness="7.5" color="#82dbc5" />
    </TresMesh>
    <TresMesh :position-x="0.75">
      <TresSphereGeometry :args="[0.5]" />
      <TresMeshPhongMaterial />
      <Outline :thickness="7.5" color="#fbb03b" />
    </TresMesh>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/PBRTexturesDemo.vue
================================================
<script setup lang="ts">
/* eslint-disable no-console */
import { computed, watch } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'
import type { MeshStandardMaterial } from 'three'

// Load the 3D model
const { nodes, materials } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
const cube = computed(() => nodes.value?.BlenderCube)
const material = computed(() => materials.value?.Material)

// Define texture paths
const texturePaths = [
  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Color.jpg',
  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_NormalGL.jpg',
  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Roughness.jpg',
  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Metalness.jpg',
  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Displacement.jpg',
]

// Load all PBR textures at once
const { textures, isLoading, error } = useTextures(texturePaths)

// Apply textures to material when loaded
watch([material, textures], ([modelMaterial, textures]) => {
  if (modelMaterial && textures && textures.length === texturePaths.length) {
    // Cast to MeshStandardMaterial to access PBR properties
    const pbrMaterial = modelMaterial as MeshStandardMaterial

    // Apply textures
    pbrMaterial.map = textures[0]
    pbrMaterial.normalMap = textures[1]
    pbrMaterial.roughnessMap = textures[2]
    pbrMaterial.metalnessMap = textures[3]
    pbrMaterial.displacementMap = textures[4]

    // Set material properties
    pbrMaterial.displacementScale = 0
    pbrMaterial.metalness = 0.8
    pbrMaterial.roughness = 0.2
  }
})

// Log loading state and errors
watch(isLoading, (_loading) => {
  console.log('isLoading', _loading)
}, { immediate: true })

watch(error, (errs) => {
  if (errs) {
    console.error('Error loading textures:', errs)
  }
})
</script>

<template>
  <Transition
    name="fade-overlay"
    enter-active-class="opacity-1 transition-opacity duration-200"
    leave-active-class="opacity-0 transition-opacity duration-200"
  >
    <div
      v-show="isLoading"
      class="absolute bg-white t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
    >
      <div class="w-200px">
        Loading...
      </div>
    </div>
  </Transition>
  <TresCanvas clear-color="#4f4f4f">
    <Suspense>
      <Environment preset="studio" background :blur="1" />
    </Suspense>
    <TresPerspectiveCamera :position="[2, 2, 4]" :look-at="[0, 2, 0]" />
    <OrbitControls :target="[0, 2, 0]" />
    <TresGridHelper />
    <TresAmbientLight :intensity="2" />
    <TresGroup position-y="2">
      <primitive v-if="cube" :object="cube" />
    </TresGroup>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/PointMaterialDemo.vue
================================================
<script setup lang="ts">
import { MathUtils, NoToneMapping } from 'three'
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, PointMaterial } from '@tresjs/cientos'

const positions = new Float32Array(Array.from({ length: 100 }, () => [
  MathUtils.randFloatSpread(8),
  MathUtils.randFloatSpread(8),
  MathUtils.randFloatSpread(8),
]).flat())
</script>

<template>
  <TresCanvas :tone-mapping="NoToneMapping" clear-color="#4F4F4F" :raycaster="{ params: { Points: { threshold: 0.2 } } }">
    <TresPerspectiveCamera :position="[10, 10, 10]" />
    <OrbitControls />
    <TresPoints :limit="positions.length">
      <PointMaterial
        color="#82dbc5"
        :transparent="true"
        :size="10"
        :size-attenuation="false"
        :depth-test="false"
        :tone-mapped="false"
      />
      <TresBufferGeometry>
        <TresBufferAttribute :args="[positions, 3]" attach="attributes-position" />
      </TresBufferGeometry>
    </TresPoints>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/PositionalAudioDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, PositionalAudio, Sphere, useGLTF } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { gsap } from 'gsap'
import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
import '@tresjs/leches/styles'

const gl = {
  clearColor: '#FAFAFA',
  shadows: true,
}

let tl: gsap.core.Timeline, ctx: gsap.Context

const ready = ref(false)
const positionalAudioRef = shallowRef(null)
const ballRef = shallowRef(null)

const { helper, innerAngle, outerAngle, outerGain } = useControls({
  helper: true,
  innerAngle: {
    label: 'innerAngle',
    value: 195,
    min: 0,
    max: 360,
    step: 1,
  },
  outerAngle: {
    label: 'outerAngle',
    value: 260,
    min: 0,
    max: 360,
    step: 1,
  },
  outerGain: {
    label: 'outerGain',
    value: 0.3,
    min: 0,
    max: 1,
    step: 0.01,
  },
})

const { state } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/positional-audio/ping-pong.glb', { draco: true })

const onBallBounce = () => {
  const iteration = tl.iteration() % 2

  if (!iteration) {
    positionalAudioRef?.value?.play()
  }
}

watch(helper.value, () => {
  innerAngle.value.visible = outerAngle.value.visible = outerGain.value.visible = helper.value.value
})

watch([ready], () => {
  if (!ballRef?.value || !ready.value) { return }

  ctx.add(() => {
    tl = gsap
      .timeline({ repeat: -1, yoyo: true, onRepeat: onBallBounce })
      .to(ballRef.value.instance.position, { y: 0, ease: 'power1.in', duration: 0.35 })
  })
})

onMounted(() => {
  ctx = gsap.context(() => { })
})

onUnmounted(() => {
  positionalAudioRef?.value?.dispose()
  ctx?.revert()
})
</script>

<template>
  <TresLeches class="important-left-initial important-right-2 important-w-220px" />

  <div
    v-if="!ready"
    class="ready"
  >
    <button @click="ready = true">
      click to continue
    </button>
  </div>

  <div
    v-if="ready"
    class="controls"
  >
    <button @click="tl?.play()">
      play
    </button>
    <button @click="tl?.pause()">
      pause
    </button>
  </div>

  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera :position="[0, 0.5, 15]" />
    <OrbitControls make-default />

    <Sphere
      ref="ballRef"
      :args="[1, 16, 16]"
      :position="[0, 3, 0]"
      :rotation-x="Math.PI / -2"
      cast-shadow
      receive-shadow
    >
      <TresMeshStandardMaterial />

      <Suspense>
        <PositionalAudio
          ref="positionalAudioRef"
          :ready
          :inner-angle="innerAngle.value"
          :outer-angle="outerAngle.value"
          :outer-gain="outerGain.value"
          :helper="helper.value"
          url="https://raw.githubusercontent.com/Tresjs/assets/main/music/ping-pong.mp3"
        />
      </Suspense>
    </Sphere>
    <primitive
      v-if="state?.scene"
      :scale="[.2, .2, .2]"
      :position="[0, -1.15, 0]"
      receive-shadow
      :object="state?.scene"
    />
    <TresAmbientLight
      color="#ffffff"
      :intensity="2"
    />
    <TresDirectionalLight
      :position="[5, 10, 0]"
      :intensity="2"
      cast-shadow
    />
  </TresCanvas>
</template>

<style scoped>
.ready {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 24;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.controls {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  top: 25px;
  left: 25px;
  column-gap: 5px;
}

.ready button,
.controls button {
  padding: 5px 10px;
  background: #1b1c1e;
  border: 1px solid #161618;
}
</style>


================================================
FILE: docs/.vitepress/theme/components/PrecipitationBeamDemo.vue
================================================
<script setup lang="ts">
import { Precipitation } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 2, 15]" />
    <Precipitation
      :position="[0, 3, 7.5]"
      :randomness="0"
      :speed="0.5"
      :count="2000"
      :area="[1, 10, 1]"
    />
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/PrecipitationDemo.vue
================================================
<script setup lang="ts">
import { Precipitation } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 2, 15]" />
    <Precipitation />
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/PrecipitationRainDemo.vue
================================================
<script setup lang="ts">
import { Precipitation } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 2, 15]" />
    <Precipitation
      :randomness="0"
      :speed="1"
      :count="2500"
    />
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/PrecipitationStormDemo.vue
================================================
<script setup lang="ts">
import { Precipitation } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 2, 15]" />
    <Precipitation
      :randomness="3"
      :speed="1"
      :count="2500"
    />
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/QuadraticBezierLineDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, QuadraticBezierLine } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresLeches />
  <TresCanvas clear-color="#4f4f4f">
    <QuadraticBezierLine
      :start="[-1, 0, 0]"
      :end="[1, 2, 0]"
      :line-width="10"
      color="#fbb03b"
    />
    <TresGridHelper />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ReflectorDemo.vue
================================================
<script setup lang="ts">
import {
  MeshWobbleMaterial,
  OrbitControls,
  Reflector,
  Stars,
} from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#111">
    <TresPerspectiveCamera
      :position="[3, 2, 6]"
      :look-at="[0, 0, 0]"
    />
    <Stars />
    <TresMesh>
      <TresTorusGeometry />
      <MeshWobbleMaterial
        color="orange"
        :speed="1"
        :factor="2"
      />
    </TresMesh>
    <Reflector
      :rotation="[-Math.PI * 0.5, 0, 0]"
      :position="[0, -2, 0]"
      color="#f7f7f7"
    >
      <TresCircleGeometry :args="[10, 32]" />
    </Reflector>
    <TresAmbientLight :intensity="1" />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/RoundedBoxDemo.vue
================================================
<script setup lang="ts">
import { Html, OrbitControls, RoundedBox } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas
    clear-color="#111"
  >
    <TresPerspectiveCamera
      :position="[0, 0, 7]"
      :fov="45"
      :aspect="1"
      :near="0.1"
      :far="1000"
    />
    <OrbitControls />
    <RoundedBox
      :position-x="3"
      :args="[1, 1, 1, 2, 1]"
    >
      <TresMeshBasicMaterial
        :color="0x00FF00"
        wireframe
      />
      <Html
        center
        transform
        :distance-factor="4"
        :position="[0, 1, 0.65]"
        :scale="[0.75, 0.75, 0.75]"
      >
        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
          I can be a quadsphere too
        </h1>
      </Html>
    </RoundedBox>
    <RoundedBox
      :position-x="-3"
    >
      <TresMeshBasicMaterial
        :color="0x00FF00"
        wireframe
      />
      <Html
        center
        transform
        :distance-factor="4"
        :position="[0, 1, 0.65]"
        :scale="[0.75, 0.75, 0.75]"
      >
        <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">
          I have wireframe active
        </h1>
      </Html>
    </RoundedBox>
    <RoundedBox />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SVGDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, UseSVG } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

const svgURL = 'https://raw.githubusercontent.com/'
  + 'Tresjs/assets/main/svgs/cientos_heart.svg'
</script>

<template>
  <TresCanvas clear-color="#333">
    <OrbitControls />
    <Suspense>
      <UseSVG
        :src="svgURL"
        :position="[-0.4, 1, 0]"
        :scale="0.01"
      />
    </Suspense>
    <TresGridHelper />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SamplerDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Sampler } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
    <OrbitControls />

    <Sampler :count="50">
      <TresMesh>
        <TresTorusGeometry />
      </TresMesh>

      <TresInstancedMesh :args="[null!, null!, 1000]">
        <TresBoxGeometry :args="[0.1, 0.1, 0.1]" />
        <TresMeshNormalMaterial />
      </TresInstancedMesh>
    </Sampler>
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ScreenQuadDemo.vue
================================================
<script setup>
import { TresCanvas } from '@tresjs/core'
import { ScreenQuad } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas>
    <TresOrthographicCamera :args="[-1, 1, 1, -1, 0, 1000]" :position="[0, 0, 1]" :manual="true" />
    <ScreenQuad>
      <TresMeshBasicMaterial color="red" />
    </ScreenQuad>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ScreenSizerDemo.vue
================================================
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, ScreenSizer } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas clear-color="#3f3f3f">
    <TresPerspectiveCamera :position="[10, 10, 10]" />
    <OrbitControls />
    <ScreenSizer>
      <TresMesh>
        <TresBoxGeometry :args="[100, 100, 100]" />
        <TresMeshNormalMaterial />
      </TresMesh>
    </ScreenSizer>
    <TresMesh :position-x="5">
      <TresBoxGeometry />
      <TresMeshNormalMaterial />
    </TresMesh>
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ScreenSpaceDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, ScreenSpace } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera />
    <OrbitControls />
    <ScreenSpace :depth="5">
      <TresMesh>
        <TresTorusGeometry />
        <TresMeshNormalMaterial />
      </TresMesh>
    </ScreenSpace>
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ScrollControlsDemo.vue
================================================
<script setup lang="ts">
import { Box, ScrollControls, Stars } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { useControls } from '@tresjs/leches'
import { ref } from 'vue'
import '@tresjs/leches/styles'

const boxRef = ref()
const progress = ref(0)

useControls('fpsgraph')
useControls({
  progress: progress.value,
})

function onLoop() {
  if (boxRef.value) {
    boxRef.value.instance.rotation.x = progress.value * 10
    boxRef.value.instance.rotation.y = progress.value * 2
  }
}
</script>

<template>
  <TresCanvas
    class="important-absolute"
    clear-color="#333"
    @loop="onLoop"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <Stars :radius="1" />
    <TresGridHelper :args="[10, 10]" />
    <ScrollControls />
    <Box
      :scale="0.5"
      :color="0xFF00FF"
      :position="[-1, 1, 0]"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ScrollControlsHorizontalDemo.vue
================================================
<script setup lang="ts">
import { Box, ScrollControls, Stars } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas
    class="important-absolute"
    clear-color="#333"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <Stars :radius="1" />
    <TresGridHelper :args="[10, 10]" />
    <ScrollControls horizontal />
    <Box
      :scale="0.5"
      :color="0xFF00FF"
      :position="[-1, 1, 0]"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ScrollControlsPagesDemo.vue
================================================
<script setup lang="ts">
import { Box, ScrollControls, Stars } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas
    class="important-absolute"
    clear-color="#333"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <Stars :radius="1" />
    <TresGridHelper :args="[10, 10]" />
    <ScrollControls
      :pages="20"
      :distance="20"
      :smooth-scroll="0.05"
    />
    <Box
      :scale="0.5"
      :color="0xFF00FF"
      :position="[-1, 1, 0]"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ScrollControlsProgressCameraDemo.vue
================================================
<script setup lang="ts">
import { Box, ScrollControls, Stars } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { ref } from 'vue'

const boxRef = ref()
const progress = ref(0)

function onLoop() {
  if (boxRef.value) {
    boxRef.value.instance.rotation.x = progress.value * 10
    boxRef.value.instance.rotation.y = progress.value * 2
    boxRef.value.instance.position.x = progress.value * 4.5
  }
}
</script>

<template>
  <TresCanvas
    class="important-absolute"
    clear-color="#333"
    @loop="onLoop"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <Stars :radius="1" />
    <TresGridHelper :args="[10, 10]" />
    <ScrollControls
      v-model="progress"
      :distance="0"
    />
    <Box
      ref="boxRef"
      :scale="0.5"
      :color="0xFF00FF"
      :position="[-1, 1, 0]"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ScrollControlsProgressDemo.vue
================================================
<script setup lang="ts">
import { Box, ScrollControls, Stars } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { ref } from 'vue'

const boxRef = ref()
const progress = ref(0)

function onLoop() {
  if (boxRef.value) {
    boxRef.value.instance.rotation.x = progress.value * 10
    boxRef.value.instance.rotation.y = progress.value * 2
    boxRef.value.instance.position.x = progress.value * 4.5
  }
}
</script>

<template>
  <TresCanvas
    class="important-absolute"
    clear-color="#333"
    @loop="onLoop"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <Stars :radius="1" />
    <TresGridHelper :args="[10, 10]" />
    <ScrollControls
      v-model="progress"
      :distance="2"
    />
    <Box
      ref="boxRef"
      :scale="0.5"
      :color="0xFF00FF"
      :position="[-1, 1, 0]"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/ScrollControlsSlotsDemo.vue
================================================
<script setup lang="ts">
import { Box, ScrollControls, Sphere, Stars } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { ref } from 'vue'

const scRef = ref()
const boxRef = ref()
const progress = ref(0)

function onLoop() {
  if (boxRef.value) {
    boxRef.value.instance.rotation.x = progress.value * 10
    boxRef.value.instance.rotation.y = progress.value * 2
  }
}
</script>

<template>
  <TresCanvas
    clear-color="#333"
    class="important-absolute"
    @loop="onLoop"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <Stars :radius="1" />
    <TresGridHelper :args="[10, 10]" />
    <Sphere
      :scale="0.1"
      :position="[1, 2, 0]"
    />
    <ScrollControls
      ref="scRef"
      v-model="progress"
      :distance="20"
      :smooth-scroll="0.1"
    >
      <Box
        ref="boxRef"
        :scale="0.5"
        :color="0xFF00FF"
        :position="[-1, 1, 0]"
      />
    </ScrollControls>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SkyDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Sky } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas :tone-mapping-exposure="0.25">
    <TresPerspectiveCamera :position="[0, 0, 2000]" />
    <Sky />
    <OrbitControls
      :enable-pan="false"
      :enable-zoom="false"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SmokeDemo.vue
================================================
<script setup lang="ts">
import { Box, OrbitControls, Smoke } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { NoToneMapping, SRGBColorSpace } from 'three'

const gl = {
  clearColor: '#333',
  alpha: true,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}
</script>

<template>
  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <Suspense>
      <Smoke
        :segments="4"
        :width="1"
        :position="[-4, -2, 0]"
      />
    </Suspense>
    <Suspense>
      <Smoke
        :segments="4"
        :width="1"
        :position="[-4, 2, 0]"
      />
    </Suspense>
    <Suspense>
      <Smoke
        :segments="4"
        :width="1"
      />
    </Suspense>
    <Suspense>
      <Smoke
        :segments="4"
        :width="1"
        :position="[4, -2, 0]"
      />
    </Suspense>
    <Suspense>
      <Smoke
        :segments="4"
        :width="1"
        :position="[4, 2, 0]"
      />
    </Suspense>
    <Box :args="[2, 2]">
      <TresMeshToonMaterial color="#82DBC5" />
    </Box>
    <TresGridHelper :args="[10, 10]" />
    <TresAmbientLight :intensity="1" />
    <TresDirectionalLight
      :intensity="1"
      :position="[2, 2, 2]"
    />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SoftShadowsDemo.vue
================================================
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, SoftShadows } from '@tresjs/cientos'
import { Group, MeshPhongMaterial, SphereGeometry, Vector3 } from 'three'
import { onMounted, onUnmounted, shallowRef } from 'vue'

const sphereGeo = new SphereGeometry(0.3, 20, 20)
const sphereMat = new MeshPhongMaterial({ color: '#82dbc5' })
const spherePositions = Array.from({ length: 9 }).fill(null).map(() => new Vector3())
let ii = 0
for (const p of spherePositions) {
  p.x = ii * 0.5 - 2
  ii++
}

const spheres = shallowRef(new Group())
let intervalId: ReturnType<typeof setInterval>
let elapsed = 0
onMounted(() => {
  intervalId = setInterval(() => {
    let ii = 0
    elapsed += 1000 / 30
    for (const sphere of spheres.value.children) {
      ii += 0.2
      sphere.position.y = Math.sin(ii + elapsed * 0.001) ** 2 * 3 + 0.5
    }
  }, 1000 / 30)
})

onUnmounted(() => {
  clearInterval(intervalId)
})
</script>

<template>
  <TresCanvas :shadows="true" :shadowMap-enabled="true">
    <TresFog :args="['#FFFFFF', 5, 100]" />

    <OrbitControls />
    <TresPerspectiveCamera :position="[0, 7, -5]" :fov="60" />

    <TresAmbientLight color="#AAAAAA" :intensity="2" />
    <TresDirectionalLight
      color="#F0F6FF"
      :intensity="6"
      :position="[2, 8, 4]"
      :cast-shadow="true"
      :shadow-mapSize-width="1024"
      :shadow-mapSize-height="1024"
      :shadow-camera-far="20"
    />

    <SoftShadows />

    <TresMesh :position="[0, 1.5, 1]" :scale-y="3" :cast-shadow="true" :receive-shadow="true" name="column">
      <TresBoxGeometry />
      <TresMeshPhongMaterial color="#4f4f4f" />
    </TresMesh>

    <TresMesh :rotation-x="-Math.PI / 2" :receive-shadow="true" name="ground">
      <TresPlaneGeometry :args="[100, 100, 8, 8]" />
      <TresMeshPhongMaterial color="#fbb03b" />
    </TresMesh>

    <TresGroup ref="spheres" name="spheres">
      <TresMesh
        v-for="p, i of spherePositions"
        :key="i"
        :material="sphereMat"
        :geometry="sphereGeo"
        :position="p"
        :cast-shadow="true"
        :receive-shadow="true"
      />
    </TresGroup>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SparklesDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Sparkles, TorusKnot } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 0, 5]" />
    <TorusKnot :args="[1, 0.25, 128, 16]">
      <TresMeshBasicMaterial color="#222" />
      <Sparkles />
    </TorusKnot>
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SparklesDirectionalLightDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Sparkles, Sphere, Torus } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { shallowRef } from 'vue'

const lightRef = shallowRef()

function onLoop({ elapsed }: { elapsed: number }) {
  if (lightRef.value) {
    lightRef.value.position.x = Math.cos(elapsed) * 2.5
    lightRef.value.position.y = Math.sin(elapsed) * 2.5
  }
}
</script>

<template>
  <TresCanvas
    clear-color="#333"
    @loop="onLoop"
  >
    <TresPerspectiveCamera :position="[0, 0, 8]" />
    <TresDirectionalLight ref="lightRef">
      <Sphere
        color="white"
        :scale="0.1"
      />
    </TresDirectionalLight>
    <Torus :args="[1, 0.25, 16, 48]">
      <TresMeshBasicMaterial color="#222" />
      <Sparkles :directional-light="lightRef" />
    </Torus>
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SparklesMixDemo.vue
================================================
<script setup lang="ts">
import { Sparkles, Sphere } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { shallowRef } from 'vue'
import '@tresjs/leches/styles'

const lightRef = shallowRef()
const { value: mix } = useControls({
  mix: { value: 0, min: 0, max: 1, step: 0.01 },
})

function onLoop({ elapsed }: { elapsed: number }) {
  if (lightRef.value) {
    lightRef.value.position.x = Math.cos(elapsed) * 3
    lightRef.value.position.y = Math.sin(elapsed) * 3
  }
}
</script>

<template>
  <TresLeches class="top-0 important-left-4" />
  <TresCanvas
    clear-color="#333"
    @loop="onLoop"
  >
    <TresPerspectiveCamera :position="[-2.5, 0, 8]" />
    <TresDirectionalLight ref="lightRef">
      <Sphere
        color="white"
        :scale="0.1"
      />
    </TresDirectionalLight>
    <Sphere :args="[1, 16, 16]">
      <TresMeshBasicMaterial color="#222" />
      <Sparkles
        :directional-light="lightRef"
        :mix-alpha="mix"
        :mix-color="mix"
        :mix-offset="mix"
        :mix-size="mix"
        :mix-surface-distance="mix"
        :lifetime-sec="2"
        :sequence-alpha="[0.1, 1.0]"
        :sequence-surface-distance="[0.1, 0.5]"
      />
    </Sphere>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SparklesSequenceDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Sparkles, Sphere } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera :position="[0, 0, 8]" />
    <Sphere>
      <TresMeshBasicMaterial color="#222" />
      <Sparkles
        :sequence-alpha="[[0., 0.], [0.6, 1.0], [0.7, 0.0], [1.0, 1.0]]"
        :sequence-color="['yellow', 'white', 'orange', 'red', 'black']"
        :sequence-offset="[[0.7, [0, 0, 0]], [0.75, [0, 0.1, 0]], [1.0, [0, 0.5, 0]]]"
        :sequence-size="[[0.0, 0.0], [0.7, 1.0]]"
        :sequence-surface-distance="[[0.0, 0.0], [0.7, 1.0]]"
        :lifetime-sec="2.0"
        :size="2"
        :surface-distance="0.8"
        :mix-color="1.0"
      />
    </Sphere>
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/StageDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Stage } from '@tresjs/cientos'
import { type LoaderProto, TresCanvas, useLoader } from '@tresjs/core'
import type { Mesh, Object3D } from 'three'
import { type GLTF, GLTFLoader } from 'three-stdlib'

const scene = await useLoader(GLTFLoader as LoaderProto<GLTF>, 'https://raw.githubusercontent.com/Tresjs/assets/215208b4a54736965d525ab9c47d82dbfe4b2a02/models/gltf/suzanne/suzanne.glb') as unknown as { nodes: { Suzanne: Object3D } }
const suzanne = scene.nodes.Suzanne as Mesh
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[0, 5, 15]" />
    <OrbitControls make-default />
    <Stage
      :adjust-camera="0.05"
      :shadows="{ type: 'contact', color: '#012' }"
      :align="{ top: true, disableX: true }"
      :rotation-y="0.5"
    >
      <Suspense>
        <primitive
          :object="suzanne"
          :rotation="[5.6548, Math.PI, 0]"
          :position="[0, 0.90, 1]"
        >
          <TresMeshStandardMaterial color="#fbb03b" :metalness="1" :roughness="0" />
        </primitive>
      </Suspense>

      <TresMesh
        :position="[-1.75, 0.25, 1.25]"
        :scale="0.5"
      >
        <TresBoxGeometry />
        <TresMeshStandardMaterial color="#4f4f4f" />
      </TresMesh>

      <TresMesh :position="[-1.65, 1, -1.5]">
        <TresSphereGeometry />
        <TresMeshStandardMaterial color="#82dbc5" />
      </TresMesh>
    </Stage>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/StarsDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Stars } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { shallowRef } from 'vue'

const yRotation = shallowRef(0)

function onLoop({ delta }: { delta: number }) {
  yRotation.value += 0.02 * delta
}
</script>

<template>
  <TresCanvas
    clear-color="#333"
    @loop="onLoop"
  >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <Stars
      :rotation="[0, yRotation, 0]"
      :radius="50"
      :depth="50"
      :count="5000"
      :size="0.3"
      :size-attenuation="true"
    />
    <TresGridHelper :args="[4, 4]" />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SuperformulaDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Superformula } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#777">
    <Superformula
      :num-arms-b="24"
      :exp-b="[40, 30, 20]"
    >
      <TresMeshNormalMaterial />
    </Superformula>
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/SuperformulaLechesDemo.vue
================================================
<script setup lang="ts">
import { Superformula } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { AmbientLight, DirectionalLight, MeshPhongMaterial } from 'three'
import '@tresjs/leches/styles'

const { numArmsA, numArmsB, expA1 } = useControls({
  numArmsA: { value: 1, min: 1, max: 40, step: 1 },
  numArmsB: { value: 1, min: 1, max: 40, step: 0.1 },
  expA1: { value: 8, min: 4, max: 40, step: 0.01 },
})

const material = new MeshPhongMaterial({ color: '#fbb03b', shininess: 1000 })
const directionalLight = new DirectionalLight('white', 4)
directionalLight.position.set(1, 1, 1)
const ambientLight = new AmbientLight('pink', 1)
</script>

<template>
  <TresLeches class="important-top-4 important-left-4" />
  <TresCanvas clear-color="#777">
    <primitive :object="directionalLight" />
    <primitive :object="ambientLight" />
    <Superformula
      :position="[1.5, 0.7, 0]"
      :width-segments="128"
      :height-segments="128"
      :num-arms-a="numArmsA.value"
      :num-arms-b="numArmsB.value"
      :exp-a="[expA1.value, 8, 0]"
      :exp-b="[2, 1, 2]"
      color="orange"
    >
      <primitive :object="material" />
    </Superformula>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/Text3Demo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Text3D } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
import { ref } from 'vue'

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
  alpha: false,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}

const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'

const reactiveText = ref('You can edit me...')
</script>

<template>
  <div class="bg-gray-100 flex justify-center">
    <input
      v-model="reactiveText"
      class="p-2 m-2 rounded-md bg-white border border-gray-400 color-red"
    />
  </div>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
    <OrbitControls />
    <Suspense>
      <Text3D
        :text="reactiveText"
        :size="0.3"
        :font="fontPath"
        center
        :need-updates="true"
      >
        <TresMeshNormalMaterial />
      </Text3D>
    </Suspense>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/TransformControlsDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, TransformControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

import { TresLeches, useControls } from '@tresjs/leches'
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
import { ref, shallowReactive } from 'vue'
import '@tresjs/leches/styles'

const gl = {
  clearColor: '#201919',
  shadows: true,
  alpha: false,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}

const boxRef = ref()
const transformState = shallowReactive({
  showX: true,
  showY: true,
  showZ: true,
})

const { value: mode } = useControls({
  mode: {
    value: 'translate',
    options: [{
      text: 'Translate',
      value: 'translate',
    }, {
      text: 'Rotate',
      value: 'rotate',
    }, {
      text: 'Scale',
      value: 'scale',
    }],
  },
})
</script>

<template>
  <TresLeches class="top-0 important-left-4" />
  <TresCanvas
    v-bind="gl"
  >
    <TresPerspectiveCamera
      :position="[11, 11, 11]"
      :fov="45"
      :near="0.1"
      :far="1000"
      :look-at="[-8, 3, -3]"
    />
    <OrbitControls make-default />
    <TransformControls
      :object="boxRef"
      v-bind="transformState"
      :mode="mode"
    />
    <TresMesh
      ref="boxRef"
      :position="[0, 4, 0]"
      cast-shadow
    >
      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
      <TresMeshToonMaterial color="#FBB03B" />
    </TresMesh>
    <TresMesh
      :rotation="[-Math.PI / 2, 0, 0]"
      receive-shadow
    >
      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
      <TresMeshToonMaterial />
    </TresMesh>
    <TresAmbientLight :intensity="0.5" />
    <TresDirectionalLight
      :position="[0, 8, 4]"
      :intensity="1.5"
      cast-shadow
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/UseFBODemo.vue
================================================
<script setup lang="ts">
import { OrbitControls } from '@tresjs/cientos'
import type { TresObject } from '@tresjs/core'
import { TresCanvas } from '@tresjs/core'
import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
import { shallowRef } from 'vue'

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
  alpha: false,
  outputColorSpace: SRGBColorSpace,
  toneMapping: ACESFilmicToneMapping,
}

const torusRef = shallowRef<TresObject | null>(null)
const capsuleRef = shallowRef<TresObject | null>(null)

function onLoop({ elapsed }: { elapsed: number }) {
  if (!torusRef.value || !capsuleRef.value) { return }

  torusRef.value.rotation.x = elapsed * 0.745
  torusRef.value.rotation.y = elapsed * 0.361

  capsuleRef.value.rotation.x = elapsed * 0.471
  capsuleRef.value.rotation.z = elapsed * 0.632
}
</script>

<template>
  <TresCanvas
    v-bind="gl"
    @loop="onLoop"
  >
    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
    <OrbitControls />

    <TresGridHelper :args="[10, 10]" />

    <FboCube />

    <TresMesh
      ref="torusRef"
      :position="[3, 0, 0]"
    >
      <TresTorusGeometry :args="[1, 0.5, 16, 100]" />
      <TresMeshNormalMaterial />
    </TresMesh>

    <TresMesh
      ref="capsuleRef"
      :position="[-2, 0, 0]"
    >
      <TresCapsuleGeometry :args="[0.4, 1, 4, 8]" />
      <TresMeshNormalMaterial />
    </TresMesh>
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/UseFBXDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, useFBX } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { BasicShadowMap, Mesh, NoToneMapping, SRGBColorSpace } from 'three'
import { watchEffect } from 'vue'

const gl = {
  clearColor: '#82DBC5',
  shadows: true,
  alpha: false,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
}

const path = 'https://raw.githubusercontent.com/'
  + 'Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'

// Use the new reactive useFBX API
const { state: model } = useFBX(path)

// Apply transformations and shadows when model loads
watchEffect(() => {
  if (model.value) {
    model.value.scale.set(0.01, 0.01, 0.01)
    model.value.position.set(0, -1.6, 0)
    model.value.rotation.y = -Math.PI * 0.5

    // Enable shadows for all meshes
    model.value.traverse((child) => {
      if (child instanceof Mesh) {
        child.castShadow = true
      }
    })
  }
})
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
    <OrbitControls />
    <primitive v-if="model" :object="model" />
    <TresMesh
      :rotate-x="Math.PI * -0.5"
      :position-y="-2"
      receive-shadow
    >
      <TresPlaneGeometry :args="[40, 40]" />
      <TresMeshStandardMaterial :color="0xF7F7F7" />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
    <TresDirectionalLight
      :intensity="1"
      cast-shadow
      :position="[5, 10, 5]"
    />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/UseGLTFDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, useGLTF } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

const path = 'https://raw.githubusercontent.com/'
  + 'Tresjs/assets/main/models/gltf/blender-cube.glb'
const { state } = useGLTF(path)
</script>

<template>
  <TresCanvas clear-color="#FBB03B">
    <TresPerspectiveCamera :position="[3, 2, 5]" />
    <OrbitControls />

    <primitive v-if="state" :object="state?.scene" />

    <TresDirectionalLight
      :intensity="2"
      :position="[3, 3, 3]"
    />
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/UseSurfaceSamplerDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, useSurfaceSampler } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { ref, watch } from 'vue'

const torusRef = ref()
const instancesRef = ref()

watch(torusRef, (value) => {
  useSurfaceSampler(value, 50, instancesRef.value, 'color')
})
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
    <OrbitControls />

    <TresMesh ref="torusRef">
      <TresTorusGeometry />
    </TresMesh>

    <TresInstancedMesh
      ref="instancesRef"
      :args="[null!, null!, 1_000]"
    >
      <TresSphereGeometry :args="[0.1, 32, 32]" />
      <TresMeshNormalMaterial />
    </TresInstancedMesh>

    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/UseTextureDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, useTexture } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'

const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'
const { state: texture } = useTexture(path)
</script>

<template>
  <TresCanvas clear-color="#FBB03B">
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <OrbitControls />
    <TresMesh>
      <TresSphereGeometry />
      <TresMeshStandardMaterial :map="texture" />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/VideoTextureDemo.vue
================================================
<script setup lang="ts">
import { OrbitControls, Sphere, useVideoTexture } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { ref } from 'vue'

const exampleVideo = 'https://raw.githubusercontent.com/'
  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'
const texture = ref()
texture.value = await useVideoTexture(exampleVideo, { loop: false })
</script>

<template>
  <TresCanvas clear-color="#333">
    <TresPerspectiveCamera
      :position="[0, 5, 9]"
      :look-at="[0, 1, 0]"
    />
    <OrbitControls />
    <Sphere :position="[0, 2, 0]">
      <TresMeshBasicMaterial :map="texture" />
    </Sphere>
    <TresGridHelper />
    <TresAmbientLight />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/components/WobbleMaterialDemo.vue
================================================
<script setup lang="ts">
import { MeshWobbleMaterial, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <TresMesh>
      <TresTorusGeometry />
      <MeshWobbleMaterial
        color="orange"
        :speed="1"
        :factor="2"
      />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
    <TresDirectionalLight :position="[2, 2, 2]" />
    <OrbitControls />
  </TresCanvas>
</template>


================================================
FILE: docs/.vitepress/theme/index.ts
================================================
// https://vitepress.dev/guide/custom-theme
import Theme from 'vitepress/theme'
import TresLayout from './TresLayout.vue'
import './style.css'

import 'uno.css'

export default {
  ...Theme,
  Layout: TresLayout,
  enhanceApp(ctx) {
    Theme.enhanceApp(ctx)
    /* ctx.app.use(plausible) */
  },
}


================================================
FILE: docs/.vitepress/theme/style.css
================================================
:root {
  --vp-home-hero-name-color: #82dbc5;
  --vp-c-brand: #82dbc5;
  --vp-c-dark: #1f1f1e;
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: var(--vp-c-brand-light);
  --vp-button-brand-text: var(--vp-c-text-dark-1);
  --vp-button-brand-text: var(--vp-c-dark);
  --vp-button-brand-bg: var(--vp-c-brand);
  --vp-button-brand-hover-border: var(--vp-c-brand-light);
  --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
  --vp-button-brand-hover-text: var(--vp-c-dark);
  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
  --vp-button-brand-active-border: var(--vp-c-brand-light);
  --vp-button-brand-active-text: var(--vp-c-text-dark-1);
  --vp-button-brand-active-text: var(--vp-c-dark);
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);

  --vp-button-alt-border: var(--vp-c-gray-light-3);
  --vp-button-alt-text: var(--vp-c-text-light-1);
  --vp-button-alt-bg: var(--vp-c-gray-light-5);
  --vp-button-alt-hover-border: var(--vp-c-gray-light-3);
  --vp-button-alt-hover-text: var(--vp-c-text-light-1);
  --vp-button-alt-hover-bg: var(--vp-c-gray-light-4);
  --vp-button-alt-active-border: var(--vp-c-gray-light-3);
  --vp-button-alt-active-text: var(--vp-c-text-light-1);
  --vp-button-alt-active-bg: var(--vp-c-gray-light-3);
  --vp-button-alt-border: var(--vp-c-border);
  --vp-button-alt-text: var(--vp-c-neutral);
  --vp-button-alt-bg: var(--vp-c-mute);
  --vp-button-alt-hover-border: var(--vp-c-border);
  --vp-button-alt-hover-text: var(--vp-c-neutral);
  --vp-button-alt-hover-bg: var(--vp-c-mute-dark);
  --vp-button-alt-active-border: var(--vp-c-border);
  --vp-button-alt-active-text: var(--vp-c-neutral);
  --vp-button-alt-active-bg: var(--vp-c-mute-darker);

  --vp-button-sponsor-border: var(--vp-c-gray-light-3);
  --vp-button-sponsor-text: var(--vp-c-text-light-2);
}

.VPSidebar .link.active span {
  font-weight: bold;
}

.vp-doc a {
  text-decoration: dashed;
  font-weight: bold;
}

.VPButton.medium.brand {
  color: var(--vp-button-brand-text);
}
.VPButton.medium.alt {
  border-color: var(--vp-button-alt-border);
  color: var(--vp-button-alt-text);
  background-color: var(--vp-button-alt-bg);
}

.demo-scene {
  height: auto;
  margin: 2rem 0;
  overflow: hidden;
  aspect-ratio: 16/9;
  border-radius: 8px;
}


================================================
FILE: docs/api-examples.md
================================================
---
outline: deep
---

# Runtime API Examples

This page demonstrates usage of some of the runtime APIs provided by VitePress.

The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:

```md
<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>
```

<script setup>
import { useData } from 'vitepress'

const { site, theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>

## More

Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).


================================================
FILE: docs/component-list/components.ts
================================================
export default [
  {
    text: 'Abstractions',
    items: [
      { text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
      { text: 'Edges', link: '/guide/abstractions/edges' },
      { text: 'Text3D', link: '/guide/abstractions/text-3d' },
      { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
      { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
      { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },
      { text: 'Lensflare', link: '/guide/abstractions/lensflare' },
      { text: 'Reflector', link: '/guide/abstractions/reflector' },
      { text: 'GlobalAudio', link: '/guide/abstractions/global-audio' },
      { text: 'Fbo', link: '/guide/abstractions/fbo' },
      { text: 'useFBO', link: '/guide/abstractions/use-fbo' },
      {
        text: 'useSurfaceSampler',
        link: '/guide/abstractions/use-surface-sampler',
      },
      { text: 'Sampler', link: '/guide/abstractions/sampler' },
      { text: 'PositionalAudio', link: '/guide/abstractions/positional-audio' },
      { text: 'MarchingCubes', link: '/guide/abstractions/marching-cubes' },
      { text: 'Mask', link: '/guide/abstractions/mask' },
      { text: 'CubeCamera', link: '/guide/abstractions/cube-camera' },
      { text: 'GradientTexture', link: '/guide/abstractions/gradient-texture' },
      { text: 'ScreenSizer', link: '/guide/abstractions/screen-sizer' },
      { text: 'ScreenSpace', link: '/guide/abstractions/screen-space' },
      { text: 'Outline', link: '/guide/abstractions/outline' },
      { text: 'Image', link: '/guide/abstractions/image' },
      { text: 'Billboard', link: '/guide/abstractions/billboard' },
    ],
  },
  {
    text: 'Controls',
    items: [
      { text: 'OrbitControls', link: '/guide/controls/orbit-controls' },
      { text: 'CameraControls', link: '/guide/controls/camera-controls' },
      { text: 'TransformControls', link: '/guide/controls/transform-controls' },
      {
        text: 'PointerLockControls',
        link: '/guide/controls/pointer-lock-controls',
      },
      { text: 'KeyboardControls', link: '/guide/controls/keyboard-controls' },
      { text: 'ScrollControls', link: '/guide/controls/scroll-controls' },
      { text: 'MapControls', link: '/guide/controls/map-controls' },
      { text: 'Helper', link: '/guide/controls/helper' },
    ],
  },
  {
    text: 'Loaders',
    items: [
      { text: 'useProgress', link: '/guide/loaders/use-progress' },
      { text: 'useGLTF', link: '/guide/loaders/use-gltf' },
      { text: 'GLTFModel', link: '/guide/loaders/gltf-model' },
      { text: 'useTexture', link: '/guide/loaders/use-texture' },
      { text: 'useTextures', link: '/guide/loaders/use-textures' },
      { text: 'useFBX', link: '/guide/loaders/use-fbx' },
      { text: 'FBXModel', link: '/guide/loaders/fbx-model' },
      { text: 'useVideoTexture', link: '/guide/loaders/use-video-texture' },
      { text: 'useSVG', link: '/guide/loaders/use-svg' },
    ],
  },
  {
    text: 'Materials',
    collapsed: true,
    items: [
      { text: 'MeshReflectionMaterial', link: '/guide/materials/mesh-reflection-material' },
      { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
      { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
      {
        text: 'CustomShaderMaterial',
        link: '/guide/materials/custom-shader-material',
      },
      {
        text: 'HolographicMaterial',
        link: '/guide/materials/holographic-material',
      },
      {
        text: 'PointMaterial',
        link: '/guide/materials/point-material',
      },
      {
        text: 'MeshDiscardMaterial',
        link: '/guide/materials/mesh-discard-material',
      },
    ],
  },
  {
    text: 'Shapes',
    collapsed: true,
    items: [
      { text: 'Box', link: '/guide/shapes/box' },
      { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
      { text: 'Circle', link: '/guide/shapes/circle' },
      { text: 'Cone', link: '/guide/shapes/cone' },
      { text: 'CubicBezierLine', link: '/guide/shapes/cubic-bezier-line' },
      { text: 'Cylinder', link: '/guide/shapes/cylinder' },
      { text: 'Dodecahedron', link: '/guide/shapes/dodecahedron' },
      { text: 'Icosahedron', link: '/guide/shapes/icosahedron' },
      { text: 'Line2', link: '/guide/shapes/line2' },
      { text: 'Octahedron', link: '/guide/shapes/octahedron' },
      { text: 'Plane', link: '/guide/shapes/plane' },
      { text: 'QuadraticBezierLine', link: '/guide/shapes/quadratic-bezier-line' },
      { text: 'Ring', link: '/guide/shapes/ring' },
      { text: 'RoundedBox', link: '/guide/shapes/rounded-box' },
      { text: 'ScreenQuad', link: '/guide/shapes/screen-quad' },
      { text: 'Sphere', link: '/guide/shapes/sphere' },
      { text: 'Superformula', link: '/guide/shapes/superformula' },
      { text: 'Tetrahedron', link: '/guide/shapes/tetrahedron' },
      { text: 'Torus', link: '/guide/shapes/torus' },
      { text: 'TorusKnot', link: '/guide/shapes/torus-knot' },
      { text: 'Tube', link: '/guide/shapes/tube' },
    ],
  },
  {
    text: 'Staging',
    items: [
      { text: 'Backdrop', link: '/guide/staging/backdrop' },
      { text: 'Environment', link: '/guide/staging/environment' },
      { text: 'useEnvironment', link: '/guide/staging/use-environment' },
      { text: 'Sky', link: '/guide/staging/sky' },
      { text: 'Stars', link: '/guide/staging/stars' },
      { text: 'Smoke', link: '/guide/staging/smoke' },
      { text: 'AccumulativeShadows', link: '/guide/staging/accumulative-shadows' },
      { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
      { text: 'Precipitation', link: '/guide/staging/precipitation' },
      { text: 'Sparkles', link: '/guide/staging/sparkles' },
      { text: 'Ocean', link: '/guide/staging/ocean' },
      { text: 'Fit', link: '/guide/staging/fit' },
      { text: 'Align', link: '/guide/staging/align' },
      { text: 'SoftShadows', link: '/guide/staging/soft-shadows' },
      { text: 'Grid', link: '/guide/staging/grid' },
      { text: 'CircleShadow', link: '/guide/staging/circle-shadow' },
      { text: 'Bounds', link: '/guide/staging/bounds' },
      { text: 'RandomizedLights', link: '/guide/staging/randomized-lights' },
      { text: 'Stage', link: '/guide/staging/stage' },
    ],
  },
  {
    text: 'Misc',
    collapsed: true,
    items: [
      { text: 'Stats', link: '/guide/misc/stats' },
      { text: 'Html', link: '/guide/misc/html-component' },
      { text: 'StatsGl', link: '/guide/misc/stats-gl' },
      { text: 'useGLTFExporter', link: '/guide/misc/use-gltf-exporter' },
      { text: 'BakeShadows', link: '/guide/misc/bake-shadows' },
      { text: 'useIntersect', link: '/guide/misc/use-intersect' },
      { text: 'LOD', link: '/guide/misc/lod' },
    ],
  },
] as { text: string