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