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, {
             writable: true,
             value: void 0
         });
         _world.set(this, {
             writable: true,
             value: void 0
         });
         _updateBalls.set(this, {
             writable: true,
             value:


                 (ball, index, balls) => {
                     ball.position.copy(ball.body.position);
                     ball.quaternion.copy(ball.body.quaternion);

                     const damping = ball.body.position.y < 6 &&
                         ball.body.position.y > -1 ? .2 : 0;
                     ball.body.angularDamping = damping;
                     ball.body.linearDamping = damping;

                     const depth = ball.position.y;
                     const opacity = 1 + depth / 50;
                     ball.material.opacity = opacity;

                     // Dispose of balls once they've fallen far enough away
                     if (opacity <= 0) {
                         ball.material.dispose();
                         ball.geometry.dispose();
                         _classPrivateFieldGet(this, _world).removeBody(ball.body);
                         _classPrivateFieldGet(this, _scene).remove(ball);
                         _classPrivateFieldGet(this, _renderer).renderLists.dispose();
                         balls.splice(index, 1);
                     }
                 }
         });
         _shakeOnCollision.set(this, {
             writable: true,
             value:





                 e => {
                     const force = e.contact.getImpactVelocityAlongNormal();

                     if (force < _classStaticPrivateFieldSpecGet(Pen, Pen, _MIN_FORCE_FOR_CAMERA_DISTURBANCE)) return;

                     _classPrivateFieldGet(this, _camera).lookAt(new THREE.Vector3(force / 400, force / 300, force / 200));
                     setTimeout(() => _classPrivateFieldGet(this, _camera).lookAt(_classStaticPrivateFieldSpecGet(Pen, Pen, _INITIAL_CAMERA_TARGET)), force);
                 }
         });
         _render.set(this, {
             writable: true,
             value:

                 () => {
                     const dt = 1 / _classStaticPrivateFieldSpecGet(Pen, Pen, _FPS);
                     const {
                         innerHeight,
                         innerWidth
                     } = window;
                     _classPrivateFieldGet(this, _renderer).setSize(innerWidth, innerHeight);
                     _classPrivateFieldGet(this, _camera).aspect = innerWidth / innerHeight;
                     _classPrivateFieldGet(this, _camera).updateProjectionMatrix();

                     _classPrivateFieldGet(this, _world).step(dt);

                     _classPrivateFieldGet(this, _balls).f.........完整代码请登录后点击上方下载按钮下载查看