Как создать красивую прокрутку с 3D-анимацией, используя gsap и react-three-fiber
Сначала нам нужно создать новый проект реагирования. Для этого мы будем использовать Next.js 13, так как мы хотим использовать новый каталог приложений.
Чтобы установить следующий, нам нужно открыть наш терминал и ввести следующую команду:
npx create-next-app@latest
После этого нам нужно выбрать следующие варианты:
What is your project named? my-app
Would you like to add TypeScript with this project? N
Would you like to use ESLint with this project? Y
Would you like to use Tailwind CSS with this project? Y
Would you like to use the src/ directory with this project? N
What import alias would you like configured? @/
После завершения установки нам нужно установить несколько зависимостей, чтобы упростить жизнь:
npm i @react-three/drei @react-three/fiber gsap three framer-motion
react-three и drei - это пакеты, которые облегчают нам использование three.js в react-контексте.
После успешной установки пакетов мы можем запустить наш сервер разработки, введя npm run dev в консоли. Мы увидим, что по умолчанию next.js загружен. Сначала мы удалим весь шаблонный код next.js в page.js в каталоге приложений. Затем мы оптимизируем наш globals.css, чтобы он выглядел следующим образом:
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
/* here come the vars: */
--navigation-height: 4.8rem;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: black;
}
Затем мы очистим файл page.js от всего шаблонного кода и добавим следующий код:
"use client";
import { Inter } from "next/font/google";
import { Canvas } from "@react-three/fiber";
import ZeusModel from "@/components/ZeusModel";
import { skewRevealText } from "@/utils/gsap";
import { useLayoutEffect, useRef, useEffect } from "react";
import { useScroll } from "framer-motion";
export default function Home() {
const { scrollYProgress, scrollY } = useScroll();
const textRef = useRef();
const textRefTwo = useRef();
const textRefThree = useRef();
const textRefFour = useRef();
useLayoutEffect(() => {
skewRevealText(textRef);
skewRevealText(textRefTwo);
skewRevealText(textRefThree);
skewRevealText(textRefFour);
}, []);
return (
<main>
<div className="h-full w-full fixed top-0 left-0 ml-64 bg-hero-gradient bg-right bg-no-repeat bg-cover bg-blend-normal z-0">
<Canvas>
{/* <ambientLight intensity={0.03} /> */}
<ZeusModel
scale={0.1}
position={[0, -2, 0]}
rotation={[0, 5, 0]}
scrollY={scrollY}
scrollYProgress={scrollYProgress}
/>
</Canvas>
</div>
<div className="max-w-7xl relative m-auto text-white z-2">
<div
className="h-[100vh] flex items-center"
initial="offscreen"
whileInView="onscreen"
viewport={{ once: true, amount: 0.2, margin: "800px" }}
>
<div className="overflow-hidden">
<h1 className="text-8xl font-bold font-headline">
Zeus the
<br /> Greek God
</h1>
<p className="text-paragraph max-w-[307px]">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua.
</p>
</div>
</div>
<div className="h-[100vh] flex items-center">
<div className="overflow-hidden">
<h2
ref={textRef}
className="text-5xl font-bold font-headline opacity-0"
>
Zeus
</h2>
<p
className="text-paragraph max-w-[307px] opacity-0"
ref={textRefThree}
>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua.
</p>
</div>
</div>
<div className="h-[100vh] flex items-center">
<div className="overflow-hidden">
<h2
ref={textRefTwo}
className="text-5xl font-bold font-headline opacity-0"
>
Zeus
</h2>
<p
className="text-paragraph max-w-[307px] opacity-0"
ref={textRefFour}
>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua.
</p>
</div>
</div>
<div className="h-[100vh] flex items-center"></div>
</div>
</main>
);
}
Нам также нужно оптимизировать layout.js, чтобы у нас была навигация по каждой подстранице (хотя в настоящее время ее нет).
import Navigation from "@/components/Navigation";
import "./globals.css";
import { Inter, Bebas_Neue } from "next/font/google";
const bebasNeue = Bebas_Neue({ subsets: ["latin"], weight: "400" });
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="p-5">
<Navigation />
{children}
</body>
</html>
);
}
Этот код все еще не будет работать прямо сейчас, так как он уже содержит компоненты и файлы, которые мы еще не создали.
Наиболее важной частью здесь является компонент холста, предоставляемый тремя волокнами, которые содержат компонент Zeus.jsx. Мы создадим Zeus.jsx за несколько шагов, но это компонент, который содержит 3D-модель.
В качестве следующего шага мы создадим наши текстовые анимации. Для этого мы создадим каталог под названием utils и добавим туда новый файл под названием gsap.js.
Файл должен выглядеть следующим образом:
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
/* reusable animations */
gsap.registerPlugin(ScrollTrigger);
export const skewRevealText = (textRef) => {
ScrollTrigger.create({
trigger: textRef.current,
start: "center center",
end: "center center",
markers: false,
once: true,
onEnter: () => {
gsap.fromTo(
textRef.current,
{
y: 200,
skewY: 10,
},
{
duration: 0.6,
y: 0,
skewY: 0,
opacity: 1,
}
);
},
});
};
Это просто оживляет текст и определенно может быть улучшено, так как основное внимание в этом уроке уделяется эффекту 3D-прокрутки.
Navigation.jsx, ZeusModel.jsx и Logo.jsx
Теперь пришло время создать новый каталог для хранения наших 3D-компонентов и именованных компоненты Navbar.
Там мы создадим два новых файла компонентов. Один будет называться ZeusModel.jsx, а другой - Navigation.jsx.
Я не буду объяснять стили попутного ветра, но некоторые из них имеют прямую связь с функциональностью прокрутки, поэтому будьте осторожны, вы их тоже добавляете.
// Navigation.jsx
import React from "react";
import Logo from "./svg/Logo";
function Navigation() {
return (
<nav className=" p-5 backdrop-blur-md fixed w-[642px] top-0 left-0 z-10 font-headline text-white">
<div className="flex items-center w-full">
<Logo />
<div className="w-full pl-10">
<ul className="flex w-full justify-around border-b-[1px] border-[#583922] pb-3 ">
<li>Home</li>
<li>Facts</li>
<li>Content</li>
<li>Design</li>
<li>Love</li>
</ul>
</div>
</div>
</nav>
);
}
export default Navigation;
export default ZeusModel;
import React from "react";
function Logo() {
return (
<svg
width="66"
height="65"
viewBox="0 0 66 65"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.9114 0.0151124C26.8768 0.253934 24.011 0.848448 20.7996 2.10353C15.9927 3.99379 11.7345 6.93586 8.3249 10.7418C1.92754 17.8658 -1.03995 27.6626 0.326927 37.1697C0.997661 41.8445 2.67958 46.2754 5.29136 50.2488C9.01599 55.9196 14.3819 60.2896 20.6471 62.7645C23.4825 63.8824 26.4652 64.5936 29.6665 64.9084C30.8911 65.0305 33.8992 65.0305 35.1339 64.9084C40.2102 64.4107 44.5598 63.0538 48.7623 60.6605C51.3333 59.2023 53.1271 57.8204 55.3578 55.5996C57.1257 53.8416 58.2592 52.5002 59.4582 50.7522C62.0448 46.9817 63.7674 42.749 64.6209 38.0437C64.941 36.2703 65.0018 35.3658 65.0018 32.5305C65.0018 29.7002 64.9207 28.5264 64.6007 26.7886C62.7051 16.5294 56.3838 8.05377 47.1462 3.39419C43.3403 1.46837 39.9409 0.502921 35.5862 0.106576C34.7783 0.0354377 31.6279 -0.0306195 30.9114 0.0151124ZM32.4409 0.670604C32.5577 0.828125 32.6492 1.79357 32.6898 3.33829C32.7051 3.96838 32.7305 4.59846 32.7457 4.73564L32.7711 4.98973L34.1736 5.08121C34.9459 5.13202 35.7844 5.19805 36.0384 5.23363C36.7854 5.32002 36.8413 5.31493 36.9226 5.14724C36.9633 5.07103 37.0496 4.71533 37.1157 4.35964C37.2986 3.37386 37.2783 3.23667 36.9531 3.23667C36.7244 3.23667 36.5415 3.31289 36.4805 3.43484C36.45 3.49073 36.3891 3.76005 36.3433 4.03444C36.2976 4.30883 36.2468 4.54765 36.2264 4.56289C36.2112 4.58322 35.947 4.57814 35.637 4.55273C34.3159 4.4511 33.7467 4.40029 33.5943 4.3698L33.4266 4.3444V3.67366C33.4266 3.30781 33.4622 2.47955 33.5028 1.83931C33.5435 1.19398 33.5791 0.650276 33.5791 0.629953C33.5791 0.584222 33.889 0.599464 35.2559 0.701093C37.1817 0.843367 40.3779 1.39723 40.7895 1.65638C40.8504 1.69703 40.7844 1.99682 40.4134 3.39927C39.758 5.87386 39.758 5.88913 39.8545 5.96534C39.946 6.03137 42.9236 7.02735 43.5232 7.18995L43.884 7.29156L44.1431 6.72754C44.5497 5.81796 44.6157 5.62487 44.5497 5.54357C44.5192 5.50803 44.3921 5.42673 44.2702 5.36574C43.9755 5.22854 43.9551 5.24885 43.6401 5.91453C43.5029 6.20415 43.3555 6.45315 43.3098 6.46837C43.2031 6.51414 40.8708 5.70617 40.7285 5.57406C40.6624 5.51816 40.9978 4.29866 41.4297 3.00801C41.7244 2.12894 41.8057 1.96634 41.9378 1.96634C42.4765 1.96634 48.1576 4.46635 48.4672 4.83731C48.5181 4.90334 48.447 5.05576 48.0303 5.79256C46.9531 7.68789 46.8261 7.92675 46.6584 8.30276C46.5669 8.51617 46.5009 8.70927 46.5161 8.72958C46.5263 8.75498 46.9328 9.02938 47.4157 9.34949C47.8984 9.66961 48.6501 10.2082 49.0974 10.5487C49.5395 10.8891 49.9208 11.1635 49.941 11.1533C49.9867 11.1381 50.7639 10.1727 50.9421 9.9186C51.125 9.64929 51.1301 9.5629 50.952 9.36472C50.6829 9.05478 50.566 9.1005 50.0631 9.72042C49.8496 9.98468 49.6564 10.1981 49.6309 10.1981C49.6106 10.1981 49.1332 9.8627 48.5789 9.44602C48.0251 9.03447 47.5171 8.6635 47.4511 8.61778L47.329 8.53648L47.9035 7.60154C48.6044 6.47346 49.326 5.37083 49.3717 5.37083C49.448 5.37083 50.5405 6.08727 51.1198 6.51918C52.8523 7.80477 55.0222 9.69501 55.0222 9.9186C55.0222 10.0355 54.5952 10.5131 53.325 11.8139L52.1208 13.0487L52.258 13.2113C52.9235 13.9989 53.7162 14.9593 54.1484 15.4979C54.4378 15.8536 54.7277 16.1788 54.7936 16.2245C54.9105 16.3008 54.9308 16.2957 55.1085 16.189C55.4591 15.9806 56.2467 15.3709 56.323 15.254C56.389 15.1575 56.389 15.1117 56.3381 15.0152C56.2519 14.8475 56.0841 14.6696 56.0082 14.6696C55.9724 14.6696 55.7386 14.8068 55.4898 14.9745C55.2456 15.1422 54.9968 15.2794 54.9412 15.2794C54.8342 15.2794 54.5651 15.0152 53.5791 13.9379C53.005 13.318 53.0149 13.3536 53.4113 12.881C53.6705 12.566 55.7386 10.5995 55.7843 10.6147C55.8046 10.6249 56.0487 10.884 56.3282 11.1889C57.2784 12.2407 58.3709 13.6839 59.306 15.1117C60.0733 16.2855 60.2307 16.5447 60.1746 16.6005C60.1491 16.626 59.306 17.1036 58.2997 17.6676C57.2935 18.2316 56.4503 18.7143 56.4248 18.7398C56.3942 18.7652 56.6482 19.3393 57.0955 20.2438C57.4919 21.0518 57.8883 21.8902 57.9849 22.1138C58.1979 22.6372 58.2639 22.6626 58.8436 22.4746C59.0769 22.3983 59.4379 22.2561 59.6463 22.1494C60.0068 21.9715 60.0275 21.9512 60.0426 21.7733C60.0525 21.6717 60.0224 21.5142 59.9766 21.4278C59.88 21.2398 59.8291 21.2449 59.2244 21.4786C58.6655 21.692 58.6353 21.692 58.4727 21.4532C58.3049 21.2042 57.6847 19.9948 57.4867 19.5223L57.3392 19.1767L57.4867 19.0599C57.8015 18.8058 60.4946 17.5152 60.7029 17.5152C60.8655 17.5152 62.1362 20.4573 62.7663 22.2916C63.0863 23.2164 63.2541 23.8313 63.2541 24.0701C63.2541 24.2733 63.2386 24.2784 61.6635 24.7357C60.1491 25.1727 59.8546 25.2642 59.4785 25.4319C59.1278 25.5843 59.1278 25.3912 59.4582 27.0172C59.5803 27.6473 59.7377 28.44 59.7985 28.7855C59.9564 29.6545 59.9361 29.6341 60.7491 29.6291C61.638 29.624 61.8822 29.502 61.8822 29.0498C61.8822 28.7347 61.8873 28.7347 61.12 28.7754L60.4239 28.8109L60.3933 28.6433C60.3019 28.2012 60.0577 26.6564 60.0374 26.4125C60.0224 26.2042 60.0374 26.1178 60.0987 26.0569C60.2509 25.9044 63.0962 25.2642 63.4625 25.2997C63.6147 25.315 63.6401 25.3404 63.6962 25.5386C63.9757 26.5192 64.4734 30.5894 64.4734 31.9258V32.6067H62.304L60.1289 32.6016L60.0935 32.9217C60.0323 33.4502 59.8037 35.8994 59.7683 36.4228L59.7325 36.9157L59.88 36.9461C60.1595 37.002 61.5367 37.1342 61.5975 37.1138C61.6328 37.0986 61.704 36.9563 61.7549 36.7988C61.8313 36.5498 61.8364 36.499 61.7705 36.438C61.7295 36.3974 61.4401 36.3211 61.1299 36.2652C60.8151 36.2144 60.5356 36.1534 60.505 36.1331C60.4442 36.0976 60.4593 35.7012 60.571 34.192L60.627 33.4095L62.4105 33.4298C63.7316 33.44 64.2246 33.4654 64.3108 33.5111C64.4126 33.567 64.4225 33.6128 64.4225 33.9532C64.4225 35.249 63.6859 40.0152 63.4012 40.5437C63.3508 40.6352 63.3149 40.6453 63.0152 40.6098C62.8323 40.5894 61.9481 40.3963 61.0536 40.1728C60.1543 39.9543 59.3616 39.7713 59.2857 39.7713C59.0873 39.7713 58.9605 39.9594 58.8078 40.4726C58.7314 40.7165 58.4826 41.4431 58.2488 42.0884C57.7511 43.4705 57.7205 43.5823 57.8425 43.7653C57.9387 43.9126 58.452 44.1667 59.0265 44.3496C59.4431 44.4817 59.5091 44.4665 59.6665 44.1972C59.8239 43.9279 59.7429 43.8415 59.0925 43.5569C58.7823 43.4248 58.5132 43.2978 58.5029 43.2775C58.4675 43.2216 59.0873 41.5447 59.2956 41.123C59.3922 40.9299 59.5091 40.7469 59.5548 40.7165C59.7023 40.625 62.0193 41.2602 62.6443 41.565C62.9336 41.7073 62.9746 41.748 62.9897 41.8852C63.0557 42.5356 60.4489 48.3588 60.0935 48.3588C59.9663 48.3588 59.7938 48.2674 58.2436 47.3931C56.3739 46.3313 56.2976 46.2958 56.2165 46.3822C56.0487 46.5651 53.9552 49.6747 53.9552 49.7511C53.9552 49.9189 54.7531 50.6607 55.1646 50.869C55.3729 50.9756 55.4643 50.9501 55.683 50.7215C55.896 50.5033 55.8758 50.4524 55.4747 50.1729C55.0731 49.8986 54.87 49.6851 54.87 49.548C54.87 49.4259 55.3526 48.6789 55.9828 47.8305L56.3433 47.3427L56.5365 47.4186C57.2223 47.7084 59.4276 49.0602 59.56 49.2784C59.6411 49.4108 58.9756 50.3911 57.5221 52.2665C56.2721 53.8821 55.3323 54.9643 55.19 54.9643C55.0477 54.9643 54.5193 54.5019 53.2133 53.2468L51.8974 51.9818L51.4143 52.4239C50.7489 53.0286 49.9104 53.7502 49.2751 54.2531C48.9857 54.4816 48.7415 54.69 48.7316 54.7154C48.7166 54.7559 49.2751 55.6759 49.5753 56.0926C49.6714 56.2297 49.7732 56.3362 49.8086 56.3362C49.9104 56.3362 50.4491 55.9757 50.4491 55.9045C50.4491 55.8692 50.4086 55.8079 50.3628 55.7726C50.2153 55.6505 49.687 54.9086 49.687 54.8224C49.687 54.7767 49.8086 54.6292 49.9561 54.492C50.3883 54.0853 51.7806 52.9268 51.8159 52.9423C51.8923 52.9777 53.7365 55.0105 54.123 55.4827C54.3567 55.7674 54.3666 55.7523 53.7822 56.2806C52.5983 57.3576 50.1239 59.1717 48.9654 59.8122C48.4013 60.127 48.4979 60.2236 47.3545 58.2418C46.8058 57.2916 46.3383 56.4838 46.318 56.4531C46.2621 56.3669 45.9775 56.4786 44.2295 57.2713C43.4521 57.6272 42.7153 57.942 42.5933 57.9726C42.3139 58.049 42.3088 58.1046 42.5222 58.7347C42.7813 59.502 42.9795 59.9389 43.0862 59.9696C43.2183 60.0153 43.5029 59.9135 43.6198 59.7867C43.7112 59.6849 43.7112 59.6698 43.5181 59.1109C43.4063 58.796 43.3301 58.501 43.3505 58.4604C43.386 58.3638 45.0934 57.4999 45.4897 57.3731C45.6421 57.3274 45.7997 57.302 45.8403 57.317C45.9165 57.3477 46.7753 58.9129 47.1664 59.7509C47.2937 60.0101 47.4054 60.3052 47.4256 60.4065C47.4563 60.5691 47.4407 60.6049 47.2937 60.7265C46.6838 61.2398 41.8464 63.1453 41.1045 63.1655C40.8453 63.1707 40.8199 63.1608 40.7183 63.0081C40.6573 62.9219 40.5303 62.5764 40.4439 62.246C39.8139 59.9493 39.6208 59.3649 39.4632 59.2786C39.3057 59.1971 37.9744 59.3753 35.6218 59.7966L35.2966 59.8527L35.327 60.0662C35.3423 60.1779 35.3931 60.6096 35.4388 61.0215C35.4846 61.4278 35.5405 61.7936 35.5608 61.8294C35.5964 61.8803 35.6573 61.8803 35.8758 61.819C36.2569 61.7177 36.2874 61.6361 36.1909 60.94C36.1502 60.6351 36.1299 60.3763 36.1451 60.3608C36.1705 60.3353 38.1167 59.9898 38.6655 59.9135L38.9043 59.8781L39.011 60.1628C39.2092 60.6963 39.8494 63.3281 39.7986 63.4097C39.7783 63.4403 39.6665 63.5063 39.5445 63.5572C38.8637 63.8617 35.4998 64.299 33.5028 64.3495L32.385 64.3801L32.4002 62.2766C32.4155 60.5846 32.4053 60.1576 32.3494 60.0917C32.2122 59.9239 28.2945 59.6698 28.1421 59.8221C28.0557 59.9088 27.9388 60.5337 27.9032 61.0974L27.8728 61.6211L28.0608 61.6974C28.4673 61.8699 28.5943 61.7125 28.7264 60.8792C28.7722 60.6049 28.8179 60.3711 28.828 60.3509C28.8484 60.3151 30.4947 60.4267 31.0892 60.5031C31.323 60.5337 31.5466 60.5846 31.5821 60.6148C31.6634 60.6808 31.6634 62.0071 31.5821 63.3739L31.5212 64.3396L31.2925 64.3547C30.2305 64.4362 25.4032 63.7042 24.514 63.3281L24.3158 63.2471L24.3514 62.993C24.3971 62.6678 24.8799 60.7166 25.1187 59.9187C25.3118 59.2584 25.3321 59.1212 25.2355 59.0397C25.2 59.0142 24.9561 58.928 24.6969 58.8568C24.4378 58.7805 23.5943 58.4911 22.827 58.2163C22.0597 57.9373 21.389 57.7082 21.3382 57.7082C21.2721 57.7082 21.1857 57.8152 21.0638 58.049C20.83 58.501 20.5709 59.1514 20.5709 59.3041C20.5709 59.5171 20.9672 59.7815 21.1451 59.6849C21.1908 59.6547 21.2874 59.4464 21.3585 59.2075C21.4296 58.9737 21.5313 58.7296 21.5821 58.6688L21.6736 58.5519L22.2122 58.6942C22.9033 58.8719 24.1228 59.2683 24.265 59.3597L24.3768 59.4361L24.199 60.1067C23.9856 60.9249 23.7721 61.6564 23.5384 62.419C23.3758 62.9473 23.3504 62.993 23.2386 62.993C23.076 62.993 21.8057 62.5406 20.5912 62.0481C19.0465 61.4278 16.8768 60.3353 16.6583 60.0714C16.5668 59.9644 16.6481 59.807 17.5831 58.1758C18.4113 56.7326 18.5587 56.4277 18.518 56.2604C18.4977 56.1736 18.0658 55.8437 17.0292 55.1019C15.2152 53.8161 15.3118 53.8821 15.1644 53.918C14.9459 53.9736 14.016 55.1778 14.016 55.4064C14.016 55.5591 14.3006 55.7014 14.4835 55.6302C14.5953 55.5897 14.9408 55.2438 15.2508 54.8728L15.388 54.7003L16.5313 55.503C17.1613 55.9451 17.6745 56.3315 17.6745 56.3617C17.6745 56.4329 17.0902 57.4339 16.328 58.6688L15.7284 59.634L15.012 59.1514C14.0465 58.4958 12.9438 57.6578 11.958 56.8396C11.0841 56.1077 10.0526 55.132 10.0526 55.0307C10.0526 54.9185 10.6522 54.2582 11.8615 53.0338L13.0455 51.8395L12.6593 51.4077C11.7294 50.361 10.8808 49.3698 10.5963 48.9838C10.4235 48.7552 10.266 48.5672 10.2406 48.562C10.1847 48.562 9.09729 49.3547 8.8991 49.5428C8.69078 49.7407 8.68569 49.8882 8.88897 50.1423L9.04648 50.3454L9.2243 50.2389C9.32088 50.1828 9.58 49.9948 9.80868 49.8274C10.144 49.5682 10.2253 49.5277 10.2761 49.5833C10.5048 49.8322 11.3483 50.8332 11.5871 51.1283C11.9276 51.56 11.9987 51.6872 11.958 51.8088C11.8818 52.053 10.0983 53.613 9.45807 54.0042L9.18368 54.1668L8.9245 53.918C8.07596 53.0894 5.58103 49.736 5.04745 48.6991L4.89503 48.4046L5.02205 48.3079C5.09322 48.257 5.66233 47.9116 6.29237 47.5406C7.62878 46.7632 8.44179 46.2551 8.52818 46.1484C8.60948 46.0519 8.5993 46.0315 7.80665 44.37C7.45599 43.6433 7.12066 42.9167 7.05458 42.7541C6.88689 42.3272 6.80054 42.3069 6.02816 42.5457C5.29136 42.7693 5.02205 42.9319 5.02205 43.1453C5.02205 43.3079 5.21006 43.5823 5.32185 43.5823C5.37775 43.5823 5.64706 43.501 5.91636 43.4045C6.18567 43.3079 6.44993 43.2266 6.50074 43.2266C6.57695 43.2266 6.67857 43.3994 6.94787 43.9482C7.29339 44.6698 7.66436 45.5895 7.66436 45.7368C7.66436 45.8435 6.37877 46.5854 5.01696 47.2663C4.47329 47.5406 4.4428 47.551 4.37166 47.4643C3.90418 46.8395 1.77002 41.4685 1.77002 40.9095C1.77002 40.6656 2.04441 40.5539 4.0058 40.0254C5.60643 39.5935 5.94686 39.4766 5.91636 39.375C5.87574 39.2327 5.64706 38.0285 5.40824 36.7124C5.28123 36.0163 5.15416 35.4065 5.11862 35.3455C5.07286 35.254 5.03223 35.2439 4.87981 35.2744C4.77306 35.2896 4.3869 35.3252 4.02104 35.3404C3.65011 35.3608 3.3249 35.4014 3.29442 35.4319C3.21312 35.5132 3.17755 35.9197 3.23852 36.0721C3.30458 36.2449 3.43669 36.2551 4.15316 36.1382C4.41739 36.0925 4.63589 36.0671 4.64605 36.0721C4.68162 36.1128 5.02714 38.1657 5.05764 38.5112L5.08813 38.9025L4.94075 38.9583C4.58507 39.0955 1.88181 39.6697 1.59218 39.6697C1.42449 39.6697 1.42449 39.6697 1.34319 39.3039C1.0942 38.1504 0.753758 35.5234 0.652134 33.9278C0.626725 33.4654 0.586075 32.937 0.570832 32.7439L0.540343 32.4034H2.75072H4.96615L4.99156 32.1341C5.00683 31.9919 5.06782 31.3567 5.12876 30.7266C5.18465 30.0965 5.27613 29.2429 5.33203 28.8262C5.38793 28.4095 5.42347 28.064 5.41842 28.0589C5.38284 28.0233 4.10234 27.8811 3.8432 27.8811C3.44686 27.8811 3.31474 28.003 3.34015 28.3485C3.35031 28.4908 3.63995 28.6026 4.10234 28.6534C4.34117 28.6738 4.55967 28.7195 4.58507 28.7449C4.67654 28.8364 4.67145 29.3801 4.56983 30.4929C4.51394 31.1026 4.45804 31.6108 4.44788 31.6209C4.43772 31.6311 3.80255 31.6158 3.03527 31.5904C1.63283 31.5396 0.799489 31.4736 0.692784 31.4075C0.484446 31.2754 1.17551 26.001 1.59218 24.5376C1.6684 24.2886 1.67856 24.2733 1.84116 24.2733C2.08506 24.2733 2.79645 24.4258 4.07186 24.7561C4.68162 24.9136 5.37266 25.0813 5.60643 25.1321L6.03325 25.2286L6.21107 24.7103C6.31274 24.4309 6.61254 23.5823 6.87675 22.8303C7.14097 22.0731 7.35947 21.4329 7.35947 21.3973C7.35947 21.2195 6.10946 20.5081 5.76903 20.4928C5.63692 20.4877 5.59625 20.5182 5.49463 20.691C5.31676 21.006 5.33712 21.0975 5.62165 21.2042C5.75376 21.2499 6.03325 21.3567 6.25175 21.438L6.63794 21.5853L6.26697 22.6626C6.06374 23.2571 5.85033 23.8516 5.79953 23.9939L5.70295 24.2479L5.44383 24.2428C5.28122 24.2378 4.56983 24.0548 3.56373 23.7601C2.67449 23.501 1.94278 23.2825 1.93262 23.2774C1.9123 23.2672 2.49157 21.6819 2.78628 20.9349C3.17247 19.9745 3.50275 19.2377 4.05661 18.0995C4.67145 16.8394 4.82896 16.6005 5.02205 16.6005C5.11353 16.6005 5.65215 16.88 6.49565 17.3627C8.081 18.2723 8.56881 18.5314 8.6806 18.5314C8.7924 18.5314 9.25989 17.8963 10.2761 16.3871C10.9469 15.3861 11.079 15.1676 11.0485 15.0609C11.0129 14.9186 10.1847 14.2326 9.83918 14.0548C9.63081 13.9481 9.54442 13.9633 9.37168 14.1564C9.21921 14.3241 9.30561 14.4715 9.79341 14.9186L10.2507 15.3353L9.91539 15.8282C9.40727 16.5701 8.80767 17.378 8.68569 17.4847C8.5739 17.5863 8.5739 17.5863 8.30459 17.4542C7.70499 17.1595 5.65724 15.8282 5.56066 15.6707C5.48954 15.5589 5.61656 15.315 6.13486 14.5426C7.02408 13.2215 8.28428 11.6615 9.32088 10.6097L10.0424 9.87288L11.4042 11.1991C12.1562 11.9308 12.8829 12.6168 13.0201 12.7286L13.269 12.9369L13.6552 12.5609C14.0414 12.1899 14.6207 11.6869 15.7792 10.7164C16.1197 10.4318 16.4093 10.1777 16.4246 10.1523C16.4805 10.0609 15.5048 8.81088 15.2864 8.69908C15.1644 8.6381 15.1288 8.6381 14.9764 8.71431C14.6766 8.86678 14.7071 9.05987 15.1237 9.62389C15.2863 9.84239 15.4337 10.0456 15.454 10.0812C15.4744 10.1168 15.0831 10.4979 14.4124 11.0873L13.33 12.0375L13.0505 11.7326C12.8981 11.5649 12.3391 10.9704 11.8056 10.4064C11.2772 9.84239 10.8148 9.33427 10.7741 9.27837C10.7131 9.18689 10.7284 9.16149 10.957 8.95317C12.1257 7.9013 13.9042 6.52936 15.1593 5.70112C16.0587 5.11166 16.4347 4.90334 16.5719 4.92365C16.6532 4.93383 16.9276 5.35556 17.705 6.66656C18.2741 7.61677 18.767 8.43996 18.8077 8.49586C18.8788 8.59238 18.9195 8.57716 20.0932 8.01309C20.7589 7.69807 21.5973 7.29665 21.948 7.12387C22.3036 6.94604 22.6238 6.79358 22.6593 6.78344C22.7508 6.75295 22.6797 6.46837 22.3951 5.74684C22.1258 5.05576 22.0394 4.94401 21.7803 4.97955C21.6736 4.99482 21.5262 5.04563 21.4551 5.09134C21.3128 5.18282 21.3077 5.15742 21.5618 5.85355C21.6532 6.10254 21.7447 6.36167 21.765 6.42774C21.7955 6.53445 21.7447 6.57003 21.0689 6.89015C20.6674 7.08324 20.1187 7.33219 19.8493 7.44398L19.3514 7.65235L19.2294 7.48975C18.8788 7.03244 17.6491 4.80172 17.5932 4.52224C17.5678 4.37997 17.5831 4.35456 17.8016 4.20212C18.5841 3.6635 23.01 1.86979 23.7772 1.77833C24.3209 1.71227 24.4276 1.86471 24.7376 3.08423C25.2711 5.18791 25.4439 5.72653 25.6319 5.79765C25.7183 5.83323 29.4073 5.20823 29.636 5.11675C29.7732 5.06594 29.7732 5.06594 29.7427 4.67468C29.6665 3.78545 29.5699 3.26716 29.4581 3.17569C29.3311 3.06899 29.1228 3.09947 28.9957 3.24683C28.9195 3.33321 28.9043 3.45516 28.9043 4.00395V4.65436L28.7417 4.68485C28.6502 4.70009 28.1167 4.79663 27.5577 4.89825C26.9988 4.99991 26.4601 5.08625 26.3636 5.08625L26.1857 5.09134L25.9723 4.45619C25.7081 3.64825 25.3931 2.30679 25.3626 1.8139C25.3372 1.4328 25.3372 1.42772 25.4744 1.36674C25.9418 1.15333 28.4571 0.782394 30.3525 0.650276C30.7742 0.619792 31.2163 0.584222 31.3433 0.574056C31.7955 0.533405 32.3799 0.589303 32.4409 0.670604Z"
fill="#F2F2F2"
/>
<path
d="M11.3774 39.6467L17.1463 25.4508H11.6602V22.6229H20.4832V25.3942L14.7143 39.5901H20.4832V42.418H11.3774V39.6467ZM22.2451 22.6229H30.7287V25.4508H25.3557V30.6823H29.6258V33.5102H25.3557V39.5901H30.7287V42.418H22.2451V22.6229ZM37.0428 42.7008C35.5346 42.7008 34.3846 42.2766 33.5928 41.4282C32.801 40.561 32.4051 39.3262 32.4051 37.7237V22.6229H35.5157V37.95C35.5157 38.6286 35.6477 39.1188 35.9116 39.4204C36.1944 39.7221 36.5903 39.8729 37.0993 39.8729C37.6083 39.8729 37.9948 39.7221 38.2587 39.4204C38.5415 39.1188 38.6829 38.6286 38.6829 37.95V22.6229H41.6805V37.7237C41.6805 39.3262 41.2846 40.561 40.4928 41.4282C39.701 42.2766 38.551 42.7008 37.0428 42.7008ZM47.9398 42.7008C46.4316 42.7008 45.291 42.2766 44.518 41.4282C43.7451 40.561 43.3586 39.3262 43.3586 37.7237V36.5926H46.2996V37.95C46.2996 39.2319 46.8369 39.8729 47.9116 39.8729C48.4394 39.8729 48.8353 39.7221 49.0993 39.4204C49.3821 39.1 49.5234 38.5909 49.5234 37.8934C49.5234 37.0639 49.3349 36.3381 48.9579 35.7159C48.5808 35.075 47.8833 34.3114 46.8652 33.4254C45.5832 32.2942 44.6877 31.2762 44.1787 30.3713C43.6697 29.4475 43.4152 28.4106 43.4152 27.2606C43.4152 25.6959 43.8111 24.4893 44.6029 23.641C45.3947 22.7738 46.5447 22.3401 48.053 22.3401C49.5423 22.3401 50.664 22.7738 51.4181 23.641C52.1911 24.4893 52.5775 25.7147 52.5775 27.3172V28.1373H49.6366V27.1192C49.6366 26.4406 49.5046 25.9504 49.2407 25.6487C48.9767 25.3283 48.5902 25.168 48.0812 25.168C47.0443 25.168 46.5258 25.7996 46.5258 27.0627C46.5258 27.7791 46.7143 28.4483 47.0914 29.0705C47.4874 29.6926 48.1943 30.4467 49.2124 31.3328C50.5132 32.4639 51.4087 33.4914 51.8988 34.4151C52.389 35.3389 52.6341 36.4229 52.6341 37.6672C52.6341 39.2885 52.2288 40.5327 51.4181 41.3999C50.6263 42.2672 49.4669 42.7008 47.9398 42.7008Z"
fill="#F2F2F2"
/>
</svg>
);
}
export default Logo;
// Zeus.jsx
"use client";
import React, { useEffect } from "react";
import { useGLTF } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";
function ZeusModel({ position, scale, rotation, scrollYProgress }) {
const axesHelper = new THREE.AxesHelper(5);
const { scene } = useGLTF("./3dmodels/zeus_fix.glb");
useFrame((state, delta) => {
//console.log(-2 * (scrollYProgress.current * 0.3));
scene.add(axesHelper);
state.scene.rotation.set(
0,
Math.atan(scrollYProgress.current * Math.PI * 2) * 4,
0
);
state.scene.position.set(0, -2 * (scrollYProgress.current * 0.3), 0);
state.camera.position.set(0, 0, 2 - scrollYProgress.current * 1);
state.camera.lookAt(0, 0, 0);
});
return (
<>
<primitive
object={scene}
scale={scale}
position={position}
rotation={rotation}
/>
</>
);
}
Вам нужно скачать модель zeus_fix.glb, используя эту ссылку. Он был сделан LZ Creation и также доступен на sketchfab, но позиции не являются нулевыми, поэтому сначала вам нужно будет отредактировать его с помощью блендера. Чтобы избавить вас от этого, я загрузил исправленный файл, готовый к использованию, на megaupload.
Затем внутри общей папки нам нужно создать подпапку 3dmodels. Там мы разместим файл zeus_fix.glb.
Нам нужно использовать каталог "использовать клиент", предоставляемый nextjs, чтобы модель была отображена на клиенте.
В компоненте Zeus.jsx мы используем useFrame-Hook, предоставляемый трехволокном, для анимации свойства вращения моделей на каждом кадре, связанном с реквизитом scrollYProgress. Если значение scrollYProgress изменится, для камеры будет рассчитано новое значение вращения и положения, поэтому сцена изменится.
В настоящее время мы используем framer-motions useScroll Hook в нашем файле page.js, чтобы получить прогресс прокрутки страницы, так как он очень прост и удобен в использовании.
// excerpt from the page.js file, no need to change something,
// this code is already entirely contained in the file
import { useScroll } from "framer-motion";
export default function Home() {
const { scrollYProgress, scrollY } = useScroll();
//...
}
scrollYProgress возвращает значение от 0 до 1, где 0 обозначает начало нашей страницы и 1 - конец. В основном это обеспечило процент нашей позиции прокрутки для всей страницы.
Конфигурация Tailwind
И последнее, но не менее важное: нам нужно добавить некоторые опции в нашу конфигурацию попутного ветра, чтобы получить фон.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
fontFamily: {
headline: ["Bebas Neue", "sans serif"],
paragraph: ["Inter", "sans serif"],
},
backgroundImage: {
"hero-gradient": `
url('/img/Binary_001.png'),
linear-gradient(115.68deg, #000000 25.29%, #2B2B2B 94.75%);`,
"hero-background": 'url("/img/Binary_001.png")',
},
},
},
plugins: [],
};
Вы можете скачать изображение здесь. После этого вам нужно будет добавить его в новый каталог img в вашем общедоступном каталоге, как на изображении ниже.
Шрифт можно загрузить из Google, если вы также хотите его использовать.
Если вы правильно выполнили все шаги, ваш каталог должен выглядеть следующим образом. Компоненты, которые мы создаем, содержат весь код, необходимый для достижения результата, показанного в видео.
Если вы хотите освоить искусство создания анимаций и ищете квалифицированного наставника, Teacher Army может предложить вам свою помощь. Пройдите по ссылке и оставьте заявку и мы подберем для вас опытного ментора по программированию.
В индивидуальной консультации он сможет подробно объяснить вам любую тему, связанную с созданием анимаций. Не упустите возможность получить профессиональное руководство и достичь ваших целей в этой увлекательной области!