three实现4种三维模型卡片动态动画展示效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：three实现4种三维模型卡片动态动画展示效果代码，包含新冠病毒、蚂蚁、海象、人类心脏三维动画展示。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
    }
  }
</script>
  <script src="https://kit.fontawesome.com/ddff61d36a.js" crossorigin="anonymous"></script>

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.bundle.5.3.2.js"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
    body {
  font-family: Poppins;
  padding: 0 20px;
}

.hr-line {
  border-top: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
    linear-gradient(90deg, White, DimGrey, White) border-box;
}

p {
  font-weight: 200;
}

a {
  text-decoration: none;
}

/* Simple loader indicating status while 3d model is loading */

.loader {
  position: absolute;
  width: 250px;
  height: 250px;
  margin: 0;
  padding: 0;
  top: 10px;
  left: 15px;
  background-color: transparent;
  border: 4px dashed Dodgerblue;
  border-radius: 50%;
  font-weight: bold;
  color: DodgerBlue;
  text-align: center;
}

/* --- Card CSS --- */

.card-3d {
  min-width: 280px;
  max-width: 860px;
  margin: 0 auto;
  background-image: radial-gradient(#404040, black);
  border: 1px solid WhiteSmoke;
  outline: 8px solid black;
  border-radius: 15px;
  box-shadow: 0 15px 15px LightGrey;
}

.card-3d-body {
  padding: 30px 15px 30px 15px;
  color: Whitesmoke;
}

.card-3d-title {
  font-size: 24px;
  font-weight: 600;
  text-wrap: balance;
}

.object-3d {
  position: relative;
  width: 280px;
  height: 280px;
  padding: 0;
}

.webgl {
  position: relative;
  transition: all;
  cursor: grab;
}

#webgl-1 {
  filter: drop-shadow(0px 30px 20px Black);
}

#webgl-2 {
  filter: drop-shadow(0px 60px 25px Black);
}

#webgl-3 {
  filter: drop-shadow(0px 50px 35px Black);
}

#webgl-4 {
  filter: drop-shadow(0px 50px 35px Black);
}

dotlottie-player {
  position: relative;
  display: inline-block;
  top: 12px;
  width: 35px;
  height: 35px;
  filter: brightness(80%);
}

.responsive {
  width: 100% !important;
  height: 100% !important;
}

.animate {
  animation: animate 3s ease-in-out;
}

@keyframes animate {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 100%;
  }
}

/* Quick fix to make loader and model smaller on mobile so that there is space on the side for scrolling down*/

@media screen and (max-width: 383px) {
  .card-3d-title {
    margin-top: 20px;
    text-align: center;
  }
  #webgl-1 {
    width: 180px !important;
    height: 180px !important;
  }
  #webgl-2 {
    width: 200px !important;
    height: 200px !important;
  }
  #webgl-3 {
    width: 200px !important;
    height: 200px !important;
  }
  #webgl-4 {
    width: 200px !important;
    height: 200px !important;
  }
  .object-3d {
    width: 180px !important;
    height: 180px !important;
  }
  .loader {
    width: 180px !important;
    height: 180px !important;
    top: -2px;
    left: 2px;
  }
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<h4 class="fw-bold text-center mt-4"><i class="fa-brands fa-unity fa-lg mt-5 me-3"></i>3D Model Card</h4>
<div class="hr-line mt-5 mb-5"></div>

<!-- Bootstrap Card 1 -->
<div class="card-3d mb-5">
  <div class="d-flex flex-wrap flex-row m-3 justify-content-center align-items-center">
    <div class="object-3d">
      <canvas class="webgl animate" id="webgl-1" width="280" height="280" style="cursor:grab;">
      </canvas>
      <button id="loader-1" class="loader" aria-hidden="true">
        <i class="fa fa-spinner fa-spin fa-2xl mb-4"></i>
        <p class="fw-bold m-0" style="font-size: 18px;">Loading...</p>
      </button>
    </div>
    <div class="col-md">
      <div class="card-3d-body d-flex flex-column">
        <p class="card-3d-title fw-bold text-center"><i class="fa-solid fa-virus-covid me-3"></i>Coronavirus SARS-CoV-2</p>
        <hr>
        <p class="card-3d-text">Coronaviruses are named after the crown-like spike proteins on their surface. In the 21st century, three coronaviruses, namely Severe Acute Respiratory Syndrome Coronavirus 2 (SARS-CoV-2), SARS-CoV, and Middle East respiratory syndrome related coronavirus (MERS-CoV), have emerged in the human population. The virus uses host machinery to produce its lipid envelope, which is studded with several S proteins giving the virus a crown-like appearance. The S protein plays a critical role in promoting cell attachment and fusion of the virus to the host membrane, it is trimeric and contains two distinct domains.
        </p>
        <hr>
        <p class="card-text text-center mb-2">
          <dotlottie-player class="me-2" src="//repo.bfw.wiki/bfwrepo/lottie/cube.lottie" background="transparent" loop="" direction="1" autoplay=""></dotlottie-player>3D
        </p>
      </div>
    </div>
  </div>
