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

代码语言：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.PCFSoftShadowMap;
        
          // controls = new THREE.OrbitControls(camera, renderer.domElement);
          // controls.enableZoom = false;
        
          addLights();
          drawSheep();
          drawCloud();
          drawSky();
        
          world = document.querySelector('.world');
          world.appendChild(renderer.domElement);
        
          document.addEventListener('mousedown', onMouseDown);
          document.addEventListener('mouseup', onMouseUp);
          document.addEventListener('touchstart', onTouchStart);
          document.addEventListener('touchend', onTouchEnd);
          window.addEventListener('resize', onResize);
        }
        
        function addLights() {
          const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.9);
          scene.add(light);
        
          const directLight1 = new THREE.DirectionalLight(0xffd798, 0.8);
          directLight1.castShadow = true;
          directLight1.position.set(9.5, 8.2, 8.3);
          scene.add(directLight1);
        
          const directLight2 = new THREE.DirectionalLight(0xc9ceff, 0.5);
          directLight2.castShadow = true;
          directLight2.position.set(-15.8, 5.2, 8);
          scene.add(directLight2);
        }
        
        function drawSheep() {
          sheep = new Sheep();
          scene.add(sheep.group);
        }
        
        function drawCloud() {
          cloud = new Cloud();
          scene.add(cloud.group);
        }
        
        function drawSky() {
          sky = new Sky();
          sky.showNightSky(night);
          scene.add(sky.group);
        }
        
        function onResize() {
          width = window.innerWidth;
          height = window.innerHeight;
          camera.aspect = width / height;
          camera.updateProjectionMatrix();
          renderer.setSize(width, height);
        }
        
        function onMouseDown(event) {
          mouseDown = true;
        }
        function onTouchStart(event) {
          const targetClass = event.target.classList[0];
          if (targetClass === 'toggle' || targetClass === 'toggle-music') return;
          event.preventDefault();
          mouseDown = true;
        }
        
        function onMouseUp() {
          mouseDown = false;
        }
        function onTouchEnd(event) {
          const targetClass = event.target.classList[0];
          if (targetClass === 'toggle' || targetClass === 'toggle-music') return;
          event.preventDefault();
          mouseDown = false;
        }
        
        function rad(degrees) {
          return degrees * (Math.PI / 180);
        }
        
        function animate() {
          requestAnimationFrame(animate);
        
          render();
        }
        
        function render() {
        
     .........完整代码请登录后点击上方下载按钮下载查看