kokomi+three+gsap实现webgl三维图片圆墙图文展示交互效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：kokomi+three+gsap实现webgl三维图片圆墙图文展示交互效果代码，点击可拖动圆圈内的图片显示文本。
代码标签： kokomi three gsap webgl 三维图片圆墙图文展示交互
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua.css">
  
<style>
body {
    margin: 0;
    overflow: hidden;
}

#sketch {
    width: 100vw;
    height: 100vh;
    background: black;
}

body {
    user-select: none;
}

.loading span {
    animation: blur 1.5s calc(var(--i) / 5 * 1s) alternate infinite;
}

@keyframes blur {
    to {
        filter: blur(2px);
    }
}

#sketch {
    position: fixed;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: black;
}

.gallery {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.gallery .gallery-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22rem;
    height: 10rem;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.hello-text {
    overflow: hidden;
}

.hello-text .char {
    display: inline-block;
}

.pulse {
    --pulse-width: 2.25rem;
    --pulse-color: white;
    --pulse-border-width: 1px;

    position: relative;
    width: var(--pulse-width);
    height: var(--pulse-width);
}

.pulse::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    box-shadow: 0 0 0 var(--pulse-border-width) var(--pulse-color);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    50% {
        opacity: 1;
    }

    to {
        transform: scale(1.2);
    }
}

.enlarge-click-area {
    position: relative;
}

.enlarge-click-area::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(2);
}

canvas.-candrag {
    cursor: grab;
}

canvas.-dragging {
    cursor: grabbing;
}

.slide-in-line {
    overflow: hidden;
}

.btn {
    --hue: 190;
    --ease-in-duration: 0.25s;
    --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-out-duration: 0.65s;
    --ease-out-delay: var(--ease-in-duration);
    --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    padding: 1rem 3rem;
    font-size: 1rem;
    line-height: 1.5;
    color: white;
    text-decoration: none;
    background-color: hsl(var(--hue), 100%, 41%);
    border: 1px solid hsl(var(--hue), 100%, 41%);
    outline: transparent;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: 0.25s;
    transition-property: transform, opacity;
}

.btn:hover {
    background: hsl(var(--hue), 100%, 31%);
}

.btn-primary {
    --hue: 60;
}

.btn-ghost {
    color: hsl(var(--hue), 100%, 41%);
    background-color: transparent;
    border-color: hsl(var(--hue), 100%, 41%);
}

.btn-ghost:hover {
    color: white;
}

.btn-border-stroke {
    border-color: hsla(var(--hue), 100%, 41%, 0.35);
}

.btn-border-stroke .btn-borders {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn-border-stroke .btn-borders .border-top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleX(0);
    transform-origin: left;
}

.btn-border-stroke .btn-borders .border-right {
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleY(0);
    transform-origin: bottom;
}

.btn-border-stroke .btn-borders .border-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleX(0);
    transform-origin: left;
}

.btn-border-stroke .btn-borders .border-left {
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    background: hsl(var(--hue), 100%, 41%);
    transform: scaleY(0);
    transform-origin: bottom;
}

.btn-border-stroke .btn-borders .border-left {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}

.btn-border-stroke .btn-borders .border-bottom {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}

.btn-border-stroke .btn-borders .border-right {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
}

.btn-border-stroke .btn-borders .border-top {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
}

.btn-border-stroke:hover {
    color: hsl(var(--hue), 100%, 41%);
    background: transparent;
}

.btn-border-stroke:hover .border-top,
.btn-border-stroke:hover .border-bottom {
    transform: scaleX(1);
}

.btn-border-stroke:hover .border-left,
.btn-border-stroke:hover .border-right {
    transform: scaleY(1);
}

.btn-border-stroke:hover .border-left {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
}

.btn-border-stroke:hover .border-bottom {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
}

.btn-border-stroke:hover .border-right {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}

.btn-border-stroke:hover .border-top {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
}

.btn-text-float-up::after {
    position: absolute;
    content: attr(data-text);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateY(35%);
    transition: 0.25s ease-out;
    transition-property: transform, opacity;
}

.btn-text-float-up .btn-text {
    display: block;
    transition: 0.75s 0.1s var(--ease-out-exponential);
    transition-property: transform, opacity;
}

