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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0