three打造一个圣诞节开炮送礼小游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：three打造一个圣诞节开炮送礼小游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
* {
  font-family: 'Fredoka One', sans-serif;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

body {
  background: #eee;
  background: -webkit-gradient(linear, right top, left top, from(#ddd), to(#eee));
  background: linear-gradient(to left, #ddd, #eee);
  position: relative;
  overflow: hidden;
}

.page {
  z-index: 2;
  position: relative;
  width: calc(80vw - 80px);
  padding: 20px 40px;
  margin: 0;
}

#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.spacer {
  display: block;
  width: 100%;
  height: 40vh;
}

.status {
  font-size: 3rem;
}

#loading {
  position: absolute;
  background-color: #3A3F69;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  color: white;
  font-size: 3rem;
  font-family: 'Fredoka One', cursive;
}

#ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#ui .positioner {
  width: 130vh;
  max-width: 100vw;
  height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 100px 1fr 200px;
  -webkit-box-align: end;
          align-items: flex-end;
}
#ui .speech-bubble {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
          justify-content: flex-end;
}
#ui #bubble {
  padding: 1.5rem 2rem;
  width: calc(100% - 4rem);
  max-width: calc(400px - 4rem);
  background-color: white;
  border-radius: 1.7rem;
  margin-bottom: 3rem;
  position: relative;
  cursor: pointer;
}
#ui #bubble::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid white;
  position: absolute;
  left: calc(100% - 0.25rem);
  bottom: 1rem;
}

#text-highlight {
  font-size: 1.5rem;
  display: inline-block;
}

#next {
  color: #505050;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-align: right;
  margin-top: 1rem;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
  display: none;
}

#steve {
  width: 100%;
}

.game {
  cursor: url(//repo.bfw.wiki/bfwrepo/image/5fd156da049b7.png) 41 41, auto;
}
</style>



</head>

<body >
  <div id="canvas-container"></div>
<div id="ui">
    <div class="positioner">
        <div></div>
        <div class="speech-bubble">
            <div id="bubble">
                <span id="text">Oh no! Look at this dull room, not at all Christmassy.</span>
                <span id="text-highlight"></span>
                <div id="next">Next</div>
            </div>
        </div>

            <img id="steve" src="//repo.bfw.wiki/bfwrepo/image/5fd156fd9431a.png" alt="Steve">

    </div>
</div>
<div id="loading">Loading</div>
    
      <script type="module">
import {
TextureLoader, RepeatWrapping,
Scene, Color, Fog, HemisphereLight,
PointLight, MeshPhongMaterial, Mesh,
PlaneBufferGeometry, WebGLRenderer,
PerspectiveCamera, Vector3,
Group, BoxGeometry, IcosahedronGeometry,
CylinderGeometry, Cache, PCFSoftShadowMap,
LoadingManager, AxisHelper } from
"https://cdn.skypack.dev/three@0.122.0";

import { GLTFLoader } from "https://cdn.skypack.dev/three@0.122.0/examples/jsm/loaders/GLTFLoader";
import Stats from "https://cdn.skypack.dev/three@0.122.0/examples/jsm/libs/stats.module";
import CANNON from "https://cdn.skypack.dev/cannon@0.6.2";
import gsap from "https://cdn.skypack.dev/gsap@3.5.1";


let showGuides = false;

// 👆 change to true to see the physics objects

let extraBounce = 0;

// 👆 change to 1 for bouncey fun!

class Stage
{
  constructor(scale, stageSize, onReady, showStats)
  {
    const manager = new LoadingManager();

    this.showStats = showStats;
    this.models = {};
    this.stats = new Stats();

    manager.onLoad = function () {

      console.log('Loading complete!');
      setTimeout(() => onReady(), 100);

    };

    this.wrappingImages = [
    'data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看