.btn-text-float-up:hover .btn-text {
    opacity: 0;
    transform: translateY(-25%);
    transition: 0.25s ease-out;
    transition-property: transform, opacity;
}

.btn-text-float-up:hover::after {
    opacity: 1;
    transform: translateY(0);
    transition: 0.75s 0.1s var(--ease-out-exponential);
    transition-property: transform, opacity;
}
</style>


</head>

<body >
  <div id="sketch"></div>
<div>
    <div class="fixed z-5 top-0 left-0 loader-screen w-screen h-screen transition-all duration-300 bg-black">
        <div class="absolute hv-center">
            <div class="loading text-white text-3xl tracking-widest">
                <span style="--i: 0">L</span>
                <span style="--i: 1">O</span>
                <span style="--i: 2">A</span>
                <span style="--i: 3">D</span>
                <span style="--i: 4">I</span>
                <span style="--i: 5">N</span>
                <span style="--i: 6">G</span>
            </div>
        </div>
    </div>
    <div class="fixed z-4 top-12 left-18">
        <img src="//repo.bfw.wiki/bfwrepo/icon/60ecf359eb0c5.png" class="h-12 block" alt="" />
    </div>
    <div class="gallery">
        <img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/643225b447933.png" crossorigin="anonymous"
            alt="" />
        <img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/6486d7dc46647.png" crossorigin="anonymous"
            alt="" />
        <img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/649d3d1393275.png" crossorigin="anonymous"
            alt="" />
        <img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/63114687db61b.png" crossorigin="anonymous"
            alt="" />
        <img class="gallery-item" src="//repo.bfw.wiki/bfwrepo/image/63114663ad481.png" crossorigin="anonymous"
            alt="" />
    </div>
    <div id="scene-1">
        <div class="absolute top-20 h-center">
            <div class="text-5xl text-white hello-text whitespace-no-wrap" data-splitting>Hello, we are Kessoku Band.
            </div>
        </div>
        <div class="absolute top-100 h-center">
            <div class="click-hint cursor-pointer enlarge-click-area opacity-0">
                <div class="pulse" style="--pulse-width: 6rem;--pulse-border-width: 2px;">
                    <div class="absolute hv-center">
                        <div class="pulsate-fwd">
                            <div class="w-16 h-16 bg-white rounded-full opacity-75"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="scene-2" class="opacity-0 pointer-events-none">
        <div class="absolute left-54" style="top: 24vh;">
            <div class="flex flex-col space-y-6">
                <div class="slide-in-line">
                    <div class="slide-in-line-child name-text text-5xl text-white"></div>
                </div>
                <div class="slide-in-line">
                    <div class="slide-in-line-child job-text text-3xl text-white"></div>
                </div>
                <div class="fade-in-lines">
                    <div class="fade-in-lines-child intro-text text-lg text-white w-64"></div>
                </div>
                <div class="see-more-link-container">
                    <a class="see-more-link" target="_blank" href="#">
                        <button data-text="See More"
                            class="see-more-link-btn dash-btn btn btn-primary btn-ghost btn-border-stroke  btn-text-float-up">
                            <div class="btn-borders">
                                <div class="border-top"></div>
                                <div class="border-right"></div>
                                <div class="border-bottom"></div>
                                <div class="border-left"></div>
                            </div>
                            <span class="btn-text">See More</span>
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/kokomi.umd.149.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.144.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/postprocessing.6.32.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/splitting.1.0.6.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/camera-controls.2.7.0.js"></script>
      <script >
const vertexShader = `
uniform float iTime;
uniform vec3 iResolution;
uniform vec4 iMouse;

varying vec2 vUv;

void main(){
    vec3 p=position;
    gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
    
    vUv=uv;
}
`;

const fragmentShader = `
uniform vec3 uShadowColor;

void mainImage(out vec4 fragColor,in vec2 fragCoord){
    vec2 uv=fragCoord/iResolution.xy;
    uv-=.5;
    float d=length(uv);
    float c=smoothstep(sqrt(.5)*.6,0.,d)*.9;
    c=pow(c,3.);
    fragColor=vec4(uShadowColor,c);
}
`;