</div>
<br>

<!-- Bootstrap Card 2 -->
<div class="card-3d mb-4">
  <div class="d-flex flex-wrap flex-row m-3 justify-content-center align-items-center">
    <div class="object-3d">
      <canvas class="webgl animate" id="webgl-2" width="280" height="280" style="cursor:grab;">
      </canvas>
      <button id="loader-2" class="loader" aria-hidden="true">
        <i class="fa fa-spinner fa-spin fa-2xl mb-4"></i>
        <p class="fw-bold m-0">Loading...</p>
      </button>
    </div>
    <div class="col-md">
      <div class="card-3d-body d-flex flex-column">
        <p class="card-3d-title fw-bold text-center"><i class="fa-solid fa-bugs me-3"></i>Fire Ant</p>
        <hr>
        <p class="card-3d-text">Fire Ants comprise several species of ants in the genus Solenopsis, which includes over 200 species. A typical Fire Ant colony produces large mounds in open areas, and feeds mostly on young plants, insects and seeds. Unlike many other ant species, which bite and then spray acid on the wound, fire ants bite only to get a grip and then sting injecting a toxic alkaloid venom. Fire Ants are more aggressive than most native species and at any sign of watery danger, they pick up the unhatched eggs from the nest and latch onto each other to make a raft. They can survive floods and spread to new nesting grounds by floating for extended periods of time and are capable of lifting 20 times their own body weight!
        </p>
        <hr>
        <p class="card-text text-center mb-2">
          <dotlottie-player class="me-2" src="//repo.bfw.wiki/bfwrepo/lottie/cube.lottie" background="transparent" loop="" direction="1" autoplay=""></dotlottie-player>3D
        </p>
      </div>
    </div>
  </div>
</div>
<br>

<!-- Bootstrap Card 3 -->
<div class="card-3d mb-4">
  <div class="d-flex flex-wrap flex-row m-3 justify-content-center align-items-center">
    <div class="object-3d">
      <canvas class="webgl animate" id="webgl-3" width="280" height="280" style="cursor:grab;">
      </canvas>
      <button id="loader-3" class="loader" aria-hidden="true">
        <i class="fa fa-spinner fa-spin fa-2xl mb-4"></i>
        <p class="fw-bold m-0">Loading...</p>
      </button>
    </div>
    <div class="col-md">
      <div class="card-3d-body d-flex flex-column">
        <p class="card-3d-title fw-bold text-center"><i class="fa-solid fa-bacterium me-3"></i>Tardigrade</p>
        <hr>
        <p class="card-3d-text">Tardigrades known colloquially as water bears or moss piglets, are a phylum of eight-legged segmented micro-animals. They have been found in diverse regions of Earth's biosphere – mountaintops, the deep sea, tropical rainforests, and the Antarctic. Tardigrades are among the most resilient animals known, with individual species able to survive extreme conditions – such as exposure to extreme temperatures, extreme pressures, air deprivation, radiation, dehydration, and starvation. Tardigrades are prevalent in mosses and lichens and feed on plant cells, algae, and small invertebrates. When collected, they may be viewed under a low-power microscope, making them accessible to students and amateur scientists.
        </p>
        <hr>
        <p class="card-text text-center mb-2">
          <dotlottie-player class="me-2" src="//repo.bfw.wiki/bfwrepo/lottie/cube.lottie" background="transparent" loop="" direction="1" autoplay=""></dotlottie-player>3D
        </p>
      </div>
    </div>
  </div>
</div>
<br>

<!-- Bootstrap Card 4 -->
<div class="card-3d mb-4">
  <div class="d-flex flex-wrap flex-row m-3 justify-content-center align-items-center">
    <div class="object-3d">
      <canvas class="webgl animate" id="webgl-4" width="280" height="280" style="cursor:grab;">
      </canvas>
      <button id="loader-4" class="loader" aria-hidden="true">
        <i class="fa fa-spinner fa-spin fa-2xl mb-4"></i>
        <p class="fw-bold m-0">Loading...</p>
      </button>
    </div>
    <div class="col-md">
      <div class="card-3d-body d-flex flex-column">
        <p class="card-3d-title fw-bold text-center"><i class="fa-solid fa-heart-pulse me-3"></i>Human Heart</p>
        <hr>
        <p class="card-3d-text">The heart is a muscular organ that pumps blood through the blood vessels of the circulatory system. The pumped blood carries oxygen and nutrients to the body, while carrying metabolic waste such as carbon dioxide to the lungs. The heart pumps blood with a rhythm determined by a group of pacemaker cells in the sinoatrial node. These generate an electric current that causes the heart to contract, traveling through the atrioventricular node and along the conduction system of the heart. The heart beats at a resting rate close to 72 beats per minute. Exercise temporarily increases the rate, but lowers it in the long term, and is good for heart health.
       .........完整代码请登录后点击上方下载按钮下载查看