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="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrollTrigger.3.10.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ScrollToPlugin3.min.js"></script>
      <script type="module">


import * as THREE from '//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js';
import { OrbitControls } from '//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/controls/OrbitControls.js';
import { mergeBufferGeometries } from '//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/utils/BufferGeometryUtils.js';
import { GUI } from '//repo.bfw.wiki/bfwrepo/js/lil-gui.esm.js';

const container = document.querySelector('.container');
const boxCanvas = document.querySelector('#box-canvas');

let box = {
  params: {
    width: 27,
    widthLimits: [15, 70],
    length: 80,
    lengthLimits: [70, 120],
    depth: 45,
    depthLimits: [15, 70],
    thickness: .6,
    thicknessLimits: [.1, 1],
    fluteFreq: 5,
    fluteFreqLimits: [3.........完整代码请登录后点击上方下载按钮下载查看