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: #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 translate="no"> <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> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.72.js"></script> <script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.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, 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 }; this.color = { r: this.normalSkin.r, g:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0