three实现三维鼠标交互可爱喷嚏龙喷火动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维鼠标交互可爱喷嚏龙喷火动画效果代码
代码标签: three 三维 鼠标 交互 可爱 喷嚏龙 喷火 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:800); #world { background: #652e37; position:absolute; width:100%; height:100%; overflow:hidden; } #instructions{ position:absolute; width:100%; top:50%; margin: auto; margin-top:120px; font-family:'Open Sans', sans-serif; color:#fdde8c; font-size:.8em; text-transform: uppercase; text-align : center; line-height : 1.5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lightInstructions { color:#f89a78; font-size:.9em; } #credits{ position:absolute; width:100%; margin: auto; bottom:0; margin-bottom:20px; font-family:'Open Sans', sans-serif; color:#f7575f; font-size:0.6em; text-transform: uppercase; text-align : center; } #credits a { color:#f89a78; } #power { position:absolute; width:100%; top:50%; margin: auto; margin-top:-220px; font-family:'Open Sans', sans-serif; color:#481f26; font-size: 4em; text-transform: uppercase; text-align : center; line-height : 1.5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body translate="no"> <div id="world"></div> <div id="instructions">The longer you keep clicking, the harder he sneezes<br/><span class="lightInstructions">- Press and drag to turn around -</span></div> <div id="credits"> <p>Prints on <a class="society6" href="https://society6.com/yakudoo/" target="blank">society6</a> | <a href="https://codepen.io/Yakudoo/" target="blank">my other codepens</a> | <a href="https://www.epic.net" target="blank">epic.net</a></p> </div> <div id="power">00</div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <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.72.js"></script> <script > //THREEJS RELATED VARIABLES var scene, camera, controls, fieldOfView, aspectRatio, nearPlane, farPlane, shadowLight, backLight, light, renderer, container; //SCENE var env,floor,dragon,pepperBottle, sneezingRate = 0, fireRate = 0, maxSneezingRate = 8, sneezeDelay = 500, awaitingSmokeParticles = [], timeSmoke = 0, timeFire = 0, globalSpeedRate = 1, sneezeTimeout, powerField; //SCREEN VARIABLES var HEIGHT, WIDTH, windowHalfX, windowHalfY, mousePos = { x: 0, y: 0 }; //INIT THREE JS, SCREEN AND MOUSE EVENTS function init() { powerField = document.getElementById('power'); scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x652e37, 350, 500); HEIGHT = window.innerHeight; WIDTH = window.innerWidth; aspectRatio = WIDTH / HEIGHT; fieldOfView = 60; nearPlane = 1; farPlane = 2000; camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane); camera.position.x = -300; camera.position.z = 300; camera.position.y = 100; camera.lookAt(new THREE.Vector3(0, 0, 0)); renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(WIDTH, HEIGHT); renderer.shadowMapEnabled = true; container = document.getElementById('world'); container.appendChild(renderer.domElement); windowHalfX = WIDTH / 2; windowHalfY = HEIGHT / 2; window.addEventListener('resize', onWindowResize, false); document.addEventListener('mouseup', handleMouseUp, false); document.addEventListener('touchend', handleTouchEnd, false); //* controls = new THREE.OrbitControls(camera, renderer.domElement); controls.minPolarAngle = -Math.PI / 2; controls.maxPolarAngle = Math.PI / 2; controls.noZoom = true; controls.noPan = true; //*/ } function onWindowResize() { HEIGHT = window.innerHeight; WIDTH = window.innerWidth; windowHalfX = WIDTH / 2; windowHalfY = HEIGHT / 2; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0