three+cannon实现三维小球自由落体落地计数动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three+cannon实现三维小球自由落体落地计数动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
        
        * {
          -moz-user-select: none;  
          -ms-user-select: none;  
          -webkit-user-select: none;  
          user-select: none;  
        }
        
        body {
          margin: 0;
          padding: 0;
          overflow: hidden;
        }
        
        canvas {
          left: 0;
          margin: 0 auto;
          position: absolute;
          right: 0;
          z-index: 0;
        }
        
        h1 {
          background-color: rgba(0, 0, 0, .5);
          top: 0;
          color: #ddd;
          font-family: helvetica;
          font-size: 1.3rem;
          left: 0;
          margin: 0 auto;
          padding: 8px 16px; 
          position: absolute;
          right: 0;
          text-align: center;
          z-index: 1;
        }
        
        #count {
          background-color: rgba(0, 0, 0, .5);
          color: #fff;
          font-family: Orbitron;
          left: 0;
          margin: 0 auto;
          padding: 8px 16px; 
          position: absolute;
          text-align: center;
          right: 0;
          top: 80px;
          z-index: 1;
        }
        
        #count h2 {
          font-size: 60px;
          line-height: 60px;
          margin: 0;
        }
        
        #instructions {
          background-color: rgba(0, 0, 0, .5);
          bottom: 0;
          color: #fff;
          font-family: helvetica;
          left: 0;
          margin: 0 auto;
          padding: 8px 16px; 
          position: absolute;
          right: 0;
          text-align: center;
          z-index: 1;
        }
    </style>



</head>

<body>
    <h1 id="">Generating and disposing of objects</h1>
    <div id="count">
        <h2></h2>Balls</div>
    <div id="instructions">Click / touch + hold to drop more balls.</div>
    <canvas id="demo"></canvas>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/cannon.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.133.js"></script>
    <script>
     function _classPrivateMethodGet(receiver, privateSet, fn) {
     if (!privateSet.has(receiver)) {
         throw new TypeError("attempted to get private field on non-instance");
     }
     return fn;
 }

 function _classStaticPrivateFieldSpecGet(receiver, classConstructor, descriptor) {
     if (receiver !== classConstructor) {
         throw new TypeError("Private static access of wrong provenance");
     }
     if (descriptor.get) {
         return descriptor.get.call(receiver);
     }
     return descriptor.value;
 }

 function _classPrivateFieldGet(receiver, privateMap) {
     var descriptor = privateMap.get(receiver);
     if (!descriptor) {
         throw new TypeError("attempted to get private field on non-instance");
     }
     if (descriptor.get) {
         return descriptor.get.call(receiver);
     }
     return descriptor.value;
 }

 function _classPrivateFieldSet(receiver, privateMap, value) {
     var descriptor = privateMap.get(receiver);
     if (!descriptor) {
         throw new TypeError("attempted to set private field on non-instance");
     }
     if (descriptor.set) {
         descriptor.set.call(receiver, value);
     } else {
         if (!descriptor.writable) {
             throw new TypeError("attempted to set read only private field");
         }
         descriptor.value = value;
     }
     return value;
 }
 console.clear();
 var _camera = new WeakMap();
 var _controls = new WeakMap();
 var _balls = new WeakMap();
 var _shouldDropBall = new WeakMap();
 var _renderer = new WeakMap();
 var _scene = new WeakMap();
 var _timeOfLastBall = new WeakMap();
 var _world = new WeakMap();
 var _dumpBalls = new WeakSet();
 var _addControls = new WeakSet();
 var _makeBall = new WeakSet();
 var _makeLights = new WeakSet();
 var _makePlatform = new WeakSet();
 var _updateBalls = new WeakMap();
 var _shakeOnCollision = new WeakMap();
 var _render = new WeakMap();

 class Pen {


     constructor() {
         _makePlatform.add(this);
         _makeLights.add(this);
         _makeBall.add(this);
         _addControls.add(this);
         _dumpBalls.add(this);
         _camera.set(this, {
             writable: true,
             value: void 0
         });
         _controls.set(this, {
             writable: true,
             value: void 0
         });
         _balls.set(this, {
             writable: true,
             value: []
         });
         _shouldDropBall.set(this, {
             writable: true,
             value: false
         });
         _renderer.set(this, {
             writable: true,
             value: void 0
         });
         _scene.set(this, {
             writable: true,
             value: void 0
         });
         _timeOfLastBall.set(this, .........完整代码请登录后点击上方下载按钮下载查看