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

代码语言：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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tweakpane.3.02.js"></script>

      <script >

class App {
  init() {
    this.setup();
    this.createScene();
    this.createCamera();
    this.addCameraControls();
    this.addAmbientLight();
    this.addDirectionalLight();
    this.addPhysicsWorld();
    this.addBackWall();
    this.addFloor();
    this.addWoodColumns();
    this.addRows();
    this.addEdges();
    this.addSphere();
    this.addFloorBox();
    this.addStatsMonitor();
    this.addWindowListeners();
    this.addGuiControls();
    this.addDummyCameraTarget();
    this.animateDummyCameraTarget();
    this.animate();
  }

  setup() {
    this.debug = false;
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.cameraAutoAnimate = false;
    this.spheres = [];

    Sphere.loadTextures();
    Sphere.buildMaterial();
    Column.buildMaterial();
    Row.buildMaterial();
  }

  createScene() {
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(
    window.getComputedStyle(document.body).backgroundColor);

    this.renderer = new THREE.WebGLRenderer({ antialias: true });

    this.renderer.setSize(this.width, this.height);
    this.scene.position.set(0, -5, 0);
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    document.body.appendChild(this.renderer.domElement);
  }

  createCamera() {
    this.camera = new THREE.PerspectiveCamera(
    20,
    this.width / this.height,
    1,
    1000);

    this.camera.position.set(20, 20, 80);

    this.scene.add(this.camera);
  }

  addCameraControls() {
    this.orbitControl = new THREE.OrbitControls(
    this.camera,
    this.renderer.domElement);

    this.orbitControl.minPolarAngle = THREE.MathUtils.degToRad(0);
    this.orbitControl.maxPolarAngle = THREE.MathUtils.degToRad(90);
    this.orbitControl.minAzimuthAngle = THREE.MathUtils.degToRad(-50);
    this.orbitControl.maxAzimuthAngle = THREE.MathUtils.degToRad(50);
    this.orbitControl.maxDistance = 90;
    this.orbitControl.minDistance = 40;
    this.orbitControl.enableDamping = true;
    this.orbitControl.dampingFactor = 0.02;
    this.orbitControl.enablePan = !this.cameraAutoAnimate;
    this.orbitC.........完整代码请登录后点击上方下载按钮下载查看