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

代码语言:html

所属分类:三维

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

代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0