three实现一个三维小球跳跃动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现一个三维小球跳跃动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    body {
  background: #6a2bff;
  color: #fff;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

canvas {
  width: 100%;
  height: 100%;
}

</style>
</head>

<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>

<script>
    var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var App = function () {function App() {_classCallCheck(this, App);}_createClass(App, [{ key: 'init', value: function init()
    {var _this = this;
      this.backgroundColor = '#6a2bff';
      this.spotLightColor = 0xffffff;
      this.angle = 0;
      this.spheres = [];
      this.holes = [];
      this.gui = new dat.GUI();

      this.velocity = .08;
      this.amplitude = 5;
      this.waveLength = 20;

      this.scene = new THREE.Scene();

      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
      this.camera.position.set(15, 15, -15);

      this.addRenderer();

      this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);

      this.addAmbientLight();

      this.addSpotLight();

      var backgroundGUI = this.gui.addFolder('Background');
      backgroundGUI.addColor(this, 'backgroundColor').onChange(function (color) {
        document.body.style.backgroundColor = color;
      });

      var obj = {
        color: '#ffffff',
        emissive: '#e07cff',
        reflectivity: 1,
        metalness: .2,
        roughness: 0 };


      var material = new THREE.MeshPhysicalMaterial(obj);
      var geometry = new THREE.SphereGeometry(.5, 32, 32);

      var tileTop = { color: '#fa3fce' };
      var tileTopMaterial = new THREE.MeshBasicMaterial(tileTop);

      var tileInside = { color: '#671c87' };
      var tileInsideMaterial = new THREE.MeshBasicMaterial(tileInside);

      var materials = [tileTopMaterial, tileInsideMaterial];
      var props = {
        steps: 1,
        depth: 1,
        bevelEnabled: false };


      var guiWave = this.gui.addFolder('Wave');
      guiWave.add(this, 'waveLength', 0, 20).onChange(function (waveLength) {
        _this.waveLength = waveLength;
      });

      guiWave.add(this, 'amplitude', 3, 10).onChange(function (amplitude) {
        _this.amplitude = amplitude;
      });

      guiWave.add(this, 'velocity', 0, .2).onChange(function (velocity) {
        _this.velocity = velocity;
      });


      this.createSet(1, 1, geometry, material, props, materials);

      this.createSet(4, 1, geometry, material, props, materials);

      this.createSet(7, 1, geometry, material, props, materials);

      this.createSet(10, 1, geometry, material, props, materials);

      this.createSet(-2, 1, geometry, material, props, materials);

      this.createSet(-5, 1, geometry, material, props, materials);

      this.createSet(-8, 1, geometry, material, props, materials);

      this.createSet(-11, 1, geometry, material, props, materials);

      this.addFloorShadow();

      this.animate();

      window.addEventListener('resize', this.onResize.bind(this));
    } }, { key: 'radians', value: function radians(

    degrees) {
      return degrees * Math.PI / 180;
    } }, { key: 'createSet', value: function createSet(

    x, z, geometry, material, props, materials) {
      this.floorShape = this.createShape();

      this.createRingOfHoles(this.floorShape, 1, 0);

      var geometryTile = new THREE.ExtrudeGeometry(this.floorShape, props);

      this.createGround(this.floorShape, x, z, geometryTile, materials);

      this.addSphere(x, z, geometry, ma.........完整代码请登录后点击上方下载按钮下载查看