Vercel般的花活 - 3D模型应用

518651

已于 2024-02-21 20:52:37 修改

阅读量421

点赞数 10

分类专栏： UI Design 文章标签： react typescript ui

于 2024-02-21 20:25:09 首次发布

本文链接：https://blog.csdn.net/weixin_46108571/article/details/136219315

版权

UI Design 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

在这里插入图片描述

概要：

在本文章中，我将向各位分享3种效果组成的Hero组件，可直接用于项目的首页：

聚光灯(引导用户视线) ，组件名称:Spotlight
3D魔方(尽可能的打破次元屏障，带入用户) ，组件名称:Spline 加载 3D 资产完成
Grid 背景(#000很单调不是吗)，CSS名称:Custom-Grid-BG

使用技术栈：

NextJS 14
TailwindCSS
NextUI
lucide Icon 图标库
splinetool 3D资产库，类似Three.js

最终效果如下：
请添加图片描述
受文件大小限制，清晰度降低以图片为准

Grid 网格布局

引用该CSS即可：

.Custom-Grid-BG {
  @apply  bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px];
}

聚光灯

安装依赖包:

npm i framer-motion clsx tailwind-merge

创建合并TailwindCSS Class 类文件,在本文中使用 utils/cn.ts 写入如下代码:

import React from "react";
import { cn } from "@/utils/cn";

type SpotlightProps = {
  className?: string;
  fill?: string;
};

export const Spotlight = ({ className, fill }: SpotlightProps) => {
  return (
    <svg
      className={cn(
        "animate-spotlight pointer-events-none absolute z-[1]  h-[169%] w-[138%] lg:w-[84%] opacity-0",
        className
      )}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 3787 2842"
      fill="none"
    >
      <g filter="url(#filter)">
        <ellipse
          cx="1924.71"
          cy="273.501"
          rx="1924.71"
          ry="273.501"
          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
          fill={fill || "white"}
          fillOpacity="0.21"
        ></ellipse>
      </g>
      <defs>
        <filter
          id="filter"
          x="0.860352"
          y="0.838989"
          width="3785.16"
          height="2840.26"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="BackgroundImageFix"
            result="shape"
          ></feBlend>
          <feGaussianBlur
            stdDeviation="151"
            result="effect1_foregroundBlur_1065_8"
          ></feGaussianBlur>
        </filter>
      </defs>
    </svg>
  );
};

在组件库文件夹下创建聚光灯组件 Spotlight.tsx ,写入如下代码:

import React from "react";
import { cn } from "@/utils/cn";

type SpotlightProps = {
  className?: string;
  fill?: string;
};

export const Spotlight = ({ className, fill }: SpotlightProps) => {
  return (
    <svg
      className={cn(
        "animate-spotlight pointer-events-none absolute z-[1]  h-[169%] w-[138%] lg:w-[84%] opacity-0",
        className
      )}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 3787 2842"
      fill="none"
    >
      <g filter="url(#filter)">
        <ellipse
          cx="1924.71"
          cy="273.501"
          rx="1924.71"
          ry="273.501"
          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
          fill={fill || "white"}
          fillOpacity="0.21"
        ></ellipse>
      </g>
      <defs>
        <filter
          id="filter"
          x="0.860352"
          y="0.838989"
          width="3785.16"
          height="2840.26"
          filterUnits="userSpaceOnUse"
          colorInterpolationFilters="sRGB"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
          <feBlend
            mode="normal"
            in="SourceGraphic"
            in2="BackgroundImageFix"
            result="shape"
          ></feBlend>
          <feGaussianBlur
            stdDeviation="151"
            result="effect1_foregroundBlur_1065_8"
          ></feGaussianBlur>
        </filter>
      </defs>
    </svg>
  );
};

最后请在您的tailwind.config.js 文件中配置：

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
const {
  default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{ts,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      animation: {
        spotlight: "spotlight 2s ease .75s 1 forwards",  <- 该行
      },
      keyframes: {
        spotlight: {<- 该行至
          "0%": {
            opacity: 0,
            transform: "translate(-72%, -62%) scale(0.5)",
          },
          "100%": {
            opacity: 1,
            transform: "translate(-50%,-40%) scale(1)",
          },
        },<- 该行
      },
    },
  },
  plugins: [],
};

