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 `` 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 ================================================ ================================================ FILE: docs/.vitepress/theme/components/AccumulativeShadowsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/AlignDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/AnimatedSpriteCenterDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/AnimatedSpriteDefinitionsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/AnimatedSpriteDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/AnimatedSpriteNamedAnimationDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/BackdropDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/BakeShadowsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/BillboardDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/BoundsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/CameraControlsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/CatmullRomCurve3Demo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/CientosComponentListGridView/index.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/CircleShadowDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ContactShadowsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/CubeCameraDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/CubicBezierLineDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/CustomShaderMaterialDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/DocsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/EdgesDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/EnvironmentDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/EnvironmentPresetsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/FBXModelDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/FboCube.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/FboDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/Feather.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/FitDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/GLTFModelDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/GlassMaterialDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/GradientTextureDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/GridDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/HelperDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/HolographicMaterialDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/HtmlDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/HtmlLaptopDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/HtmlOccludeDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ImageDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/KeyboardControlsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/LODDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/LensflareDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/LeviosoDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/Line2Demo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/LoveVueThreeJS.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/MapControlsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/MarchingCubesDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/MaskDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/MeshReflectionMaterialDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/MouseParallaxDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/OceanDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/OrbitControlsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/OutlineDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/PBRTexturesDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/PointMaterialDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/PositionalAudioDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/PrecipitationBeamDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/PrecipitationDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/PrecipitationRainDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/PrecipitationStormDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/QuadraticBezierLineDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ReflectorDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/RoundedBoxDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SVGDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SamplerDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ScreenQuadDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ScreenSizerDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ScreenSpaceDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ScrollControlsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ScrollControlsHorizontalDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ScrollControlsPagesDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ScrollControlsProgressCameraDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ScrollControlsProgressDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/ScrollControlsSlotsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SkyDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SmokeDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SoftShadowsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SparklesDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SparklesDirectionalLightDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SparklesMixDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SparklesSequenceDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/StageDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/StarsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SuperformulaDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/SuperformulaLechesDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/Text3Demo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/TransformControlsDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/UseFBODemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/UseFBXDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/UseGLTFDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/UseSurfaceSamplerDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/UseTextureDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/VideoTextureDemo.vue ================================================ ================================================ FILE: docs/.vitepress/theme/components/WobbleMaterialDemo.vue ================================================ ================================================ 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 ## Results ### Theme Data
{{ theme }}
### Page Data
{{ page }}
### Page Frontmatter
{{ frontmatter }}
``` ## Results ### Theme Data
{{ theme }}
### Page Data
{{ page }}
### Page Frontmatter
{{ frontmatter }}
## 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, items: { text: string, link: string }[] }[] export const icons = { abstractions: '📦', controls: '🕹️', staging: '🎭', loaders: '⏳', materials: '👔', directives: '📢', shapes: '🔷', misc: '🛠️', } ================================================ FILE: docs/component-list/index.md ================================================ # Components ================================================ FILE: docs/guide/abstractions/animated-sprite.md ================================================ # AnimatedSprite `` displays 2D animations defined in a [texture atlas](https://en.wikipedia.org/wiki/Texture_atlas). A typical `` will use: * an image containing multiple sprites * a JSON atlas containing the individual sprite coordinates in the image ## Usage <<< @/.vitepress/theme/components/AnimatedSpriteDemo.vue{3,12-20} ::: warning Suspense `` loads resources asynchronously, so it must be wrapped in a ``. ::: ## Compiling an atlas In typical usage, `` requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture. * [example compiled texture](https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png) * [example JSON atlas](https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json) Compiling source images into a texture atlas is usually handled by third-party software. You may find [TexturePacker](https://www.codeandweb.com/texturepacker) useful. ## Without an atlas There may be cases where you don't want to supply an atlas to the `atlas` prop. To do so: * Compile your source images into a single image texture. * Space each sprite into equally sized columns and rows in the compiled image texture. * Ensure no extra padding has been added to the compiled image texture. * Set the `atlas` prop to number of columns, number of rows as `[number, number]`. ## Spritesheets in the wild ::: warning In the wild, spritesheets are often distributed without atlases and the images are often compiled by hand. It can be difficult or impossible to use these resources directly with ``. In many cases, it's advisable to recompile the spritesheet. ::: ### How to recompile an existing spritesheet image * Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP. * Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame. * Export layers as individual images. * Name the individual images according to the following pattern:
`[animation name][frame number].[extension]`
E.g., walk000.png, walk001.png, idle000.png, idle001.png * Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker. ## Props
NameDescriptionDefault
imagestring – URL of the image texture or an image dataURL. This prop is not reactive.
atlasstring | Atlasish
  • If string, the URL of the JSON atlas.
  • If number, the number of columns in the texture.
  • If [number, number], the number of columns/rows in the texture.
  • If AtlasData, the atlas as a JS object.

This prop is not reactive.

definitionsRecord<string, string> – Specify playback frame order and repeated frames (delays). definitions is a record where keys are atlas animation names and values are strings containing an animation definition.

A "animation definition" comma-separated string of frame numbers with optional parentheses-surrounded durations.

Here is how various definition strings convert to arrays of frames for playback:

  • "0,2,1" - [0,2,1], i.e., play frame 0, 2, then 1.
  • "2(10)" - [2,2,2,2,2,2,2,2,2,2], i.e., play from 2 10 times.
  • "1-4" - [1,2,3,4]
  • "10-5(2)" - [10,10,9,9,8,8,7,7,6,6,5,5]
  • "1-4(3),10(2)" - [1,1,1,2,2,2,3,3,3,4,4,4,10,10]
fpsnumber – Desired frames per second of the animation.30
loopboolean – Whether or not the animation should loop.true
animationstring | [number, number] | number – If string, name of the animation to play. If [number, number], start and end frames of the animation. If number, frame number to display.0
pausedboolean – Whether the animation is paused.false
reversedboolean – Whether to play the animation in reverse.false
flipXboolean – Whether the sprite should be flipped, left to right.false
resetOnEndboolean – For a non-looping animation, when the animation ends, whether to display the zeroth frame.false
asSpriteboolean – Whether to display the object as a THREE.Sprite. See THREE.Spritetrue
centerTresVector2 – Anchor point of the object. A value of [0.5, 0.5] corresponds to the center. [0, 0] is left, bottom.[0.5, 0.5]
alphaTestnumber – Alpha test value for the material. See THREE.Material.alphaTest0.0
depthTestboolean – Depth test value for the material. See THREE.Material.depthTesttrue
depthWriteboolean – Depth write value for the material. See THREE.Material.depthWritetrue
## Events | Event | Description | Argument | | - | - | - | | `frame` | Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped | `string` – Name of the newly displayed frame | | `end` | Emitted when the animation ends – `props.loop` must be set to `false` | `string` – Name of the ending frame | | `loop` | Emitted when the animation loops – `props.loop` must be set to `true` | `string` – Name of the frame at the end of the loop | ## `animation` The `:animation` prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display. ### Using named animations as `animation` When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas. `` uses those filenames to automatically group images into animations. Use either of the following naming conventions for your source images ... * `[animation name][frame number].[file_extension]` * `[animation name]_[frame number].[file_extension]` ... then `` will automatically make all `[animation name]` available for playback. Just pass `[animation name]` to the component's `:animation` prop. #### Example For our Cientos heart cartoon character animation, here's how the filenames map to animation names. | Filenames | Animation name | | - | - | | cientosIdle0000.png, cientosIdle0001.png, ... | cientosIdle | | cientosIdleToWalkTransition0000.png | cientosIdleToWalkTransition | | cientosWalk0000.png, cientosWalk0001.png, ... | cientosWalk | Try it out by clicking a few times on the character below: <<< @/.vitepress/theme/components/AnimatedSpriteNamedAnimationDemo.vue ## `definitions` You can supply an object to the `:definitions` prop. Any [named animation](#animation) can be a key. The value is a string that specifies frame order and delays. ### Demo In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the `:animation` prop is `'idle'`. But below, we've added a `:definitions` prop with this value for the `idle` key: ``` '0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)' ``` So, instead of playing images 0-5 sequentially, this animation will play instead: * `0-5` – Play all six images (`0-5`) of the animation normally. * `0(10), 1-2, 3(20), 4-5` – Play all six images again with a delay of ten frames at the bottom of the bounce (`0(10)`) and a delay of twenty frames at the top of the bounce (`3(20)`). * `0-5(3)` – Finally, play all six images of the animation with a delay of three frames each. <<< @/.vitepress/theme/components/AnimatedSpriteDefinitionsDemo.vue{17-19} ## `center` In addition to being the sprite's anchor point, the `:center` prop also controls how differently sized source images will "grow" and "shrink". Namely, they "grow out from" and "shrink towards" the center. Below is a simple animation containing differently sized source images. The anchor is visible at world position `0, 0, 0`. ================================================ FILE: docs/guide/abstractions/billboard.md ================================================ # Billboard Adds a `THREE.Group` that faces the camera. ## Usage <<< @/.vitepress/theme/components/BillboardDemo.vue ## Props | Prop | Description | Default | | :--------------- | :--------------------------------------------------- | ------------- | | `autoUpdate` | Whether the `` should face the camera automatically on every frame. | `true` | | `lockX` | Whether to lock the x-axis. | `false` | | `lockY` | Whether to lock the y-axis. | `false` | | `lockZ` | Whether to lock the z-axis. | `false` | ================================================ FILE: docs/guide/abstractions/cube-camera.md ================================================ # CubeCamera `` creates a `THREE.CubeCamera` and uses it to render an environment map of your scene. The environment map is then applied to component's children. `` makes its children invisible while rendering to the internal buffer so that they are not included in the reflection. ## Usage <<< @/.vitepress/theme/components/CubeCameraDemo.vue ## Props | Prop | Description | Default | | :--------------- | :--------------------------------------------------- | ------------- | | `frames` | Number of frames to render. Set to `1` for a static scene. `Infinity` to update continuously. | `Infinity` | | `resolution` | Resolution of the FBO | `255` | | `near` | Camera near | `0.1` | | `far` | Camera far | `1000` | | `envMap` | Custom environment map that is temporarily set as the scene's background | | | `fog` | Custom fog that is temporarily set as the scene's fog | | ================================================ FILE: docs/guide/abstractions/edges.md ================================================ # Edges The `cientos` package provides an abstraction of [EdgesGeometry](https://threejs.org/docs/#api/en/geometries/EdgesGeometry) from Three.js, `` is specifically designed for rendering visible edges of objects in a scene graph. This enhances the visual quality by highlighting contours and providing a stylized appearance which contributes to the artistic aspect of 3D visualizations. ## Usage <<< @/.vitepress/theme/components/EdgesDemo.vue The `` component is easy to set up as it automatically derives geometry from its parent. You can simply wrap it around any [Object3D](https://threejs.org/docs/#api/en/core/Object3D), [Mesh](https://threejs.org/docs/#api/en/objects/Mesh), or [primitive](https://docs.tresjs.org/advanced/primitive.html) to automatically apply edge rendering. You can provide a custom material to ``. When a custom material is used, the color prop has no effect. *(see code bellow)* ```vue ``` ## Props `` is based on [LineSegments](https://threejs.org/docs/#api/en/objects/LineSegments) & [Line](https://threejs.org/docs/#api/en/objects/Line) and supports all of its props. | Prop | Description | Default | | :---------------- | :--------------------------------------------------- | ------------------------- | | **color** | `THREE.Color` — Color of the edges.
More informations : [TresColor](https://docs.tresjs.org/api/instances-arguments-and-props.html#colors) — [THREE.Color](https://threejs.org/docs/#api/en/math/Color) | `#ff0000` | | **threshold** | `number` — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value | `1` | ## Exposed properties | Event | Description | | :---------- | :--------------------------------------------------------------- | | `instance` | Instance reference — Inheritance of [LineSegments](https://threejs.org/docs/#api/en/objects/LineSegments).| ```typescript{1} const edgesRef = shallowRef(null) console.log(edgesRef.value.instance) // instance properties ``` ```vue{2} ``` ================================================ FILE: docs/guide/abstractions/fbo.md ================================================ # Fbo An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call. Cientos provides an `` component make it easy to use FBOs in your application. ## Usage <<< @/.vitepress/theme/components/FboDemo.vue{3,15,48-51,58} ## Props | Prop | Description | Default | | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | | **`width`** | `number` - The width of the FBO. | Width of the canvas | | **`height`** | `number` - the height of the FBO | Height of the canvas | | **`depth`** | `boolean` - Whether or not the FBO should render the depth to a [`depthTexture`](https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture). | `false` | | **`settings`** | `WebGLRenderTargetOptions` - Every other configuration property for the [`WebGLRenderTarget` class](https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget) | `{}` | | **`autoRender`** | `boolean` - Whether to automatically render the FBO on the default scene. | `true` | ================================================ FILE: docs/guide/abstractions/global-audio.md ================================================ # GlobalAudio The `cientos` package provides a `` component that serves to easily add a global sound to your scene. Reference: [Audio](https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio) ## Usage ```vue{3,9} ``` *The `src` prop is required ## Props | Prop | Description | Default | | :------------- | :------------------------------------------------------- | --------------------- | | `src` | Path to your audio file | | | `playTrigger` | Id of the DOM element that triggers the play/pause state | `renderer.domElement` | | `stopTrigger` | Id of the DOM element that triggers the stop state | | | `loop` | If the audio must be replayed when ends | `false` | | `volume` | Volume of the audio | `0.5` | | `playbackRate` | PlaybackRate of the audio | `1` | ## Events | Event | Description | | :---------- | :--------------------------------------------------------------- | | `isPlaying` | Dispatched when the Audio change its state (play, pause or stop) | ================================================ FILE: docs/guide/abstractions/gradient-texture.md ================================================ # GradientTexture `` creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's `map` by default. ## Usage <<< @/.vitepress/theme/components/GradientTextureDemo.vue ## Props | Prop | Description | Default | | :--------------- | :--------------------------------------------------- | ------------- | | `stops` | A `number[]` of values between `0` and `1` representing the color positions in the gradient. `stops.length` should match `color.length`. | | | `colors` | A `THREE.ColorRepresentation[]` representing the colors in the gradient. | | | `attach` | Where the component should be attached within its parent. | `'map'` | | `height` | Height of the canvas used to draw the gradient. | `1024` | | `width` | Width of the canvas used to draw the gradient. | `16` | | `type` | `'linear' \| 'radial'` Type of gradient to draw. | `'linear'` | | `innerCircleRadius` | Radius of the inner circle of a radial gradient. | `0` | | `outerCircleRadius` | Radius of the outer circle of a radial gradient. | `'auto'` | ================================================ FILE: docs/guide/abstractions/image.md ================================================ # Image `` is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry. ## Usage <<< @/.vitepress/theme/components/ImageDemo.vue ## Props ::: info `` is a THREE.Mesh and most Mesh attributes can be used as props on the component. ::: | Prop | Description | Default | | :--------------- | :--------------------------------------------------- | ------------- | | `segments` | Number of divisions in the default geometry. | `1` | | `scale` | Scale of the geometry. `number \| [number, number]` | `1` | | `color` | Color multiplied into the image texture. | `'white'` | | `zoom` | Shrinks or enlarges the image texture. | `1` | | `radius` | Border radius applied to the image texture. (Intended for rectangular geometries. Use with `transparent`.) | `0` | | `grayscale` | Power of grayscale effect. 0 is off. 1 is full grayscale. | `0` | | `toneMapped` | Whether this material is tone mapped according to the renderers toneMapping settings. [See THREE.material.tonemapped](https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped) | `0` | | `transparent` | Whether the image material should be transparent. [See THREE.material.transparent](https://threejs.org/docs/?q=material#api/en/materials/Material.transparent) | `false` | | `transparent` | Whether the image material should be transparent. [See THREE.material.transparent](https://threejs.org/docs/?q=material#api/en/materials/Material.transparent) | `false` | | `opacity` | Opacity of the image material. [See THREE.material.transparent](https://threejs.org/docs/?q=material#api/en/materials/Material.transparent) | `1` | | `side` | THREE.Side of the image material. [See THREE.material.side](https://threejs.org/docs/?q=material#api/en/materials/Material.side) | `FrontSide` | | `texture` | Image texture to display on the geometry. | | | `url` | Image URL to load and display on the geometry. | | ================================================ FILE: docs/guide/abstractions/lensflare.md ================================================ # Lensflare `` wraps the [three.js Lensflare](https://threejs.org/docs/#examples/en/objects/Lensflare). ## Usage ```vue{3,9} ``` ## Props | Name | Description | Default | | :--- | :---------- | :------ | | **scale** | `number` – scale of the lensflare | `1.0` | | **elements** | `Partial<LensflareElementProps>[]` – array of lensflare element properties | `undefined` | | **seed** | `number` – random seed for generating random seeded elements | `undefined` | | **seedProps** | `SeedProps[]` – specifications for generating random seeded elements | `undefined` | | **color** | `TresColor` – default color of lensflare elements | `undefined` | | **distance** | `number` – default distance of lensflare elements from flare center | `undefined` | | **size** | `number` – default size of lensflare elements | `undefined` | | **texture** | `Texture string[]` – default texture of lensflare elements | `undefined` | ## `elements` You can specify individual lensflare element properties directly using the component's `elements` prop. The `elements` prop expects an instance of `(Partial)[]`. Every object in `elements` may have any (or none) of the following properties. | Name | Description | | :----------- | :---------------------------------------------------------------------------- | | **texture** | `string \| Texture` - an image URL or texture to use on the lensflare element | | **color** | `TresColor` - color of the lensflare element | | **distance** | `number` - distance of the lensflare element from the lensflare center | | **size** | `number` - size of the lensflare element | ## `seed` Adding a `seed` prop to a component enables seeded random element generation. The `seed` prop is used as the "seed" in a [pseudorandom number generator (PRNG)](https://en.wikipedia.org/wiki/Pseudorandom_number_generator). The PRNG is in turn used to build lensflare elements, by selecting values from an array of `SeedProps`. ::: info If you set a `seed` but not `seedProps`, the component will fall back to the default, built-in `SeedProps[]`. ::: ### Example ```vue ``` Below, the results of setting `seedRef.value` to `0`, `1`, `2`, `3`, `4`, respectively. ![Lensflare seeds 0-4](/cientos/lensflare_seeds.png) ## `seedProps` Adding a `seedProps` prop to the component enables seeded random element generation. The `seedProps` prop expects an instance of `SeedProps[]`. It specifies rules and acceptable values for creating random lensflare elements. Every element in `seedProps` has this shape. | Name | Description | Required | | :----------- | :--------------------------------------------------------------------------------------------------------------------------------- | -------- | | **texture** | `string[]` - array of 1 or more image URLs; a single texture will be selected per generated element | yes | | **color** | `TresColor[]` - array of 1 or more colors; a single color will be selected per generated element | yes | | **distance** | `[number, number]` - minimum and maximum allowable distance from the flare center | yes | | **size** | `[number, number]` - minimum and maximum allowable size | yes | | **length** | `[number, number]` - minimum and maximum allowable number of elements to generate | yes | | **seed** | `number` - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed | no | ::: info If you set `seedProps` but not `seed`, the component will fall back to a default `seed` of `0`. ::: ## Random elements and non-random properties `` was designed to make it easy to get a lensflare on screen. You can simply add the component with no props and the component will generate seeded random lensflare elements. ```vue ``` ### Non-random properties You can provide a list of lensflare element properties using the [`elements`](#elements) prop. ```vue ``` This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – `distance`, `size`, `texture` – will be filled in by the built-in defaults in this case. You can also provide default props which will overwrite random generated props. ```vue ``` Since `elements` is not defined here, the component will generate random lensflare elements. The specified `color` prop – "red" – will overwrite the color property of the generated lensflare elements. See [precedence](#precedence) for details about how properties are filled in. ### Random elements You can let the component generate random elements ... ... by not adding an [`elements` prop](#elements) ```vue ``` ... by adding a [`seed` prop](#seed) ```vue ``` ... by adding a [`seedProps` prop](#seedprops) ```vue ``` ### Mixing random elements and non-random properties You can mix your own properties and random elements. ```vue ``` Here, both `elements` and `seed` are defined. The component will generate random elements and overwrite their properties with the contents of `elements`, according to the [order of precedence](#precedence). :::info When mixing random elements with `elements`, the final number of lensflare elements equals whichever is **larger**, the length of the array of generated random elements or the length of `elements`. ::: ### Precedence If more than one source sets the same property on a given element, the following order of precendence is used. Higher in the list (lower number) equals higher precendence. 1. `elements` 2. `color`, `distance`, `size`, `texture` – default element properties 3. `seed`, `seedProps` – generated random elements 4. built-in default element properties ::: info If `elements`, `seed`, and `seedProps` are all undefined, a `seed` of `0` and built-in default `seedProps` will be used to generate the lensflare elements. ::: :::details Precedence example Here's an example of precedence. Assume this is in our vue template. ```vue ``` `seed` is defined, so the component will produce random elements. Assume the random element generator produces this, based on `seed`: ```js [ { color: 'white', distance: 0, size: 1024, texture: 'http://example.net/rays.png', }, { color: 'white', distance: 1, size: 512, texture: 'http://example.net/circle.png', }, { color: 'white', distance: 2, size: 512, texture: 'http://example.net/circle.png', }, ] ``` When random elements are mixed with `elements`, the final number of elements in the lensflare is determined by whichever is longer. Here, `elements` contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements. Therefore, resulting lensflare will have 3 elements. The resulting 3 lensflare elements will have the following properties, from the following sources: ```js [ { color: 'yellow', // from `elements` distance: 0, // from random element generator size: 512, // from `elements` texture: 'http://example.net/circle.png', // from `elements` }, { color: 'red', // from component prop `color` distance: 0.5, // from `elements` size: 256, // from component prop `size` texture: 'http://example.net/ring.png', // from component prop `texture` }, { color: 'red', // from component prop `color` distance: 2, // from random element generator size: 256, // from component prop `size` texture: 'http://example.net/ring.png', // from component prop `texture` }, ] ``` ::: ================================================ FILE: docs/guide/abstractions/levioso.md ================================================ # Levioso (Float) ![Leviosa](https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif) The `cientos` package provides a `` wrapper that makes its content … float, just like Magic 🪄✨ ## Usage <<< @/.vitepress/theme/components/Feather.vue ## Props | Prop | Description | Default | | :--------------- | :--------------------------------------------------- | ------------- | | `speed` | Floating speed, higher it rocks more 🤘. | `1` | | `rotationFactor` | Factor for Euler rotation. | `1` | | `floatFactor` | Factor for Up/down movement. | `1` | | `range` | Range of y-axis values the object will float within. | `[-0.1, 0.1]` | ================================================ FILE: docs/guide/abstractions/marching-cubes.md ================================================ # MarchingCubes `` is a wrapper around [THREE's Marching Cubes](https://threejs.org/examples/#webgl_marchingcubes). It includes 3 components: * `` – container element for ``s and ``s * `` - an individual metaball * `` – optional bounding plane that interacts with the metaballs ## Usage <<< @/.vitepress/theme/components/MarchingCubesDemo.vue ## Props | Prop | Description | Default | | :----| :---------- | ------- | | `resolution` | Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory. | `28` | | `maxPolyCount` | Maximum number of polygons to generate. | `10000` | | `enableUvs` | Whether UVs are enabled. | `false` | | `enableColors` | Whether vertex colors are enabled. | `false` | ## `` Props | Prop | Description | Default | | :----| :---------- | ------- | | `strength` | How strongly this cube affects the marching cube field. | `0.5` | | `subtract` | How quickly strength moves to `0` over distance. | `12` | ## `` Props | Prop | Description | Default | | :----| :---------- | ------- | | `planeType` | Which axis the plane appears on. `'x' \| 'y' \| 'z'` | `'x'` | | `strength` | How strongly this plane affects the marching cube field. | `0.5` | | `subtract` | How quickly strength moves to `0` over distance. | `12` | ================================================ FILE: docs/guide/abstractions/mask.md ================================================ # Mask `` uses the stencil buffer to cut out areas of the screen. ::: warning To use `` you *must* add `:stencil="true"` to your ``. `` relies on the [stencil buffer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer). In recent versions of THREE.js, by default, the stencil buffer is not created. ::: ## Usage <<< @/.vitepress/theme/components/MaskDemo.vue ## Props | Prop | Description | Default | | :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | | **`id`** | Id of the stencil buffer to use. Each mask must have a `number` id. Multiple masks can refer to the same id. | | | **`colorWrite`** | Whether the colors of the mask's own material will leak through. | `false` | | **`depthWrite`** | Whether the depth of the mask's own material will leak through. | `false` | ================================================ FILE: docs/guide/abstractions/mouse-parallax.md ================================================ # MouseParallax `` is a component that allows you to easily create a [parallax](https://en.wikipedia.org/wiki/Parallax) effect. The camera will update automatically according to the mouse position. ## Usage You only need to import it and add it to your template as ``. Additionally, you can pass the following props: `factor` is a number to increase the movement range of the camera. This could be an array of two values corresponding to the x and y values, in that order: `:factor=[x,y]`. `ease` is a number that smooths the movement. This could be an array of two values corresponding to the x and y values, in that order: `:ease=[x,y]`. `local` is a boolean that enables movement based on the position of the mouse on the canvas rather than the window. <<< @/.vitepress/theme/components/MouseParallaxDemo.vue{3,15-18} ## Props | Prop | Description | Default | | :----------- | :-------------------------------------------------------------------------- | ------- | | **disabled** | Enable or disable the effect | false | | **factor** | Increase the range of the parallax | 2.5 | | **ease** | Increase the camera movement speed | 0.1 | | **local** | Whether the mouse coordinates are calculated from the element or the window | false | ================================================ FILE: docs/guide/abstractions/outline.md ================================================ # Outline `` creates an inverted-hull outline using its parent's geometry. Supported parents are `` and ``. ## Usage <<< @/.vitepress/theme/components/OutlineDemo.vue ## Props | Props | Description | Default | |--------------|--------------------------------------------------------------------| ------- | | color | Outline color | `'black'` | | screenspace | Whether line thickness is independent of zoom | `false` | | opacity | Outline opacity | `1` | | transparent | Outline transparency | `false` | | thickness | Outline thickness | `0.05` | | angle | Geometry crease angle (`0` is no crease). See [BufferGeometryUtils.toCreasedNormals](https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals) | `Math.PI` | ================================================ FILE: docs/guide/abstractions/positional-audio.md ================================================ # PositionalAudio --- The `cientos` package provides an abstraction of the [PositionalAudio](https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio), `` is an object specifically designed for controlling sounds in a scene graph space. This allows, for the simulation of various audio environments, creating a more immersive user experience. `` includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the [PositionalAudioHelper](https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper) class. ## Usage The `` component is very simple to set up and use, allowing you to bring your 3D scenes to life. All you need to do is call the `` component and set the `url`. It must be wrapped around the `` component to enable it to load your audio asynchronously. 💥 ```vue ``` :::warning AudioContext is authorised when an user gesture has been made on the page. `:autoplay="true"` cannot be activated if no user gesture has been made previously (https://goo.gl/7K7WLu). If you are sure that there will be a user gesture before your `` component appears/is created, you can directly add `:ready="true"` and `autoplay="true"` for a direct launch. ::: ## How does it work? ## Props | Prop | Description | Default | | :---------------- | :--------------------------------------------------- | ------------------------- | | **url** | `string` - **required** — The path or URL to the file. | | | **helper** | `boolean` — Selects whether helper mode is enabled.
*(Useful for visualising the angle of sound propagation)* | `false` | | **distance** | `number` — The distance at which the volume reduction starts taking effect. ***A non-negative number.*** | `1` | | **ready** | `boolean` — Tells `` that `AudioContext` is authorised because an user gesture has been made on the page. This is imperative, as `autoplay` cannot be activated if no user gesture has been made previously (https://goo.gl/7K7WLu).
| `false` | | **autoplay** | `boolean` — Selects whether the audio is launched automatically. Please refer to the `ready` prop for a better understanding of how to use autoplay. | `false` | | **loop** | `boolean` — Specifies whether the audio should loop. | `false` | | **innerAngle** | `number` — A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction. | `360` | | **outerAngle** | `number` — A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of `outerGain` prop. | `0` | | **outerGain** | `number` — A parameter for directional audio sources, this is the amount of volume reduction outside of the `outerAngle` prop. When the value is `0` no sound can be heard. | `0` | ## Exposed properties | Event | Description | | :---------- | :--------------------------------------------------------------- | | `instance` | Instance reference — Inheritance of [PositionalAudio](https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio).| | `play()` | Play audio — *Cannot be fired if audio is already running.* | | `pause()` | Pause audio — *Cannot be fired if audio is already paused.* | | `stop()` | Stop audio — *Cannot be fired if audio is already stopped.* | | `dispose()` | Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists). | ```typescript{1,3,8} const positionalAudioRef = shallowRef(null) console.log(positionalAudioRef.value.instance) // instance properties const handlerAudio = (action: string) => { if (!positionalAudioRef.value) return const { play, pause, stop } = positionalAudioRef.value if (action === 'play') play() else if (action === 'pause') pause() else if (action === 'stop') stop() } ``` ```vue{2-4,9} ``` ## Events | Event | Description | | :---------- | :--------------------------------------------------------------- | | `is-playing` | Triggered when the audio changes its state (play, pause, or stop)
`@is-playing="(e) => yourIsPlayingRef = e"` | ================================================ FILE: docs/guide/abstractions/reflector.md ================================================ # Reflector The `cientos` package provides an abstraction of the [Reflector class](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js), which creates a Mesh showing a real-time reflection of your scene. This Mesh extends from `Mesh` so all the default props can be passed as well: ## Usage <<< @/.vitepress/theme/components/ReflectorDemo.vue{6,26-32} ## Props | Prop | Description | Default | | :---------------- | :--------------------------------------------------- | ------------------------- | | **color** | The base color that's combine with the mirror effect | '#333' | | **textureWidth** | the width of the texture to render on the mirror | 512 | | **textureHeight** | the height of the texture to render on the mirror | 512 | | **clipBias** | to use the clipBias property | 0 | | **multisample** | how many samplers will be render | 4 | | **shader** | The texture of the smoke. | Reflector.ReflectorShader | ::: warning All the props except the `color`, are not reactive ::: ## Custom mirror effect For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders: ```vue{2,4-6,15} ``` ### Mouse buttons | Button to assign | Options | Default | | ----------------------- | -------------------------------------------------------------- | --------------------------------------------------------------- | | `mouseButtons.left` | `ROTATE` \| `TRUCK` \| `OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE` | `ROTATE` | | `mouseButtons.right` | `ROTATE` \| `TRUCK` \| `OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE` | `TRUCK` | | `mouseButtons.wheel` ¹ | `ROTATE` \| `TRUCK` \| `OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE` | `DOLLY` for Perspective camera, `ZOOM` for Orthographic camera. | | `mouseButtons.middle` ² | `ROTATE` \| `TRUCK` \| `OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE` | `DOLLY` | 1. Mouse wheel event for scroll "up/down", on mac "up/down/left/right". 2. Mouse wheel "button" click event. ### Touches | Fingers to assign | Options | Default | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | | `touches.one` | `TOUCH_ROTATE` \| `TOUCH_TRUCK` \| `TOUCH_OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE` | `TOUCH_ROTATE` | | `touches.two` | `TOUCH_DOLLY_TRUCK` \| `TOUCH_DOLLY_OFFSET` \| `TOUCH_DOLLY_ROTATE` \| `TOUCH_ZOOM_TRUCK` \| `TOUCH_ZOOM_OFFSET` \| `TOUCH_ZOOM_ROTATE` \| `TOUCH_DOLLY` \| `TOUCH_ZOOM` \| `TOUCH_ROTATE` \| `TOUCH_TRUCK` \| `TOUCH_OFFSET` \| `NONE` | `TOUCH_DOLLY_TRUCK` for Perspective camera, `TOUCH_ZOOM_TRUCK` for Othographic camera. | | `touches.three` | `TOUCH_DOLLY_TRUCK` \| `TOUCH_DOLLY_OFFSET` \| `TOUCH_DOLLY_ROTATE` \| `TOUCH_ZOOM_TRUCK` \| `TOUCH_ZOOM_OFFSET` \| `TOUCH_ZOOM_ROTATE` \| `TOUCH_ROTATE` \| `TOUCH_TRUCK` \| `TOUCH_OFFSET` \| `NONE` | `TOUCH_TRUCK` | ## Events ```vue ``` | Event | Description | | :--------- | :-------------------------------------------- | | **start** | Dispatched when the control starts to change. | | **change** | Dispatched when the control changes. | | **end** | Dispatched when the control ends to change. | ================================================ FILE: docs/guide/controls/helper.md ================================================ # Helper `` handles instantiation, updates, and removal/disposal of THREE Helpers. ## Usage <<< @/.vitepress/theme/components/HelperDemo.vue ## Props | Prop | Description | Default | | :------------------ | :-------------------------------------------------------------------------------------------- | ----------- | | **type** | Helper constructor - required | | | **args** | Helper constructor args | `[]` | ================================================ FILE: docs/guide/controls/keyboard-controls.md ================================================ # KeyboardControls `` is a simple keyboard controller for the camera. The camera's movements are bound to: * WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards * Arrow keys ::: info `` uses `` under the hood. You can use [`` props and events](pointer-lock-controls#props). ::: ## Usage ```vue{3,10} ``` ::: warning You must add a `` to your scene before adding ``. ::: ## Props | Prop | Description | Default | | :-------------- | :----------------------------------- | ------- | | **moveSpeed** | Speed movement. | 0.2 | | **makeDefault** | If `true`, the controls will be set as the default controls for the scene. | `true` | | **camera** | The camera to control. | `undefined` | | **domElement** | The DOM element to listen to. | `undefined` | | **selector** | Accept an id element as string. If set, the new element will be used as the trigger | `undefined` | ## Events ```vue ``` | Event | Description | | :--------- | :--------------------------------------------------------------- | | **isLock** | Return `true` if "lock", `false` if "unlock" events are triggered. | | **change** | Dispatched when the control changes. | ================================================ FILE: docs/guide/controls/map-controls.md ================================================ # MapControls [MapControls](https://threejs.org/docs/index.html?q=controls#examples/en/controls/MapControls) similar to OrbitControls, this control is intended for transforming a camera over a map from bird's eye perspective, but uses a specific preset for mouse/touch interaction and disables screen space panning by default. However, as it is not part of the core of ThreeJS, to use it you would need to import it from the `three/examples/jsm/controls/MapControls` module. Here is where the fancy part begins. ✨ The `cientos` package provides a component called ``, which is a wrapper of the `MapControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module. The nicest part? You don't need to extend the catalog or pass any arguments. It just works. 💯 ## Usage <<< @/.vitepress/theme/components/MapControlsDemo.vue{3,9} ::: warning Is really important that the Perspective camera is set first in the canvas. Otherwise might break. ::: ## Props | Prop | Description | Default | | :---------------- | :--------------------------------------------------------------------------------------------------------------- | ----------- | | **makeDefault** | If `true`, the controls will be set as the default controls for the scene. | `false` | | **camera** | The camera to control. | `undefined` | | **domElement** | The dom element to listen to. | `undefined` | ================================================ FILE: docs/guide/controls/orbit-controls.md ================================================ # OrbitControls [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is a camera controller that allows you to orbit around a target. It's a great way to explore your scene. However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/examples/jsm/controls/OrbitControls` module. Here is where the fancy part begins. ✨ The `cientos` package provides a component called `` that is a wrapper of the `OrbitControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module. The nicest part? You don't need to extend the catalog or pass any arguments. It just works. 💯 ## Usage <<< @/.vitepress/theme/components/OrbitControlsDemo.vue{3,9} ::: warning Is really important that the Perspective camera is set first in the canvas. Otherwise might break. ::: ## Props | Prop | Description | Default | | :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | **makeDefault** | If `true`, the controls will be set as the default controls for the scene. | `false` | | **camera** | The camera to control. | `undefined` | | **domElement** | The dom element to listen to. | `undefined` | | **target** | The target to orbit around. | `undefined` | | **enableDamping** | If `true`, the controls will use damping (inertia), which can be used to give a sense of weight to the controls. | `true` | | **dampingFactor** | The damping inertia used if `.enableDamping` is set to true. | `0.05` | | **autoRotate** | Set to true to automatically rotate around the target. | `false` | | **autoRotateSpeed** | How fast to rotate around the target if `.autoRotate` is true. | `2` | | **enablePan** | Whether to enable panning. | `true` | | **keyPanSpeed** | How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress. | `7.0` | | **keys** | This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys. | `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }` | | **maxAzimuthAngle** | How far you can orbit horizontally, upper limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity. | `Infinity` | | **minAzimuthAngle** | How far you can orbit horizontally, lower limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is - Infinity. | `-Infinity` | | **maxPolarAngle** | How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI. | `Math.PI` | | **minPolarAngle** | How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0. | `0` | | **minDistance** | The minimum distance of the camera to the target. Default is 0. | `0` | | **maxDistance** | The maximum distance of the camera to the target. Default is Infinity. | `Infinity` | | **minZoom** | The minimum field of view angle, in radians. Default is 0. | `0` | | **maxZoom** | The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity. | `Infinity` | | **touches** | This object contains references to the touch actions used by the controls. | `{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }` | | **mouseButtons** | This object contains references to the mouse actions used by the controls. LEFT: Rotate around the target, MIDDLE: Zoom the camera, RIGHT: Pan the camera. | `{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }` | | - | - | | **enableZoom** | Whether to enable zooming. | `true` | | **zoomSpeed** | How fast to zoom in and out. Default is 1. | `1` | | **enableRotate** | Whether to enable rotating. | `true` | | **rotateSpeed** | How fast to rotate around the target. Default is 1. | `1` | ## Events ```vue ``` | Event | Description | | :--------- | :-------------------------------------------- | | **start** | Dispatched when the control starts to change. | | **change** | Dispatched when the control changes. | | **end** | Dispatched when the control ends to change. | ================================================ FILE: docs/guide/controls/pointer-lock-controls.md ================================================ # PointerLockControls [PointerLockControls](https://threejs.org/docs/index.html?q=pointe#examples/en/controls/PointerLockControls) is a camera controller that allows you to capture the mouse movement and simulate a first person camera. It is a perfect choice for first person 3D games. However, as it is not part of the core of ThreeJS, to use it you would need to import it from the `three/examples/jsm/controls/PointerLockControls` module. Here is where the fancy part begins. ✨ The `cientos` package provides a component called ``, which is a wrapper of the `PointerLockControls` from the [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module. The nicest part? You don't need to extend the catalog or pass any arguments. It just works. 💯 ::: warning This control uses the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API), the same rules are applied, for example, you need to interact with the browser to "lock" or start the event. In addition, you need to wait 1 second between canceling and re-starting the event ::: ## Usage ```vue{4} ``` Or using your own HTML element to trigger the event ```vue{3} ``` ::: warning Is really important that the Perspective camera is set first in the canvas. Otherwise might break. ::: ## Props | Prop | Description | Default | | :-------------- | :---------------------------------------------------------------------------------------- | ----------- | | **makeDefault** | If `true`, the controls will be set as the default controls for the scene. | `false` | | **camera** | The camera to control. | `undefined` | | **domElement** | The dom element to listen to. | `undefined` | | **selector** | Accept an id element as string, if it is set, the new element will be used as the trigger | `undefined` | ## Events ```vue ``` | Event | Description | | :--------- | :--------------------------------------------------------------- | | **isLock** | Return `true` if "lock", `false` if "unlock" events are trigger. | | **change** | Dispatched when the control changes. | ================================================ FILE: docs/guide/controls/scroll-controls.md ================================================ # ScrollControls `ScrollControls` use scroll as a trigger for control the scene, you can use the HTML native scroll or use the one that it get creates for you. The `cientos` package create this controls from scratch for you, and comes with really useful props to customize your experiences, try it out. ✨ ## Usage To start using it, you just need to import it and play with it. <<< @/.vitepress/theme/components/ScrollControlsDemo.vue{3,14} ::: warning Is really important that the Perspective camera is set first in the canvas. Otherwise might break. ::: You can use the `horizontal` prop, to makes the scroll horizontal way. <<< @/.vitepress/theme/components/ScrollControlsHorizontalDemo.vue{3,14} With the `pages` prop you can control the length of the scroll, and with the `distance` you can control how much movement is apply to the objects ( you can for example use it with 0 value and use the progress element) In addition a nice effect could be achieve by using the `smoothScroll` prop like so: <<< @/.vitepress/theme/components/ScrollControlsPagesDemo.vue{14-18} By default `ScrollControls` creates a scroll around the canvas and takes the camera as a default for animate, also it comes with a reactive `progress` param that returns a normalized value from 0 (start point) to 1 (end point) you just need to attach it to a v-model. <<< @/.vitepress/theme/components/ScrollControlsProgressDemo.vue{7,27-30} If you don't want to use the default camera movement you can set the distance to 0 a just rely on progress to animate (the progress is not affected by the `smoothScroll` ) But it's not all, you can also pass the `htmlScroll` props this will deactivate the custom scroll and use the native html scroll. ```vue{1} ``` ::: warning - If you set the `htmlScroll` you need to set your html to have content that create scroll. so the `pages` prop will not work - The `htmlScroll` will set the TresCanvas as a fixed background. ::: ### Slots The elements that you pass as a slot will be affected by the scroll effect, and follow the camera. <<< @/.vitepress/theme/components/ScrollControlsSlotsDemo.vue{31-43} ## Props | Prop | Description | Default | | :--------------- | :------------------------------------------------------- | ------- | | **pages** | The length of the scroll (not available with htmlScroll) | `4` | | **distance** | The distance to move the objects | `4` | | **smoothScroll** | The smooth factor of the scrolling. | `0.1` | | **horizontal** | Whether the scroll is horizontal or vertical. | `false` | | **htmlScroll** | Whether to use the native HTML scroll. | `false` | ::: warning Currently the props are not reactive for this control ::: ================================================ FILE: docs/guide/controls/transform-controls.md ================================================ # Transform Controls The [Transform Controls](https://threejs.org/docs/#examples/en/controls/TransformControls) are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender ## Usage To use the Transform Controls, simply add the `TransformControls` component to your scene. You can pass the `templateRef`of the instance you want to control as a prop. ```vue{2,6,8} ``` ::: warning If you are using other controls ([OrbitControls](/guide/controls/orbit-controls)) they will interfere with each other when dragging. To avoid this, you can set the `makeDefault` prop to `true` on the **OrbitControls**. ::: ## Modes The Transform Controls can be used in three different modes: ### Translate ![Translate](/cientos/transform-controls-translate.png) The default mode allows you to move the object around the scene. ```vue ``` ### Rotate ![Rotate](/cientos/transform-controls-rotate.png) The rotate mode allows you to rotate the object around the scene. ```vue ``` ### Scale ![Scale](/cientos/transform-controls-scale.png) The scale mode allows you to scale the object around the scene. ```vue ``` ## Props | Prop | Description | Default | | :------------------ | :-------------------------------------------------------------------------------------------- | ----------- | | **object** | The instance [Object3D](https://threejs.org/docs/index.html#api/en/core/Object3D) to control. | `null` | | **mode** | The mode of the controls. Can be `translate`, `rotate` or `scale`. | `translate` | | **enabled** | If `true`, the controls will be enabled. | `true` | | **axis** | The axis to use for the controls. Can be `X`, `Y`, `Z`, `XY`, `YZ`, `XZ`, `XYZ`. | `XYZ` | | **space** | The space to use for the controls. Can be `local` or `world`. | `local` | | **size** | The size of the controls. | `1` | | **translationSnap** | The distance to snap to when translating. (World units) | `null` | | **rotationSnap** | The angle to snap to when rotating. (Radians) | `null` | | **scaleSnap** | The scale to snap to when scaling. | `null` | | **showX** | If `true`, the X-axis helper will be shown. | `true` | | **showY** | If `true`, the Y-axis helper will be shown. | `true` | | **showZ** | If `true`, the Z-axis helper will be shown. | `true` | ## Events | Event | Description | | :--------------- | :------------------------------------------------------------- | | **dragging** | Fired when the user starts or stops dragging the controls. | | **change** | Fired when the user changes the controls. | | **mouseDown** | Fired when the user clicks on the controls. | | **mouseUp** | Fired when the user releases the mouse button on the controls. | | **objectChange** | Fired when the user changes the object. | ================================================ FILE: docs/guide/index.md ================================================ # Cientos ![Cientos banner](/cientos-banner.png) > Cientos (Spanish word for "hundreds", pronounced `/θjentos/` ) is a collection of useful ready-to-go helpers and components that are not part of the [core](https://docs.tresjs.org/) package. The name uses the word in Spanish to multiply by 100, to refer to the potential reach of the package to hold amazing abstractions. The `cientos` package uses [`three-stdlib`](https://github.com/pmndrs/three-stdlib) module under the hood instead of the `three/examples/jsm` module. This means that you don't need to extend the catalogue of components using the `extend` method, `cientos` does it for you. It just works. 💯 ::: info This package is not required to use the core library, but it improves DX, especially for complex scenes. ::: ## Installation ::: code-group ```bash [pnpm] pnpm add @tresjs/cientos ``` ```bash [npm] npm install @tresjs/cientos ``` ```bash [yarn] yarn add @tresjs/cientos ``` ::: ## Basic Usage ```ts import { OrbitControls } from '@tresjs/cientos' ``` Now you can use the `OrbitControls` component in your scene. ```html ``` ::: warning Notice that you don't need to write the prefix `Tres` such as `` to use the component ::: ================================================ FILE: docs/guide/loaders/fbx-model.md ================================================ # Using `FBXModel` The `FBXModel` component is a wrapper around [`useFBX`](./use-fbx.md) composable and accepts the same options as props. ## Usage <<< @/.vitepress/theme/components/FBXModelDemo.vue{3,10-15} ## Model reference You can access the model reference by passing a `ref` to the `FBXModel` component and then using it to get the object. ```vue ``` ## Props | Prop | Description | Default | | :------------- | :--------------------------------------------------------- | ----------- | | `path` | Path to the model file. | `undefined` | | `castShadow` | Apply `cast-shadow` to all meshes inside your model. | `false` | | `receiveShadow`| Apply `receive-shadow` to all meshes inside your model. | `false` | ================================================ FILE: docs/guide/loaders/gltf-model.md ================================================ # Using `GLTFModel` The `GLTFModel` component is a wrapper around [`useGLTF`](./use-gltf.md) composable and accepts the same options as props. ## Usage <<< @/.vitepress/theme/components/GLTFModelDemo.vue{3,10} ## Model reference You can access the model reference by passing a `ref` to the `model` prop and then using to get the object. ```vue ``` ## Props | Prop | Description | Default | | :------------ | :-------------------------------------------------------------------------------------------------------------------- | ----------- | | `path` | Path to the model file. | `undefined` | | `draco` | Enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. | `false` | | `decoderPath` | Path to a local Draco decoder. | `undefined` | | `castShadow` | Apply `cast-shadow` to all meshes inside your model. | `false` | | `receiveShadow` | Apply `receive-shadow` to all meshes inside your model. | `false` | ================================================ FILE: docs/guide/loaders/use-fbx.md ================================================ # useFBX A composable that allows you to easily load FBX models into your **TresJS** scene. ## Usage ::: code-group ```vue{2,6} [TheModel.vue] ``` ```vue [app.vue] ``` ::: ## Return Values | Name | Type | Description | | :----------- | --------- | ---------------------------------------------- | | **state** | `Group` | The loaded FBX model state | | **nodes** | `object` | Computed object containing all nodes in the scene | | **materials**| `object` | Computed object containing all materials in the scene | | **isLoading**| `boolean` | Whether the model is currently loading | | **execute** | `() => Promise` | Function to reload the model | ## Options | Name | Type | Description | | :-------------- | ---------- | ------------------------------------------ | | **traverse** | `Function` | A traverse function applied to the scene upon loading the model. | ## Accessing Nodes and Materials The composable provides computed properties to easily access nodes and materials in your scene: ```ts const { nodes, materials } = useFBX('/model.fbx') // Access a specific node const mesh = nodes.value.MeshName // Access a specific material const material = materials.value.MaterialName ``` This makes it easier to manipulate specific parts of your model or apply materials programmatically. ================================================ FILE: docs/guide/loaders/use-gltf.md ================================================ # useGLTF A composable that allows you to easily load glb/glTF models into your **TresJS** scene. ## Usage ::: code-group ```vue{2,6} [TheModel.vue] ``` ```vue [app.vue] ``` ::: An advantage of using `useGLTF` is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance. ```ts import { useGLTF } from '@tresjs/cientos' const { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true }) ``` ## Return Values | Name | Type | Description | | :----------- | --------- | ---------------------------------------------- | | **state** | `GLTF` | The loaded GLTF model state | | **nodes** | `object` | Computed object containing all nodes in the scene | | **materials**| `object` | Computed object containing all materials in the scene | | **isLoading**| `boolean` | Whether the model is currently loading | | **progress** | `number` | The progress of the model loading | | **load** | `() => Promise` | Function to reload the model | ## Options | Name | Type | Default | Description | | :-------------- | ---------- | ----------- | ------------------------------------ | | **draco** | `boolean` | `false` | Whether to enable Draco compression. | | **decoderPath** | `string` | `'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'` | Path to the Draco decoder. | | **traverse** | `Function` | | A traverse function applied to the scene upon loading the model. | ## Accessing Nodes and Materials The composable provides computed properties to easily access nodes and materials in your scene: ```ts const { nodes, materials } = useGLTF('/model.glb') // Access a specific node const mesh = nodes.value.MeshName // Access a specific material const material = materials.value.MaterialName ``` This makes it easier to manipulate specific parts of your model or apply materials programmatically. ================================================ FILE: docs/guide/loaders/use-progress.md ================================================ # useProgress A composable to convenience wrap `THREE.DefaultLoadingManager` and returns the progress of the loading assets into the scene. This comes handy to show an HTML loading bar or a spinner while the assets are being loaded. ## Usage ```ts import { useProgress } from '@tresjs/cientos' const { hasFinishLoading, progress, items } = await useProgress() ``` Then you can use the `progress` value to show a loading bar or a spinner: ```vue ``` :::warning This component use top level await. Please check the [Suspense API](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more info ::: ================================================ FILE: docs/guide/loaders/use-svg.md ================================================ # useSVG Load and display SVG elements in your **TresJS** scene. This guide covers both the `useSVG` composable for advanced use cases and the `SVG` component for simple declarative rendering. ## useSVG Composable The `useSVG` composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials. ### Usage ::: code-group ```vue{2,6} [TheModel.vue] ``` ```vue [app.vue] ``` ::: The `useSVG` composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to: - Manually control layer rendering - Apply custom animations to individual layers - Access geometry data programmatically - Implement complex material logic ### SVG Data Sources The composable accepts both file paths and inline SVG strings: ```ts import { useSVG } from '@tresjs/cientos' // From file const { layers } = useSVG('/path/to/file.svg') // Inline SVG string const svgString = ` ` const { layers } = useSVG(svgString) ``` ### Return Values | Name | Type | Description | | :----------- | ------------- | ---------------------------------------------- | | **state** | `SVGResult` | The loaded SVG state from SVGLoader | | **layers** | `SVGLayer[]` | Computed array of processed geometries and materials | | **isLoading**| `boolean` | Whether the SVG is currently loading | | **dispose** | `() => void` | Function to dispose of all geometries | ### Options | Name | Type | Default | Description | | :---------------- | ----------------------------------------- | ------------- | ------------------------------------ | | **skipStrokes** | `boolean` | `false` | Whether to skip rendering strokes | | **skipFills** | `boolean` | `false` | Whether to skip rendering fills | | **fillMaterial** | `MeshBasicMaterialParameters` | `{}` | Material properties for fill layers | | **strokeMaterial**| `MeshBasicMaterialParameters` | `{}` | Material properties for stroke layers | | **depth** | `'renderOrder' \| 'flat' \| 'offsetZ' \| number` | `'renderOrder'` | How layers should be rendered in 3D space | ### Working with Layers The `layers` computed property returns an array of processed SVG elements, each containing: ```ts interface SVGLayer { geometry: BufferGeometry // Three.js geometry for the layer material: MeshBasicMaterialParameters // Material properties isStroke: boolean // Whether this layer is a stroke or fill } ``` #### Accessing Individual Layers ```vue ``` #### Custom Animation ```vue ``` ### Depth Handling The `depth` option controls how SVG layers are rendered in 3D space. It accepts the following values: #### `'renderOrder'` (Default) **Use case: Lone SVGs or applications that don't rely on stacked SVGs** This is the default `depth` option. This value sets the materials' `depthWrite` to `false` and increments the [mesh layers' `renderOrder`](https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder). This makes the SVG layers render dependably regardless of perspective. **Disadvantage**: Scene objects may render out of order. SVG layers with higher `renderOrder` will be rendered after (i.e., sometimes "on top of") other objects in the scene graph with a lower `renderOrder`. Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera. ```ts const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' }) ``` #### `'flat'` **Use case: simple SVGs** This option sets the [materials' `depthWrite`](https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite) to `false`. **Disadvantage**: SVG layers may render out of order. Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective. ```ts const { layers } = useSVG('/icon.svg', { depth: 'flat' }) ``` #### `'offsetZ'` **Use case: unscaled SVGs seen from the front** When this value is passed, the result is a 3D "stack" of mesh layers. A small space is added between each mesh layer in the "stack". **Disadvantage**: "Bottom" of the "stack" is visible; layers may z-fight. When seen from behind, the "bottom" of the mesh layer "stack" is visible. The space between the layers may be noticeable depending on viewing perspective and scale. The layers may [z-fight](https://en.wikipedia.org/wiki/Z-fighting), particularly if the SVG is scaled down. ```ts const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' }) ``` #### `number` **Use case: SVGs seen from the front** This is the same as `'offsetZ'` but allows you to specify how much space is added between each layer, in order to eliminate [z-fighting](https://en.wikipedia.org/wiki/Z-fighting). For most use cases, this should be a value greater than 0.025 and less than 1. **Disadvantage**: "Bottom" of the "stack" is visible. ```ts const { layers } = useSVG('/icon.svg', { depth: 0.1 }) ``` ### Memory Management Always dispose of geometries when the component unmounts: ```vue ``` ### Advanced Usage #### Conditional Layer Rendering ```vue ``` #### Material Customization per Layer ```vue ``` ## UseSVG Component For simple, declarative SVG rendering without the need for programmatic control, you can use the `SVG` component: ```vue ``` ### Props | Prop | Type | Description | Default | | :------------------ | -------------------------------------------------| :----------------------------------------------------------------- | ------------- | | **src** | `string` | Either a path to an SVG *or* an SVG string | | | **skipStrokes** | `boolean` | If `true`, the SVG strokes will not be rendered. | `false` | | **skipFills** | `boolean` | If `true`, the SVG fills will not be rendered. | `false` | | **strokeMaterial** | `MeshBasicMaterialParameters` | Props to assign to the stroke materials of the resulting meshes. | `undefined` | | **fillMaterial** | `MeshBasicMaterialParameters` | Props to assign to the fill materials of the resulting meshes. | `undefined` | | **strokeMeshProps** | `TresOptions` | Props to assign to the resulting stroke meshes. | `undefined` | | **fillMeshProps** | `TresOptions` | Props to assign to the resulting fill meshes. | `undefined` | | **depth** | `'renderOrder' \| 'flat' \| 'offsetZ' \| number` | Specify how SVG layers are to be rendered. ([See "Depth"](#depth-handling)) | `renderOrder` | ## Troubleshooting ::: warning This is not a general-purpose SVG renderer. Many SVG features are unsupported. ::: Here are some things to try if you run into problems: ### Error: "XML Parsing Error: unclosed token" * In the SVG source, convert hex colors to rgb, e.g., convert `#ff0000` to `rgb(255, 0, 0)`. ### Parts of the SVG render in the wrong order or disappear, depending on viewing angle * In your `useSVG` options, [change the `depth` option](#depth-handling). * In the SVG source, use `fill="none"` rather than `fill-opacity="0"`. ### Parts of the SVG ["z-fight"](https://en.wikipedia.org/wiki/Z-fighting) * In your `useSVG` options, [change the `depth` option](#depth-handling). * Increase the distance between the SVG and other on-screen elements. ### The SVG is not visible * If importing an SVG, make sure the path is correct – check the console for loading errors. * Try scaling the SVG down, e.g., wrap it in a `TresGroup` with `:scale="0.01"`. * Try moving the SVG up (+y), e.g., `:position="[0,2,0]"`. * Check that `layers.length > 0` before rendering. ### Performance issues with many layers * Use the `dispose()` function when components unmount to clean up geometries. * Consider using `skipStrokes` or `skipFills` to reduce the number of rendered layers. * For complex SVGs with many layers, consider simplifying the SVG source. ## When to Use `useSVG` vs `SVG` Component **Use `useSVG` when you need:** - Direct access to individual SVG layers - Custom rendering logic - Layer-specific animations - Programmatic geometry manipulation - Advanced material customization per layer **Use the `SVG` component when you need:** - Simple, declarative SVG rendering - Quick prototyping - Standard SVG display without custom logic - Less code and setup ================================================ FILE: docs/guide/loaders/use-texture.md ================================================ # useTexture A composable that allows you to load textures using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader) into your **TresJS** scene. ## Usage ```vue [TexturedObject.vue] ``` ## Options | Name | Type | Default | Description | | :-------------- | --------- | ----------- | ------------------------------------ | | **path** | `string` | `undefined` | The path to the texture. | | **manager** | `THREE.LoadingManager` | `undefined` | The loading manager to use for the texture. | ## Component Usage ```vue [UseTexture.vue] ``` ================================================ FILE: docs/guide/loaders/use-textures.md ================================================ # useTextures A composable that allows you to load multiple textures at once using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader) into your **TresJS** scene. ## Usage ```vue [TexturedObjects.vue] ``` ## PBR Textures Example Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material: ```vue [PBRTextures.vue] ``` ## API ### Parameters | Name | Type | Default | Description | | :-------------- | --------- | ----------- | ------------------------------------ | | **paths** | `string[]` | `undefined` | Array of paths to the textures. | ### Returns | Name | Type | Description | | :-------------- | --------- | ------------------------------------ | | **textures** | `Texture[]` | Array of loaded textures. | | **isLoading** | `boolean` | Whether any textures are still loading. | | **error** | `Error[] \| null` | Array of errors if any occurred during loading. | ## Benefits - **Simplified API**: Load multiple textures with a single function call - **Consolidated loading state**: Track loading state for all textures at once - **Unified error handling**: Collect and report errors from all texture loads - **Type safety**: Proper TypeScript typing throughout the implementation ================================================ FILE: docs/guide/loaders/use-video-texture.md ================================================ # useVideoTexture A composable to easily use videos as textures in your meshes. This composable is based on the Drei [useVideoTexture](https://github.com/pmndrs/drei/tree/master#usevideotexture) ## Usage ::: code-group ```vue [app.vue] ``` ```vue{3,8,13} [TheVideoTexture.vue] ``` ::: ## Props | Prop | Description | Default | | :------------ | :----------------------------------------------------------------------- | ---------------- | | `src` | Path to the video. | `undefined` | | `unsuspend` | Path to the model file. | `loadedmetadata` | | `crossOrigin` | Whether to use CORS to fetch the related video. | `Anonymous` | | `muted` | Whether to set the audio silenced. | true | | `loop` | Automatically seek back to the start upon reaching the end of the video. | true | | `start` | To play to the video once loaded or not. | true | | `playsInline` | To be play the video inline or not. | true | - Any other attribute for a `