[Work in Progress] Full screen, snap scroll library with ready-to-use three.js configurations.
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.
First, install the required dependencies:
npm install threesnap
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 },
},
],
},
],
});
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.
Distributed under the MIT License. See LICENSE for more information.
Maintainer | |
---|---|
kaandesu | [email protected] |