three+gsap实现滚动鼠标三维包装箱子折叠效果代码-html代码-BFW代码库

three+gsap实现滚动鼠标三维包装箱子折叠效果代码

代码语言：html

所属分类：三维

代码描述：three+gsap实现滚动鼠标三维包装箱子折叠效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
    padding: 0;
    margin: 0;
}
.page {
    width: 100%;
    height: 200vh;
}
.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}
.container .ui-controls {
    position: absolute;
    top: 70%;
    left: 80%;
    transform: translateX(-100%);
    user-select: none;
    font-family: sans-serif;
    text-align: end;
    min-width: 200px;
}
.container button {
    display: inline-block;
    text-align: center;
    font-size: 20px;
    min-width: 25px;
    min-height: 25px;
    margin-bottom: 1em;
    margin-right: .2em;
    padding: 0;
    cursor: pointer;
}
.container .ui-controls {
    position: absolute;
    top: 70%;
    left: 85%;
    user-select: none;
    font-family: sans-serif;
    text-align: end;
}
.container button {
    font-size: 15px;
    width: 25px;
    height: 25px;
    margin-bottom: 1em;
    margin-right: .2em;
    cursor: pointer;
}
.container button.disabled {
    pointer-events: none;
    cursor: auto;
    opacity: .3;
}
</style>




</head>

<body translate="no" >
  <!-- 
// FULL TUTORIAL:
//
// https://tympanus.net/codrops/2022/12/13/how-to-code-an-on-scroll-folding-3d-cardboard-box-animation-with-three-js-and-gsap/
// -->

<div class="page">
  <div class="container">
    <canvas id="box-canvas"></canvas>
    <div class="ui-controls">
      <button id="zoom-in">+</button>
      <button id="zoom-out">-</button>
      <div>Scroll ⬇ To Animate</div>
    </div>
  </div>
</div>


<script type="te.........完整代码请登录后点击上方下载按钮下载查看