const vertexShader2 = `
uniform float iTime;
uniform vec3 iResolution;
uniform vec4 iMouse;

varying vec2 vUv;

void main(){
    vec3 p=position;
    gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.);
    
    vUv=uv;
}
`;

const fragmentShader2 = `
#define iTime time
#define iResolution resolution
#define iChannel0 inputBuffer

uniform float uProgress;

void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor)
{
    vec4 diffuseBase=texture(iChannel0,uv);
    
    vec2 p=uv;
    
    vec4 col=diffuseBase;
    
    float mask=smoothstep(-.1,.6,p.x);
    float leftFade=mix(1.,mask,uProgress);
    col*=leftFade;
    
    // outputColor=vec4(vec3(mask),1.);
    outputColor=col;
}
`;

const vertexShader3 = `
uniform float iTime;
uniform vec3 iResolution;
uniform vec4 iMouse;

varying vec2 vUv;

void main(){
    vec3 p=position;
    gl_Position=vec4(p,1.);
    
    vUv=uv;
}
`;

const fragmentShader3 = `
uniform vec3 uColor1;
uniform vec3 uColor2;

void mainImage(out vec4 fragColor,in vec2 fragCoord){
    vec2 uv=fragCoord/iResolution.xy;
    vec3 col1=uColor1;
    vec3 col2=uColor2;
    vec3 col=mix(col1,col2,uv.x);
    float alpha=smoothstep(.5,1.,uv.y)*.5;
    fragColor=vec4(col,alpha);
}
`;

class LeftFadeEffect extends POSTPROCESSING.Effect {
  constructor({
    blendFunction = POSTPROCESSING.BlendFunction.NORMAL,
    progress = 1 } =
  {}) {
    super("LeftFadeEffect", fragmentShader2, {
      uniforms: new Map([["uProgress", new THREE.Uniform(progress)]]),
      blendFunction });

  }}


class Sketch extends kokomi.Base {
  async create() {
    const config = {
      bgColor: "#050505",
      groundColor: "#050505",
      radius: 280,
      rounded: 900,
      groundY: -81,
      debug: false };


    const carouselData = [
    {
      shadowColor: "#FFFFFF",
      name: "Kessoku Band",
      job: "Team",
      intro: `Kessoku Band is the main unit band of Bocchi the Rock! series. The name is a pun on "Kessoku" (unity) and "Kessoku Band" (cable tie). The band has been drawn as the center of this work.`,
      link: "",
      btnHue: "60",
      bgColor1: "#000000",
      bgColor2: "#000000" },

    {
      shadowColor: "#F59BB1",
      name: "Gotou Hitori",
      job: "Guitar",
      intro: `An extremely timid and introverted first-year student in high school. She is often referred as Bocchi-chan. She is in charge of the responsibility of playing the lead guitar for Kessoku Band.`,
      link: "",
      btnHue: "320",
      bgColor1: "#F64571",
      bgColor2: "#F59BB1" },

    {
      shadowColor: "#F1D576",
      name: "Ijichi Nijika",
      job: "Drum",
      intro: `An energetic and cheerful second-year high school student. She is the drummer of Kessoku Band. The organizer of her band who takes care of Hitori was already joined Kessoku Band.`,
      link: "",
      btnHue: "30",
      bgColor1: "#EDC12F",
      bgColor2: "#F1D576" },

    {
      shadowColor: "#3861A6",
      name: "Yamada Ryou",
      job: "Bass",
      intro: `A cool and solitary second-year high school student. She is the bassist of Kessoku Band and Nijika's best friend. Her hobbies are out of the ordinary, and she rejoices when called a weirdo.`,
      link: "",
      btnHue: "210",
      bgColor1: "#3861A6",
      bgColor2: "#5A80C2" },

    {
      shadowColor: "#DF4955",
      name: "Kita Ikuyo",
      job: "Vocal",
      intro: `A bright and popular first year of high school. She is in charge of the guitar and vocals of Kessoku Band. She is a cheerful character who likes to interact with people without hesitation.`,
      link: .........完整代码请登录后点击上方下载按钮下载查看