threejs实现三维飞石环绕跳动的山羊动画效果代码-html代码-BFW代码库

threejs实现三维飞石环绕跳动的山羊动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现三维飞石环绕跳动的山羊动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        body {
          margin: 0;
        }
        .world {
          position: absolute;
          overflow: hidden;
          width: 100%;
          height: 100%;
          background-color: #CCDCDA;
        }
        .world-night {
          background-color: #1E0F4C;
        }
        .toggle {
          position: absolute;
          top: 1rem;
          left: 1rem;
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          box-shadow: 0 4px 16px #C40062;
          background: #F8007E url('//repo.bfw.wiki/bfwrepo/image/60262ff46beb8.png') center center / 60% no-repeat;
          cursor: pointer;
        }
        .toggle-night {
          box-shadow: 0 4px 16px #626EC9;
          background: #9A96E8 url('//repo.bfw.wiki/bfwrepo/image/60262ff46beb8.png') center 46% / 60% no-repeat;
        }
        .toggle-music {
          position: absolute;
          top: 5rem;
          left: 1rem;
          width: 3rem;
          height: 3rem;
          background: url('//repo.bfw.wiki/bfwrepo/icon/60d1c2f3e1d1e.png') center center / 60% no-repeat;
          cursor: pointer;
        }
        .music-off {
          background: url('//repo.bfw.wiki/bfwrepo/icon/60d1c2f3e1d1e.png') center center / 60% no-repeat;
        }
    </style>



</head>

<body>
    <div class="world"></div>
    <a class="toggle toggle-night"></a>
    <a class="toggle-music"></a>
    <audio class="world-music" src="//repo.bfw.wiki/bfwrepo/sound/61397f63d3f7c.mp3"></audio>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <script>
        'use strict';
        
        let scene,
        camera,
        renderer,
        controls,
        mouseDown,
        world,
        night = false;
        
        let sheep,
        cloud,
        sky;
        
        let width,
        height;
        
        function init() {
          width = window.innerWidth,
          height = window.innerHeight;
        
          scene = new THREE.Scene();
          camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
          camera.lookAt(scene.position);
          camera.position.set(0, 0.7, 8);
        
          renderer = new THREE.WebGLRenderer({ alpha: true });
          renderer.setPixelRatio(window.devicePixelRatio);
          renderer.setSize(width, height);
          renderer.shadowMap.enabled = true;
          renderer.shadowMap.type = THREE.PCFS.........完整代码请登录后点击上方下载按钮下载查看