DOCSEARCHbyAlgolia
Submit Docs

Threlte 8

website·Indexed 34 days ago

https://threlte.xyz

An open-source 3D framework for Svelte that allows developers to build interactive 3D web applications using declarative, reactive components powered by Three.js. Threlte 8 provides tools for asset loading via hooks like useGltf and useTexture, a task scheduler for frame-based execution, multiple render modes (on-demand, manual, and always), and a plugin system to extend the <T> component.

Tokens
107.9K
Snippets
572
Records
815
Agent score
70%

What's inside Threlte

  1. Overview of the @threlte/core package

    The @threlte/core package is the foundational library of the Threlte framework. It provides essential components for rendering 3D scenes, specifically the <Canvas> component (which initializes the Three.js renderer) and the <T> component (used for creating Three.js objects as Threlte components), as well as hooks for interacting with the Threlte state.

  2. Introduction to Threlte 8

    Threlte is an open-source 3D framework for Svelte. It allows developers to build interactive 3D applications for the web by providing declarative, reactive components powered by Three.js. Threlte 8 is the current stable major version.

  3. Overview of the Threlte ecosystem and packages

    Threlte is a declarative, state-driven library that brings Three.js to Svelte, providing strictly typed components for reactivity and interactivity. The ecosystem is split into several specialized packages to allow for modular imports:

    • @threlte/core: The foundation providing Svelte bindings to Three.js. Its primary building block is the <T> component, which acts as a thin, declarative wrapper for any Three.js class.
    • @threlte/extras: A collection of plugins and components that extend core functionality.
    • @threlte/gltf: A CLI tool used to convert GLTF assets into reusable Threlte components.
    • @threlte/rapier: Integration with the Rapier physics engine for performant physics simulations.
    • @threlte/theatre: Integration with the Theatre.js animation library for complex animations.
    • @threlte/xr: Components specifically for creating VR and AR experiences.
    • @threlte/flex: Integration with the yoga-layout flex engine for layout management.

  4. Introduction to Threlte Studio

    Threlte Studio is a spatial programming toolset provided by the @threlte/studio package. It enables developers to inspect and edit their 3D scenes via a GUI and synchronizes those changes back to the source code in real-time using a Vite plugin. The toolset is designed to be extendable, allowing for the creation of custom components that interact with the Threlte Studio API and GUI.

  5. Overview of @threlte/rapier

    The @threlte/rapier package provides components and hooks to integrate the Rapier physics engine (a fast physics engine written in Rust) into Threlte.

    Constraints & Caveats:

    • The package is under heavy development and the API is subject to change.
    • Currently, only one Rapier-enabled Threlte instance is supported per application.

  6. Use <ShadowMaterial> for light-independent shadows

    The <ShadowMaterial> component from the @threlte/extras package provides a computationally cheap material based on CanvasTexture. It is designed to simulate the appearance of a shadow on a surface without requiring actual light sources to be present in the scene.

  7. Understand the Threlte Task Scheduling System

    Threlte uses a scheduling system to manage functions that run on every frame (similar to requestAnimationFrame). This system allows developers to encapsulate logic into components while ensuring that dependent operations—such as updating an object's position before rendering the scene—occur in the correct order.

    Key concepts include:

    • Tasks: Individual functions that run every frame.
    • Dependencies: Constraints that force tasks or stages to execute in a specific sequence.
    • Stages: Groups of tasks that can also have dependencies on other stages.
    • Scheduler: The single entity that manages the execution of all stages and tasks within a Threlte app.

  8. Use 'on-demand' rendering mode in Threlte

    The 'on-demand' mode is the default and recommended rendering mode in Threlte. In this mode, Threlte only renders the scene when the current frame is invalidated. Invalidation occurs either automatically when changes are detected in component props or mounting/unmounting, or manually via the invalidate function.

  9. Handle Threlte transition events

    Threlte transitions emit events similar to Svelte transitions. You can listen to the start and end of both introduction and outro transitions using the following event props on a component: onintrostart, onoutrostart, onintroend, and onoutroend.
    {#if visible}
  <T.Mesh
    {geometry}
    {material}
    transition={fade}
    onintrostart={() => console.log('intro started')}
    onoutrostart={() => console.log('outro started')}
    onintroend={() => console.log('intro ended')}
    onoutroend={() => console.log('outro ended')}
  />
{/if}

  10. Create floating animations with the <Float> component

    The <Float> component, provided by the @threlte/extras package, is a port of the drei <Float> component. It is used to wrap 3D objects to make them float or hover automatically in the scene.

  12. Access interactivity state using useInteractivity

    The useInteractivity hook allows child components of a component implementing the interactivity plugin to access the current interactivity state. This state includes information about pointer position, targets being hovered, and the raycaster used for intersection tests.
    <script>
  import { useInteractivity } from '@threlte/extras'

  const { pointer, pointerOverTarget } = useInteractivity()

  $inspect($pointer, $pointerOverTarget)
</script>