threesnap
v0.0.26-beta
Published
Full screen, snap scroll library with ready-to-use three.js configurations.
Downloads
37
Maintainers
Readme
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.
License
Distributed under the MIT License. See LICENSE for more information.
Contact
| Maintainer | E-Mail | | --------------------------------------- | ---------------------- | | kaandesu | [email protected] |