three实现铁球滚动平面凹陷动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现铁球滚动平面凹陷动画效果代码，可设置参数。

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

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

<head>

    <meta charset="UTF-8">




    <style>
        html {
          font-family: sans-serif;
          -ms-text-size-adjust: 100%;
          -webkit-text-size-adjust: 100%;
        }
        
        * {
          box-sizing: border-box;
        }
        
        body {
          background-color: #0dea8d;
          font-family: sans-serif;
          overflow: hidden;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        
        canvas {
          width: 100%;
          height: 100%;
        }
        
        .stats {
          opacity: 1;
          z-index: 10;
          position: absolute;
        }
        
        .dg.ac {
          position: absolute;
          z-index: 10 !important;
        }
    </style>

    <link href="https://fonts.googleapis.com/css?family=Ropa+Sans&display=swap" rel="stylesheet">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>


</head>

<body>

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



    <script>
        const radians = degrees => {
          return degrees * Math.PI / 180;
        };
        
        const distance = (x1, y1, x2, y2) => {
          return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
        };
        
        const map = (value, istart, istop, ostart, ostop) => {
          return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
        };
        
        const hexToRgbTreeJs = hex => {
          const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        
          return result ? {
            r: parseInt(result[1], 16) / 255,
            g: parseInt(result[2], 16) / 255,
            b: parseInt(result[3], 16) / 255 } :
          null;
        };
        
        class App {
          setup() {
            this.stats = new Stats();
            this.stats.showPanel(0);
            document.body.querySelector('.stats').appendChild(this.stats.domElement);
        
            this.gui = new dat.GUI();
            this.raycaster = new THREE.Raycaster();
            this.pendulum = {
              length: 18,
              angle: 90,
              angleVelocity: 0,
              angleAcceleration: 0,
              origin: {
                x: 0,
                y: 10 },
        
              current: {
                x: 0,
                y: 0 } };
        
        
        
            this.backgroundColor = '#0dea8d';
            this.gutter = { size: .1 };
            this.meshes = [];
            this.grid = { cols: 28, rows: 12 };
            this.width = window.innerWidth;
            this.height = window.innerHeight;
            this.mouse3D = new THREE.Vector2();
        
            const gui = this.gui.addFolder('Background');
        
            gui.addColor(this, 'backgroundColor').onChange(color => {
              document.body.style.backgroundColor = color;
            });
        
            window.addEventListener('resize', this.onResize.bind(this), { passive: true });
          }
        
          createScene() {
            this.scene = new THREE.Scene();
        
            this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        
            this.renderer.shadowMap.enabled = true;
            this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        
            document.body.appendChild(this.renderer.domElement);
          }
        
          createCamera() {
            const width = window.innerWidth;
            const height = window.innerHeight;
        
            this.camera = new THREE.PerspectiveCamera(45, width / height);
            this.camera.position.set(-28.15292047581049, 38.68633769613105, 30.980321888960155);
        
            this.scene.add(this.camera);
          }
        
          addAmbientLight() {
            const obj = { color: '#c4c4c4' };
            const light = new THREE.AmbientLight(obj.color, 1);
        
            this.scene.add(light);
        
            const gui = this.gui.addFolder('Ambient Light');
            gui.addColor(obj, 'color').onChange(color => {
              light.color = hexToRgbTreeJs(color);
            });
          }
        
          addSphere() {
            const meshParams = {
              color: '#f90c53',
              metalness: .41,
              emissive: '#000000',
              roughness: 0 };
        
        
            const geometry = new THREE.SphereGeometry(3, 32, 32);
            const material = new THREE.MeshStandardMaterial(meshParams);
        
            this.sphere = new THREE.Mesh(geometry, material);
            this.sphere.position.set(0, 0, 0);
        
            const gui = this.gui.addFolder('Sphere Material');
        
            gui.addColor(meshParams, 'color').onChange(color => {
              material.color = hexToRgbTreeJs(color);
            });
            gui.add(meshParams, 'metalness', 0.1, 1).onChange(val => {
              material.metalness = val;
            });
            gui.add(meshParams, 'roughness', 0.1, 1).onChange(val => {
              material.roughness = val;
            });
        
            this.scene.add(this.sphere);
          }
        
          createGrid() {
            this.groupMesh = new THREE.Object3D();
        
            const meshParams = {
              color: '#fff',
              metalness: .3,
              emissive: '#000000',
              roughness: 1 };
        
        
            const mater.........完整代码请登录后点击上方下载按钮下载查看