three打造给狮子吹风的交互游戏效果
代码语言:html
所属分类:游戏
代码描述: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: #ebe5e7; 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:#653f4c; font-size:.9em; text-transform: uppercase; text-align : center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lightInstructions { color:#993f4c; font-size:.8em; } #credits{ position:absolute; width:100%; margin: auto; bottom:0; margin-bottom:20px; font-family:'Open Sans', sans-serif; color:#b297a2; font-size:0.7em; text-transform: uppercase; text-align : center; } #credits a { color:#b297a2; } #credits .society6 { color:#993f4c; } </style> </head> <body translate="no"> <div id="world"></div> <div id="instructions">Press and drag to make wind<br /><span class="lightInstructions">the lion will surely appreciate</span></div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.72.js"></script> <script src='http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js'></script> <script> //THREEJS RELATED VARIABLES var scene, camera, controls, fieldOfView, aspectRatio, nearPlane, farPlane, shadowLight, backLight, light, renderer, container; //SCENE var floor, lion, fan, isBlowing = false; //SCREEN VARIABLES var HEIGHT, WIDTH, windowHalfX, windowHalfY, mousePos = {x:0,y:0}; dist = 0; //INIT THREE JS, SCREEN AND MOUSE EVENTS function init(){ scene = new THREE.Scene(); 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.z = 800; camera.position.y = 0; 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('mousemove', handleMouseMove, false); document.addEventListener('mousedown', handleMouseDown, false); document.addEventListener('mouseup', handleMouseUp, false); document.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchend', handleTouchEnd, false); document.addEventListener('touchmove',handleTouchMove, false); /* controls = new THREE.OrbitControls( camera, renderer.domElement); //*/ } function onWindowResize() { HEIGHT = window.innerHeight; WIDTH = window.innerWidth; windowHalfX = WIDTH / 2; windowHalfY = HEIGHT / 2; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); } function handleMouseMove(event) { mousePos = {x:event.clientX, y:event.clientY}; } function handleMouseDown(event) { isBlowing = true; } function handleMouseUp(event) { isBlowing = false; } function handleTouchStart(event) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0