three+Lottie实现三维嘉年华大转盘抽奖代码-html代码-BFW代码库

three+Lottie实现三维嘉年华大转盘抽奖代码

代码语言：html

所属分类：大转盘

代码描述：three+Lottie实现三维嘉年华大转盘抽奖代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import "https://fonts.googleapis.com/css2?family=Aleo&display=swap";

* {
  font-family: Aleo, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
html,
body {
  color: #9d988a;
  font-size: 0.9em;
  overflow: hidden;
}
.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
}

#container {
  background-image: url(//repo.bfw.wiki/bfwrepo/threemodel/crnvlintro/intro-bg.jpg);
  background-size: cover;
  background-position: center;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 101;
  position: absolute;
}

#lottie {
  height: 40vh;
  max-height: 400px;
  z-index: 102;
  display: flex;
}

#explanation {
  display: flex;
  width: 66vw;
  max-width: 300px;
  background-color: #00000040;
  padding: 16px;
}

#enter {
  width: auto;
}
button {
  cursor: pointer;
  margin-top: 4px;
  padding: 4px;
  background-color: #9d988a;
  color: #6b2414;
  border-radius: 4px;
  border: none;
}
</style>


  
  
</head>

<body translate="no">
  <div id="container">
  <div id="lottie"> </div>

  <div id="enter">
    <button id="enter" onclick="start()">enter</button>
  </div>
</div>
<canvas class="webgl"></canvas>

<script>
  let start = () => {
    document.getElementById("container").style.display = "none";
    window.start3 = true;
    anim.stop();
  }
</script>
  
      <script type="module">
import * as THREE from "https://esm.sh/three@0.174.0";
import { OrbitControls } from "https://esm.sh/three@0.174.0/addons/controls/OrbitControls.js";
import { GLTFLoader } from "https://esm.sh/three@0.174.0/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "https://esm.sh/three@0.174.0/examples/jsm/loaders/DRACOLoader";
import { RGBELoader } from "https://esm.sh/three@0.174.0/examples/jsm/loaders/RGBELoader";
import Lottie from "https://esm.sh/lottie-web";

window.start3 = false;
let cameraSetup = {
  cameraIsSettled: false,
  cameraTgt: {
    x: 0.11611507465368477,
    y: 3.5939784540499456e-16,
    z: 5.8682635668005005 },

  totalIterations: 900,
.........完整代码请登录后点击上方下载按钮下载查看