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: this.normalSkin.g, b: this.normalSkin.b }; this.side = "left"; this.shyAngles = { h: 0, v: 0 }; this.behaviourInterval; this.intervalRunning = false; this.threegroup = new THREE.Group(); // materials this.yellowMat = new THREE.MeshLambertMaterial({ color: 0xffde79, shading: THREE.FlatShading }); this.whiteMat = new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading }); this.blackMat = new THREE.MeshLambertMaterial({ color: 0x000000, shading: THREE.FlatShading }); this.orangeMat = new THREE.MeshLambertMaterial({ color: 0xff5535, shading: THREE.FlatShading }); //WINGS this.wingLeftGroup = new THREE.Group(); this.wingRightGroup = new THREE.Group(); var wingGeom = new THREE.BoxGeometry(60, 60, 5); var wingLeft = new THREE.Mesh(wingGeom, this.yellowMat); this.wingLeftGroup.add(wingLeft); this.wingLeftGroup.position.x = 70; this.wingLeftGroup.position.z = 0; this.wingLeftGroup.rotation.y = Math.PI / 2; wingLeft.rotation.x = -Math.PI / 4; var wingRight = new THREE.Mesh(wingGeom, this.yellowMat); this.wingRightGroup.add(wingRight); this.wingRightGroup.position.x = -70; this.wingRightGroup.position.z = 0; this.wingRightGroup.rotation.y = -Math.PI / 2; wingRight.rotation.x = -Math.PI / 4; //BODY var bodyGeom = new THREE.CylinderGeometry(40, 70, 200, this.rSegments, this.hSegments); this.bodyBird = new THREE.Mesh(bodyGeom, this.yellowMat); this.bodyBird.position.y = 70; this.bodyVerticesLength = (this.rSegments + 1) * this.hSegments; for (var i = 0; i < this.bodyVerticesLength; i++) { var tv = this.bodyBird.geometry.vertices[i]; this.bodyBirdInitPositions.push({ x: tv.x, y: tv.y, z: tv.z }); } this.threegroup.add(this.bodyBird); this.threegroup.add(this.wingLeftGroup); this.threegroup.add(this.wingRightGroup); // EYES this.face = new THREE.Group(); var eyeGeom = new THREE.BoxGeometry(60, 60, 10); var irisGeom = new THREE.BoxGeometry(10, 10, 10); this.leftEye = new THREE.Mesh(eyeGeom, this.whiteMat); this.leftEye.position.x = -30; this.leftEye.position.y = 120; this.leftEye.position.z = 35; this.leftEye.rotation.y = -Math.PI / 4; this.leftIris = new THREE.Mesh(irisGeom, this.blackMat); this.leftIris.position.x = -30; this.leftIris.position.y = 120; this.leftIris.position.z = 40; this.leftIris.rotation.y = -Mat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0