至此您的聚光灯组件已准备完毕，使用代码:

<Spotlight
        className="-top-40 left-0 md:left-60 md:-top-20"
        fill="white"
 />

3D模型 (魔方)

安装项目依赖：

npm install @splinetool/react-spline @splinetool/runtime

如果你仅仅想加载模型

import Spline from '@splinetool/react-spline';

export default function App() {
  return (
    <div>
      <Spline scene="3D Model URL" />
    </div>
  );
}

加载魔方:

<Spline className="grayscale md:order-2 md:w-[700px] hidden items-center justify-center lg:flex lg:animate-[open-scale-up-fade_1.5s_ease-in-out] before:from-mint-5/5 before:to-yellow-6/25 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-full before:rounded-full before:bg-gradient-to-br before:blur-[100px] " scene="魔方加载URL" />

本教程不提供公网加载魔方地址，具体魔方3D资产文件请加入QQ频道获取

HERO组件代码:

"use client"
import { Button, Link } from "@nextui-org/react"
import { Font_Sans, Arch } from "@/lib/utils/font"
import Spline from "@splinetool/react-spline"
import { ArrowRight, ChevronRight } from "lucide-react"
import { Spotlight } from "@/components/ui/Spotlight"


export default function TestPage() {
    return (
        <div className="w-screen h-screen Custom-Grid-BG">
            <div className="fixed w-screen h-screen rotate-0 inset-x-1/4">
                <Spotlight
                    className="-top-40 right-0 md:right-60 md:-top-20"
                    fill="white"
                />
            </div>
            <div className={`mx-auto max-w-5xl px-6 pb-8 md:h-screen md:max-h-[950px] md:max-w-7xl ${Font_Sans.className}`}>
                <div className="flex h-full flex-col items-center justify-between md:flex-row md:pb-24">
                    <div className="origin-center-left order-2 max-w-3xl animate-hero-text-slide-up-fade sm:shrink-0 md:order-1 lg:pl-16">
                        <div className="flex items-center justify-center md:inline-flex">
                            <div className="mb-6 p-px rounded-full bg-gradient-to-r from-[#02fcef70] via-[#ffb52b70 ] to-[#a02bfe70] ">
                                <Link href="#" className="flex text-[14px]  items-center justify-center rounded-full bg-Ver_Gray_3">
                                    <div className="inline-flex items-center gap-1 whitespace-nowrap px-3 py-1">
                                        <span className="text-xs">Build The World Best One Website</span>
                                        <ChevronRight className="w-4 h-4" />
                                    </div>
                                </Link>
                            </div>
                        </div>
                        <h1 className="font-book font-styling font-display font-effect-hero text-center md:text-left text-[4rem] md:text-7xl leading-[4.35rem] md:leading-[5rem] tracking-tight  bg-gradient-to-br from-foreground-800 to-foreground-500 bg-clip-text text-transparent">
                           The Hero Build <br />Dev.518651
                        </h1>
                        <p className={`text-Ver_Black mb-8 mt-4 max-w-[30rem] text-center leading-7 md:text-left text-base md:text-[1.125rem] md:leading-[1.5] text-slate-11 font-semibold ${Arch.className}`}>
                            "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
                        </p>
                        <div className="flex flex-col justify-center gap-4 md:flex-row md:justify-start">
                            <Button href="#" variant="faded" className="border"> <div className="flex items-center gap-x-2"> Get Started <ArrowRight className="w-4 h-4" /> </div> </Button>
                            <Link isBlock> <div className="flex items-center gap-x-2"> Document <ArrowRight className="w-4 h-4" /> </div> </Link>
                        </div>
                    </div>
                    <Spline className="grayscale md:order-2 md:w-[700px] hidden items-center justify-center lg:flex lg:animate-[open-scale-up-fade_1.5s_ease-in-out] before:from-mint-5/5 before:to-yellow-6/25 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-full before:rounded-full before:bg-gradient-to-br before:blur-[100px] " scene="3D 魔方加载网络地址" />
                </div>
            </div>
        </div>

    )
}