Threesnap NPM | npm.io

Usage

To create smooth transitions between different 3D model configurations (position, rotation, and scale) based on page scroll events, you can use the createThreesnap function. Models and their transformations (such as position, rotation, and scale) will be adjusted as the user scrolls through different sections of the webpage.

Features

Three.js Integration: Render and manipulate 3D models using Three.js.
Smooth Scroll Transitions: Change models' positions, rotations, and scales as users scroll between sections.
Multi-Model Support: Each page can have multiple 3D models with unique configurations.
Customizable: Easily customize the camera position, model scale, and page-specific transformations.

Installation

First, install the required dependencies:

npm install threesnap

Example

Here's how you can use the library to configure a 3D model across different pages:

createThreesnap({
  fixedZ: 5,
  pages: [
    {
      models: [
        {
          modelPath: "./path/to/model1.glb",
          position: { x: 0, y: 0, z: 0 },
          rotation: { x: 0, y: 0, z: 0 },
          scale: { x: 0.5, y: 0.5, z: 0.5 },
        },
      ],
    },
    {
      models: [
        {
          modelPath: "./path/to/model2.glb",
          position: { x: 30, y: 25, z: -120 },
          rotation: { x: 45, y: 30, z: 0 },
          scale: { x: 0.7, y: 0.7, z: 0.7 },
        },
      ],
    },
    {
      models: [
        {
          modelPath: "./path/to/model3.glb",
          position: { x: 0, y: 0, z: 20 },
          rotation: { x: 0, y: 90, z: 45 },
          scale: { x: 0.6, y: 0.6, z: 0.6 },
        },
      ],
    },
    {
      models: [
        {
          modelPath: "./path/to/model4.glb",
          position: { x: -25, y: -35, z: -30 },
          rotation: { x: -45, y: 60, z: 30 },
          scale: { x: 0.8, y: 0.8, z: 0.8 },
        },
      ],
    },
  ],
});

Contributing

Contributions to the project is highly appreciated. If you have any suggestions/questions/requests please consider opening an issue. If you want to contribute to the project, fixing an open issue is greatly recommended and appreciated. To see the all contribution rules please check the contribution rules.