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: #e0dacd; position:absolute; width:100%; height:100%; overflow:hidden; } #instructions{ position:absolute; width:100%; top:50%; margin: auto; margin-top:50px; font-family:'Open Sans', sans-serif; color:#b75505; font-size:.9em; text-transform: uppercase; text-align : center; } .lightInstructions { color:#b59b63; font-size:.8em; } #credits{ position:absolute; width:100%; margin: auto; bottom:0; margin-bottom:20px; font-family:'Open Sans', sans-serif; color:#b59b63; font-size:0.7em; text-transform: uppercase; text-align : center; } #credits a { color:#b59b63; } </style> </head> <body> <!-- partial:index.partial.html --> <div id="world"></div> <div id="instructions">^<br/>Move the head of this bird<br/><span class="lightInstructions">and watch how the 2 others<br/>interact with him</span></div> <div id="credits"> </div> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.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 floor, brid1, bird2; //SCREEN VARIABLES var HEIGHT, WIDTH, windowHalfX, windowHalfY, mousePos = {x:0,y: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 = 1000; camera.position.y = 300; 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('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 handleTouchStart(event) { if (event.touches.length > 1) { event.preventDefault(); mousePos = {x:event.touches[0].pageX, y:event.touches[0].pageY}; } } function handleTouchEnd(event) { mousePos = {x:windowHalfX, y:windowHalfY}; } function handleTouchMove(event) { if (event.touches.length == 1) { event.preventDefault(); mousePos = {x:event.touches[0].pageX, y:event.touches[0].pageY}; } } function createLights() { light = new THREE.HemisphereLight(0xffffff, 0xffffff, .5) shadowLight = new THREE.DirectionalLight(0xffffff, .8); shadowLight.position.set(200, 200, 200); shadowLight.castShadow = true; shadowLight.shadowDarkness = .2; backLight = new THREE.DirectionalLight(0xffffff, .4); backLight.position.set(-100, 200, 50); backLight.shadowDarkness = .1; backLight.castShadow = true; scene.add(backLight); scene.add(light); scene.add(shadowLight); } //BIRD Bird = function(){ this.rSegments = 4; this.hSegments = 3; this.cylRay = 120; this.bodyBirdInitPositions = []; this.vAngle = this.hAngle = 0; this.normalSkin = {r:255/255, g:222/255, b:121/255}; this.shySkin = {r:255/255, g:157/255, b:101/255.........完整代码请登录后点击上方下载按钮下载查看
网友评论0