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() {
        
          sheep.jumpOnMouseDown();
          if (sheep.group.position.y > 0.4) cloud.bend();
        
          sky.moveSky();
        
          renderer.render(scene, camera);
        }
        
        class Sheep {
          constructor() {
            this.group = new THREE.Group();
            this.group.position.y = 0.4;
        
            this.woolMaterial = new THREE.MeshStandardMaterial({
              color: 0xffffff,
              roughness: 1,
              shading: THREE.FlatShading });
        
            this.skinMaterial = new THREE.MeshStandardMaterial({
              color: 0xffaf8b,
              roughness: 1,
              shading: THREE.FlatShading });
        
            this.darkMaterial = new THREE.MeshStandardMaterial({
              color: 0x4b4553,
              roughness: 1,
              shading: THREE.FlatShading });
        
        
            this.vAngle = 0;
        
            this.drawBody();
            this.drawHead();
            this.drawLegs();
          }
          drawBody() {
            const bodyGeometry = new THREE.IcosahedronGeometry(1.7, 0);
            const body = new THREE.Mesh(bodyGeometry, this.woolMaterial);
            body.castShadow = true;
            body.receiveShadow = true;
            this.group.add(body);
          }
          drawHead() {
            const head = new THREE.Group();
            head.position.set(0, 0.65, 1.6);
            head.rotation.x = rad(-20);
            this.group.add(head);
        
            const foreheadGeometry = new THREE.BoxGeometry(0.7, 0.6, 0.7);
            const forehead = new THREE.Mesh(foreheadGeometry, this.skinMaterial);
            forehead.castShadow = true;
            forehead.receiveShadow = true;
            forehead.position.y = -0.15;
            head.add(forehead);
        
            const faceGeometry = new THREE.CylinderGeometry(0.5, 0.15, 0.4, 4, 1);
            const face = new THREE.Mesh(faceGeometry, this.skinMaterial);
            face.castShadow = true;
            face.receiveShadow = true;
            face.position.y = -0.65;
            face.rotation.y = rad(45);
            head.add(face);
        
            const woolGeometry = new THREE.BoxGeometry(0.84, 0.46, 0.9);
            const wool = new THREE.Mesh(woolGeometry, this.woolMaterial);
            wool.position.set(0, 0.12, 0.07);
            wool.rotation.x = rad(20);
            head.add(wool);
        
            const rightEyeGeometry = new THREE.CylinderGeometry(0.08, 0.1, 0.06, 6);
            const rightEye = new THREE.Mesh(rightEyeGeometry, this.darkMaterial);
            rightEye.castShadow = true;
            rightEye.receiveShadow = true;
            rightEye.position.set(0.35, -0.48, 0.33);
            rightEye.rotation.set(rad(130.8), 0, rad(-45));
            head.add(rightEye);
        
            const leftEye = rightEye.clone();
            leftEye.position.x.........完整代码请登录后点击上方下载按钮下载查看