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

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

代码语言：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 _classPrivateMetho.........完整代码请登录后点击上方下载按钮下载查看