cannon+three打造一个三维小球重力下滑滑滑梯效果代码-html代码-BFW代码库

cannon+three打造一个三维小球重力下滑滑滑梯效果代码

代码语言：html

所属分类：三维

代码描述：cannon+three打造一个三维小球重力下滑滑滑梯效果代码

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

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

<head>

  <meta charset="UTF-8">


 
  <style>
    :root {
      --tp-base-background-color: hsla(0, 0%, 40%, 1.00);
      --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
      --tp-button-background-color: hsla(0, 0%, 100%, 1.00);
      --tp-button-background-color-active: hsla(0, 0%, 85%, 1.00);
      --tp-button-background-color-focus: hsla(0, 0%, 90%, 1.00);
      --tp-button-background-color-hover: hsla(0, 0%, 95%, 1.00);
      --tp-button-foreground-color: hsla(230, 20%, 11%, 1.00);
      --tp-container-background-color: hsla(0, 0%, 0%, 0.20);
      --tp-container-background-color-active: hsla(0, 0%, 0%, 0.35);
      --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.30);
      --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.25);
      --tp-container-foreground-color: hsla(0, 0%, 100%, 0.90);
      --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.50);
      --tp-input-background-color: hsla(0, 0%, 0%, 0.50);
      --tp-input-background-color-active: hsla(0, 0%, 0%, 0.65);
      --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.60);
      --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.55);
      --tp-input-foreground-color: hsla(0, 0%, 100%, 0.90);
      --tp-label-foreground-color: hsla(0, 0%, 100%, 0.90);
      --tp-monitor-background-color: hsla(0, 0%, 0%, 0.50);
      --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.50);
    }

    html {
      font-family: 'Dosis', Arial, sans-serif;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }

    *,
    *::after,
    *::before {
      box-sizing: border-box;
    }

    body {
      padding: 0;
      margin: 0;
      background-color: #1c7dff;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      cursor: -moz-grabg;
      cursor: -webkit-grab;
    }

    .credits {
      position: absolute;
      z-index: 1;
      bottom: 0;
      width: auto;
      background-color: #07326b;
      padding: 10px;
      cursor: pointer;
      font-size: 8pt;
      font-weight: lighter;
    }

    .credits a {
      color: #ffffff;
      text-decoration: none;
    }

    .credits h1 {
      margin: inherit;
    }

    .credits:hover {
      background-color: #ff1111;
      color: #ffffff;
    }
  </style>

  
  
<style>
html {
  font-family: "Dosis", Arial, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.stats {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}
</style>


</head>

<body>
  <div class="stats">
</div>

 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.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/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TransformControls.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script typ.........完整代码请登录后点击上方下载按钮下载查看