function createNode() {
var container = document.createDocumentFragment();
var e_0 = document.createElement("div");
var e_1 = document.createElement("meta");
e_1.setAttribute("charset", "utf-8");
e_0.appendChild(e_1);
var e_2 = document.createElement("title");
e_2.appendChild(document.createTextNode("Wanghao | Chill The Lion"));
e_0.appendChild(e_2);
var e_3 = document.createElement("link");
e_3.setAttribute("rel", "icon");
e_3.setAttribute("type", "image/x-icon");
e_3.setAttribute("href", "../favicon.ico");
e_0.appendChild(e_3);
var e_4 = document.createElement("meta");
e_4.setAttribute("name", "viewport");
e_4.setAttribute("content", "width=device-width, initial-scale=1");
e_0.appendChild(e_4);
var e_5 = document.createElement("meta");
e_5.setAttribute("name", "google-site-verification");
e_5.setAttribute("content", "i3bVXD3ywVilJt3b0Denbr2n41les3p8ciIldduw4X0");
e_0.appendChild(e_5);
var e_6 = document.createElement("div");
e_6.setAttribute("id", "world");
e_0.appendChild(e_6);
var e_7 = document.createElement("div");
e_7.setAttribute("id", "instructions");
e_7.appendChild(document.createTextNode("按住并拖动以产生风"));
var e_8 = document.createElement("br");
e_7.appendChild(e_8);
var e_9 = document.createElement("span");
e_9.setAttribute("class", "lightInstructions");
e_9.appendChild(document.createTextNode("小狮子一定会很舒服"));
e_7.appendChild(e_9);
e_0.appendChild(e_7);
var e_10 = document.createElement("div");
e_10.setAttribute("id", "credits");
var e_11 = document.createElement("div");
e_11.setAttribute("class", "made-with-love");
e_11.appendChild(document.createTextNode("\nMade with\n"));
var e_12 = document.createElement("i");
e_12.appendChild(document.createTextNode("♥"));
e_11.appendChild(e_12);
e_11.appendChild(document.createTextNode(" by\n"));
var e_13 = document.createElement("a");
e_13.setAttribute("target", "_blank");
e_13.setAttribute("href", "https://blog.csdn.net/qq_44273429/");
e_13.appendChild(document.createTextNode("海拥CSDN博客"));
e_11.appendChild(e_13);
e_10.appendChild(e_11);
var e_14 = document.createElement("p");
e_14.appendChild(document.createTextNode("Copyright © "));
var e_15 = document.createElement("a");
e_15.setAttribute("href", "https://wanghao221.github.io/");
e_15.appendChild(document.createTextNode("Wang Hao"));
e_14.appendChild(e_15);
e_10.appendChild(e_14);
e_0.appendChild(e_10);
var e_16 = document.createElement("style");
e_16.appendChild(document.createTextNode("\n@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);\n#world {\nbackground: #ebe5e7;\nposition:absolute;\nwidth:100%;\nheight:100%;\noverflow:hidden;\n}\n#instructions{\nposition:absolute;\nwidth:100%;\ntop:50%;\nmargin: auto;\nmargin-top:120px;\nfont-family:'Open Sans', sans-serif;\ncolor:#653f4c;\nfont-size:.9em;\ntext-transform: uppercase;\ntext-align : center;\nuser-select: none;\n}\n.lightInstructions {\ncolor:#993f4c;\nfont-size:.8em;\n}\n#credits{\nposition:absolute;\nwidth:100%;\nmargin: auto;\nbottom:0;\nmargin-bottom:20px;\nfont-family:'Open Sans', sans-serif;\ncolor:#b297a2;\nfont-size:0.7em;\ntext-transform: uppercase;\ntext-align : center;\n}\n#credits a {\ncolor:#b297a2;\n}\n#credits .society6 {\ncolor:#993f4c;\n}\n"));
e_0.appendChild(e_16);
var e_17 = document.createElement("script");
e_17.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js");
e_0.appendChild(e_17);
var e_18 = document.createElement("script");
e_18.setAttribute("src", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/OrbitControls.js");
e_0.appendChild(e_18);
var e_19 = document.createElement("script");
e_19.appendChild(document.createTextNode("\n//THREEJS RELATED VARIABLES \nvar scene, \ncamera,\ncontrols,\nfieldOfView,\naspectRatio,\nnearPlane,\nfarPlane,\nshadowLight, \nbackLight,\nlight, \nrenderer,\ncontainer;\n//SCENE\nvar floor, lion, fan,\nisBlowing = false;\n//SCREEN VARIABLES\nvar HEIGHT,\nWIDTH,\nwindowHalfX,\nwindowHalfY,\nmousePos = {x:0,y:0};\ndist = 0;\n//INIT THREE JS, SCREEN AND MOUSE EVENTS\nfunction init(){\nscene = new THREE.Scene();\nHEIGHT = window.innerHeight;\nWIDTH = window.innerWidth;\naspectRatio = WIDTH / HEIGHT;\nfieldOfView = 60;\nnearPlane = 1;\nfarPlane = 2000; \ncamera = new THREE.PerspectiveCamera(\nfieldOfView,\naspectRatio,\nnearPlane,\nfarPlane);\ncamera.position.z = 800; \ncamera.position.y = 0;\ncamera.lookAt(new THREE.Vector3(0,0,0)); \nrenderer = new THREE.WebGLRenderer({alpha: true, antialias: true });\nrenderer.setPixelRatio( window.devicePixelRatio );\nrenderer.setSize(WIDTH, HEIGHT);\nrenderer.shadowMapEnabled = true;\ncontainer = document.getElementById('world');\ncontainer.appendChild(renderer.domElement);\nwindowHalfX = WIDTH / 2;\nwindowHalfY = HEIGHT / 2;\nwindow.addEventListener('resize', onWindowResize, false);\ndocument.addEventListener('mousemove', handleMouseMove, false);\ndocument.addEventListener('mousedown', handleMouseDown, false);\ndocument.addEventListener('mouseup', handleMouseUp, false);\ndocument.addEventListener('touchstart', handleTouchStart, false);\ndocument.addEventListener('touchend', handleTouchEnd, false);\ndocument.addEventListener('touchmove',handleTouchMove, false);\n/*\ncontrols = new THREE.OrbitControls( camera, renderer.domElement);\n//*/\n}\nfunction onWindowResize() {\nHEIGHT = window.innerHeight;\nWIDTH = window.innerWidth;\nwindowHalfX = WIDTH / 2;\nwindowHalfY = HEIGHT / 2;\nrenderer.setSize(WIDTH, HEIGHT);\ncamera.aspect = WIDTH / HEIGHT;\ncamera.updateProjectionMatrix();\n}\nfunction handleMouseMove(event) {\nmousePos = {x:event.clientX, y:event.clientY};\n}\nfunction handleMouseDown(event) {\nisBlowing = true;\n}\nfunction handleMouseUp(event) {\nisBlowing = false;\n}\nfunction handleTouchStart(event) {\nif (event.touches.length > 1) {\nevent.preventDefault();\nmousePos = {x:event.touches[0].pageX, y:event.touches[0].pageY};\nisBlowing = true;\n}\n}\nfunction handleTouchEnd(event) {\n//mousePos = {x:windowHalfX, y:windowHalfY};\nisBlowing = false;\n}\nfunction handleTouchMove(event) {\nif (event.touches.length == 1) {\nevent.preventDefault();\nmousePos = {x:event.touches[0].pageX, y:event.touches[0].pageY};\nisBlowing = true;\n}\n}\nfunction createLights() {\nlight = new THREE.HemisphereLight(0xffffff, 0xffffff, .5)\nshadowLight = new THREE.DirectionalLight(0xffffff, .8);\nshadowLight.position.set(200, 200, 200);\nshadowLight.castShadow = true;\nshadowLight.shadowDarkness = .2;\nbackLight = new THREE.DirectionalLight(0xffffff, .4);\nbackLight.position.set(-100, 200, 50);\nbackLight.shadowDarkness = .1;\nbackLight.castShadow = true;\nscene.add(backLight);\nscene.add(light);\nscene.add(shadowLight);\n}\nfunction createFloor(){ \nfloor = new THREE.Mesh(new THREE.PlaneBufferGeometry(1000,500), new THREE.MeshBasicMaterial({color: 0xebe5e7}));\nfloor.rotation.x = -Math.PI/2;\nfloor.position.y = -100;\nfloor.receiveShadow = true;\nscene.add(floor);\n}\nfunction createLion(){\nlion = new Lion();\nscene.add(lion.threegroup);\n}\nfunction createFan(){\nfan = new Fan();\nfan.threegroup.position.z = 350;\nscene.add(fan.threegroup);\n}\nFan = function(){\nthis.isBlowing = false;\nthis.speed = 0;\nthis.acc =0;\nthis.redMat = new THREE.MeshLambertMaterial ({\ncolor: 0xad3525, \nshading:THREE.FlatShading\n});\nthis.greyMat = new THREE.MeshLambertMaterial ({\ncolor: 0x653f4c, \nshading:THREE.FlatShading\n});\nthis.yellowMat = new THREE.MeshLambertMaterial ({\ncolor: 0xfdd276, \nshading:THREE.FlatShading\n});\nvar coreGeom = new THREE.BoxGeometry(10,10,20);\nvar sphereGeom = new THREE.BoxGeometry(10, 10, 3);\nvar propGeom = new THREE.BoxGeometry(10,30,2);\npropGeom.applyMatrix( new THREE.Matrix4().makeTranslation( 0,25,0) );\nthis.core = new THREE.Mesh(coreGeom,this.greyMat);\n// propellers\nvar prop1 = new THREE.Mesh(propGeom, this.redMat);\nprop1.position.z = 15;\nvar prop2 = prop1.clone();\nprop2.rotation.z = Math.PI/2;\nvar prop3 = prop1.clone();\nprop3.rotation.z = Math.PI;\nvar prop4 = prop1.clone();\nprop4.rotation.z = -Math.PI/2;\nthis.sphere = new THREE.Mesh(sphereGeom, this.yellowMat);\nthis.sphere.position.z = 15;\nthis.propeller = new THREE.Group();\nthis.propeller.add(prop1);\nthis.propeller.add(prop2);\nthis.propeller.add(prop3);\nthis.propeller.add(prop4);\nthis.threegroup = new THREE.Group();\nthis.threegroup.add(this.core);\nthis.threegroup.add(this.propeller);\nthis.threegroup.add(this.sphere);\n}\nFan.prototype.update = function(xTarget, yTarget){\nthis.threegroup.lookAt(new THREE.Vector3(0,80,60));\nthis.tPosX = rule3(xTarget, -200, 200, -250, 250);\nthis.tPosY = rule3(yTarget, -200, 200, 250, -250);\nthis.threegroup.position.x += (this.tPosX - this.threegroup.position.x) /10;\nthis.threegroup.position.y += (this.tPosY - this.threegroup.position.y) /10;\nthis.targetSpeed = (this.isBlowing) ? .3 : .01;\nif (this.isBlowing && this.speed < .5){\nthis.acc +=.001;\nthis.speed += this.acc;\n}else if (!this.isBlowing){\nthis.acc = 0;\nthis.speed *= .98;\n}\nthis.propeller.rotation.z += this.speed; \n}\nLion = function(){\nthis.windTime = 0;\nthis.bodyInitPositions = [];\nthis.maneParts = [];\nthis.threegroup = new THREE.Group();\nthis.yellowMat = new THREE.MeshLambertMaterial ({\ncolor: 0xfdd276, \nshading:THREE.FlatShading\n});\nthis.redMat = new THREE.MeshLambertMaterial ({\ncolor: 0xad3525, \nshading:THREE.FlatShading\n});\nthis.pinkMat = new THREE.MeshLambertMaterial ({\ncolor: 0xe55d2b, \nshading:THREE.FlatShading\n});\nthis.whiteMat = new THREE.MeshLambertMaterial ({\ncolor: 0xffffff, \nshading:THREE.FlatShading\n});\nthis.purpleMat = new THREE.MeshLambertMaterial ({\ncolor: 0x451954, \nshading:THREE.FlatShading\n});\nthis.greyMat = new THREE.MeshLambertMaterial ({\ncolor: 0x653f4c, \nshading:THREE.FlatShading\n});\nthis.blackMat = new THREE.MeshLambertMaterial ({\ncolor: 0x302925, \nshading:THREE.FlatShading\n});\nvar bodyGeom = new THREE.CylinderGeometry(30,80, 140, 4);\nvar maneGeom = new THREE.BoxGeometry(40,40,15);\nvar faceGeom = new THREE.BoxGeometry(80,80,80);\nvar spotGeom = new THREE.BoxGeometry(4,4,4);\nvar mustacheGeom = new THREE.BoxGeometry(30,2,1);\nmustacheGeom.applyMatrix( new THREE.Matrix4().makeTranslation( 15, 0, 0 ) );\nvar earGeom = new THREE.BoxGeometry(20,20,20);\nvar noseGeom = new THREE.BoxGeometry(40,40,20);\nvar eyeGeom = new THREE.BoxGeometry(5,30,30);\nvar irisGeom = new THREE.BoxGeometry(4,10,10);\nvar mouthGeom = new THREE.BoxGeometry(20,20,10);\nvar smileGeom = new THREE.TorusGeometry( 12, 4, 2, 10, Math.PI );\nvar lipsGeom = new THREE.BoxGeometry(40,15,20);\nvar kneeGeom = new THREE.BoxGeometry(25, 80, 80);\nkneeGeom.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 50, 0 ) );\nvar footGeom = new THREE.BoxGeometry(40, 20, 20);\n// body\nthis.body = new THREE.Mesh(bodyGeom, this.yellowMat);\nthis.body.position.z = -60;\nthis.body.position.y = -30;\nthis.bodyVertices = [0,1,2,3,4,10];\nfor (var i=0;i<this.bodyVertices.length; i++){\nvar tv = this.body.geometry.vertices[this.bodyVertices[i]];\ntv.z =70;\n//tv.x = 0;\nthis.bodyInitPositions.push({x:tv.x, y:tv.y, z:tv.z});\n}\n// knee\nthis.leftKnee = new THREE.Mesh(kneeGeom, this.yellowMat);\nthis.leftKnee.position.x = 65;\nthis.leftKnee.position.z = -20;\nthis.leftKnee.position.y = -110;\nthis.leftKnee.rotation.z = -.3;\nthis.rightKnee = new THREE.Mesh(kneeGeom, this.yellowMat);\nthis.rightKnee.position.x = -65;\nthis.rightKnee.position.z = -20;\nthis.rightKnee.position.y = -110;\nthis.rightKnee.rotation.z = .3;\n// feet\nthis.backLeftFoot = new THREE.Mesh(footGeom, this.yellowMat);\nthis.backLeftFoot.position.z = 30;\nthis.backLeftFoot.position.x = 75;\nthis.backLeftFoot.position.y = -90;\nthis.backRightFoot = new THREE.Mesh(footGeom, this.yellowMat);\nthis.backRightFoot.position.z = 30;\nthis.backRightFoot.position.x = -75;\nthis.backRightFoot.position.y = -90;\nthis.frontRightFoot = new THREE.Mesh(footGeom, this.yellowMat);\nthis.frontRightFoot.position.z = 40;\nthis.frontRightFoot.position.x = -22;\nthis.frontRightFoot.position.y = -90;\nthis.frontLeftFoot = new THREE.Mesh(footGeom, this.yellowMat);\nthis.frontLeftFoot.position.z = 40;\nthis.frontLeftFoot.position.x = 22;\nthis.frontLeftFoot.position.y = -90;\n// mane\nthis.mane = new THREE.Group();\nfor (var j=0; j<4; j++){\nfor (var k=0; k<4; k++){\nvar manePart = new THREE.Mesh(maneGeom, this.redMat);\nmanePart.position.x = (j*40)-60;\nmanePart.position.y = (k*40)-60;\nvar amp;\nvar zOffset;\nvar periodOffset = Math.random()*Math.PI*2; \nvar angleOffsetY, angleOffsetX;\nvar angleAmpY, angleAmpX;\nvar xInit, yInit;\nif ((j==0 && k==0) || (j==0 && k==3) || (j==3 && k==0) || (j==3 && k==3)){\namp = -10-Math.floor(Math.random()*5);\nzOffset = -5;\n}else if (j==0 || k ==0 || j==3 || k==3){\namp = -5-Math.floor(Math.random()*5);\nzOffset = 0;\n}else{\namp = 0;\nzOffset = 0;\n}\nthis.maneParts.push({mesh:manePart, amp:amp, zOffset:zOffset, periodOffset:periodOffset, xInit:manePart.position.x, yInit:manePart.position.y});\nthis.mane.add(manePart);\n}\n}\nthis.mane.position.y = -10;\nthis.mane.position.z = 80;\n//this.mane.rotation.z = Math.PI/4;\n// face\nthis.face = new THREE.Mesh(faceGeom, this.yellowMat);\nthis.face.position.z = 135;\n// Mustaches\nthis.mustaches = [];\nthis.mustache1 = new THREE.Mesh(mustacheGeom, this.greyMat);\nthis.mustache1.position.x = 30;\nthis.mustache1.position.y = -5;\nthis.mustache1.position.z = 175; \nthis.mustache2 = this.mustache1.clone();\nthis.mustache2.position.x = 35;\nthis.mustache2.position.y = -12;\nthis.mustache3 = this.mustache1.clone();\nthis.mustache3.position.y = -19;\nthis.mustache3.position.x = 30; \nthis.mustache4 = this.mustache1.clone();\nthis.mustache4.rotation.z = Math.PI;\nthis.mustache4.position.x = -30;\nthis.mustache5 = new THREE.Mesh(mustacheGeom, this.blackMat);\nthis.mustache5 = this.mustache2.clone();\nthis.mustache5.rotation.z = Math.PI;\nthis.mustache5.position.x = -35;\nthis.mustache6 = new THREE.Mesh(mustacheGeom, this.blackMat);\nthis.mustache6 = this.mustache3.clone();\nthis.mustache6.rotation.z = Math.PI;\nthis.mustache6.position.x = -30;\nthis.mustaches.push(this.mustache1);\nthis.mustaches.push(this.mustache2);\nthis.mustaches.push(this.mustache3);\nthis.mustaches.push(this.mustache4);\nthis.mustaches.push(this.mustache5);\nthis.mustaches.push(this.mustache6);\n// spots\nthis.spot1 = new THREE.Mesh(spotGeom, this.redMat);\nthis.spot1.position.x = 39;\nthis.spot1.position.z = 150;\nthis.spot2 = this.spot1.clone();\nthis.spot2.position.z = 160;\nthis.spot2.position.y = -10;\nthis.spot3 = this.spot1.clone();\nthis.spot3.position.z = 140;\nthis.spot3.position.y = -15;\nthis.spot4 = this.spot1.clone();\nthis.spot4.position.z = 150;\nthis.spot4.position.y = -20;\nthis.spot5 = this.spot1.clone();\nthis.spot5.position.x = -39;\nthis.spot6 = this.spot2.clone();\nthis.spot6.position.x = -39;\nthis.spot7 = this.spot3.clone();\nthis.spot7.position.x = -39;\nthis.spot8 = this.spot4.clone();\nthis.spot8.position.x = -39;\n// eyes\nthis.leftEye = new THREE.Mesh(eyeGeom, this.whiteMat);\nthis.leftEye.position.x = 40;\nthis.leftEye.position.z = 120;\nthis.leftEye.position.y = 25;\nthis.rightEye = new THREE.Mesh(eyeGeom, this.whiteMat);\nthis.rightEye.position.x = -40;\nthis.rightEye.position.z = 120;\nthis.rightEye.position.y = 25;\n// iris\nthis.leftIris = new THREE.Mesh(irisGeom, this.purpleMat);\nthis.leftIris.position.x = 42;\nthis.leftIris.position.z = 120;\nthis.leftIris.position.y = 25;\nthis.rightIris = new THREE.Mesh(irisGeom, this.purpleMat);\nthis.rightIris.position.x = -42;\nthis.rightIris.position.z = 120;\nthis.rightIris.position.y = 25;\n// mouth\nthis.mouth = new THREE.Mesh(mouthGeom, this.blackMat);\nthis.mouth.position.z = 171;\nthis.mouth.position.y = -30;\nthis.mouth.scale.set(.5,.5,1);\n// smile\nthis.smile = new THREE.Mesh(smileGeom, this.greyMat);\nthis.smile.position.z = 173; \nthis.smile.position.y = -15;\nthis.smile.rotation.z = -Math.PI;\n// lips\nthis.lips = new THREE.Mesh(lipsGeom, this.yellowMat);\nthis.lips.position.z = 165;\nthis.lips.position.y = -45;\n// ear\nthis.rightEar = new THREE.Mesh(earGeom, this.yellowMat);\nthis.rightEar.position.x = -50;\nthis.rightEar.position.y = 50;\nthis.rightEar.position.z = 105;\nthis.leftEar = new THREE.Mesh(earGeom, this.yellowMat);\nthis.leftEar.position.x = 50;\nthis.leftEar.position.y = 50;\nthis.leftEar.position.z = 105;\n// nose\nthis.nose = new THREE.Mesh(noseGeom, this.greyMat);\nthis.nose.position.z = 170;\nthis.nose.position.y = 25;\n// head\nthis.head = new THREE.Group();\nthis.head.add(this.face);\nthis.head.add(this.mane);\nthis.head.add(this.rightEar);\nthis.head.add(this.leftEar);\nthis.head.add(this.nose);\nthis.head.add(this.leftEye);\nthis.head.add(this.rightEye);\nthis.head.add(this.leftIris);\nthis.head.add(this.rightIris);\nthis.head.add(this.mouth);\nthis.head.add(this.smile);\nthis.head.add(this.lips);\nthis.head.add(this.spot1);\nthis.head.add(this.spot2);\nthis.head.add(this.spot3);\nthis.head.add(this.spot4);\nthis.head.add(this.spot5);\nthis.head.add(this.spot6);\nthis.head.add(this.spot7);\nthis.head.add(this.spot8);\nthis.head.add(this.mustache1);\nthis.head.add(this.mustache2);\nthis.head.add(this.mustache3);\nthis.head.add(this.mustache4);\nthis.head.add(this.mustache5);\nthis.head.add(this.mustache6);\nthis.head.position.y = 60;\nthis.threegroup.add(this.body);\nthis.threegroup.add(this.head);\nthis.threegroup.add(this.leftKnee);\nthis.threegroup.add(this.rightKnee);\nthis.threegroup.add(this.backLeftFoot);\nthis.threegroup.add(this.backRightFoot);\nthis.threegroup.add(this.frontRightFoot);\nthis.threegroup.add(this.frontLeftFoot);\nthis.threegroup.traverse( function ( object ) {\nif ( object instanceof THREE.Mesh ) {\nobject.castShadow = true;\nobject.receiveShadow = true;\n}\n} );\n}\nLion.prototype.updateBody = function(speed){\nthis.head.rotation.y += (this.tHeagRotY - this.head.rotation.y) / speed;\nthis.head.rotation.x += (this.tHeadRotX - this.head.rotation.x) / speed;\nthis.head.position.x += (this.tHeadPosX-this.head.position.x) / speed; \nthis.head.position.y += (this.tHeadPosY-this.head.position.y) / speed; \nthis.head.position.z += (this.tHeadPosZ-this.head.position.z) / speed; \nthis.leftEye.scale.y += (this.tEyeScale - this.leftEye.scale.y) / (speed*2);\nthis.rightEye.scale.y = this.leftEye.scale.y;\nthis.leftIris.scale.y += (this.tIrisYScale - this.leftIris.scale.y) / (speed*2);\nthis.rightIris.scale.y = this.leftIris.scale.y;\nthis.leftIris.scale.z += (this.tIrisZScale - this.leftIris.scale.z) / (speed*2);\nthis.rightIris.scale.z = this.leftIris.scale.z;\nthis.leftIris.position.y += (this.tIrisPosY - this.leftIris.position.y) / speed;\nthis.rightIris.position.y = this.leftIris.position.y;\nthis.leftIris.position.z += (this.tLeftIrisPosZ - this.leftIris.position.z) / speed;\nthis.rightIris.position.z += (this.tRightIrisPosZ - this.rightIris.position.z) / speed;\nthis.rightKnee.rotation.z += (this.tRightKneeRotZ - this.rightKnee.rotation.z) / speed;\nthis.leftKnee.rotation.z += (this.tLeftKneeRotZ - this.leftKnee.rotation.z) / speed;\nthis.lips.position.x += (this.tLipsPosX - this.lips.position.x) / speed;\nthis.lips.position.y += (this.tLipsPosY - this.lips.position.y) / speed;\nthis.smile.position.x += (this.tSmilePosX - this.smile.position.x) / speed;\nthis.mouth.position.z += (this.tMouthPosZ - this.mouth.position.z) / speed;\nthis.smile.position.z += (this.tSmilePosZ - this.smile.position.z) / speed;\nthis.smile.position.y += (this.tSmilePosY - this.smile.position.y) / speed;\nthis.smile.rotation.z += (this.tSmileRotZ - this.smile.rotation.z) / speed;\n}\nLion.prototype.look = function(xTarget, yTarget){\nthis.tHeagRotY = rule3(xTarget, -200, 200, -Math.PI/4, Math.PI/4);\nthis.tHeadRotX = rule3(yTarget, -200,200, -Math.PI/4, Math.PI/4);\nthis.tHeadPosX = rule3(xTarget, -200, 200, 70,-70);\nthis.tHeadPosY = rule3(yTarget, -140, 260, 20, 100);\nthis.tHeadPosZ = 0;\nthis.tEyeScale = 1;\nthis.tIrisYScale = 1;\nthis.tIrisZScale = 1;\nthis.tIrisPosY = rule3(yTarget, -200,200, 35,15);\nthis.tLeftIrisPosZ = rule3(xTarget, -200, 200, 130, 110);\nthis.tRightIrisPosZ = rule3(xTarget, -200, 200, 110, 130);\nthis.tLipsPosX = 0;\nthis.tLipsPosY = -45;\nthis.tSmilePosX = 0;\nthis.tMouthPosZ = 174;\nthis.tSmilePosZ = 173;\nthis.tSmilePosY = -15;\nthis.tSmileRotZ = -Math.PI;\nthis.tRightKneeRotZ = rule3(xTarget, -200, 200, .3-Math.PI/8, .3+Math.PI/8);\nthis.tLeftKneeRotZ = rule3(xTarget, -200, 200, -.3-Math.PI/8, -.3+Math.PI/8)\nthis.updateBody(10);\nthis.mane.rotation.y = 0;\nthis.mane.rotation.x = 0;\nfor (var i=0; i<this.maneParts.length; i++){\nvar m = this.maneParts[i].mesh;\nm.position.z = 0;\nm.rotation.y = 0;\n}\nfor (var i=0; i<this.mustaches.length; i++){\nvar m = this.mustaches[i];\nm.rotation.y = 0;\n}\nfor (var i=0; i<this.bodyVertices.length; i++){\nvar tvInit = this.bodyInitPositions[i];\nvar tv = this.body.geometry.vertices[this.bodyVertices[i]];\ntv.x = tvInit.x + this.head.position.x;\n}\nthis.body.geometry.verticesNeedUpdate = true;\n}\nLion.prototype.cool = function(xTarget, yTarget){\nthis.tHeagRotY = rule3(xTarget, -200, 200, Math.PI/4, -Math.PI/4);\nthis.tHeadRotX = rule3(yTarget, -200,200, Math.PI/4, -Math.PI/4);\nthis.tHeadPosX = rule3(xTarget, -200, 200, -70,70);\nthis.tHeadPosY = rule3(yTarget, -140, 260, 100, 20);\nthis.tHeadPosZ = 100;\nthis.tEyeScale = 0.1;\nthis.tIrisYScale = 0.1;\nthis.tIrisZScale = 3;\nthis.tIrisPosY = 20;\nthis.tLeftIrisPosZ = 120;\nthis.tRightIrisPosZ = 120;\nthis.tLipsPosX = rule3(xTarget, -200, 200, -15,15);\nthis.tLipsPosY = rule3(yTarget, -200, 200, -45,-40);\nthis.tMouthPosZ = 168;\nthis.tSmilePosX = rule3(xTarget, -200, 200, -15,15); \nthis.tSmilePosY = rule3(yTarget, -200, 200, -20,-8); \nthis.tSmilePosZ = 176;\nthis.tSmileRotZ = rule3(xTarget, -200, 200, -Math.PI-.3, -Math.PI+.3);\nthis.tRightKneeRotZ = rule3(xTarget, -200, 200, .3+Math.PI/8, .3-Math.PI/8);\nthis.tLeftKneeRotZ = rule3(xTarget, -200, 200, -.3+Math.PI/8, -.3-Math.PI/8);\nthis.updateBody(10);\nthis.mane.rotation.y = -.8*this.head.rotation.y;\nthis.mane.rotation.x = -.8*this.head.rotation.x;\nvar dt = 20000 / (xTarget*xTarget+yTarget*yTarget);\ndt = Math.max(Math.min(dt,1), .5);\nthis.windTime += dt;\nfor (var i=0; i<this.maneParts.length; i++){\nvar m = this.maneParts[i].mesh;\nvar amp = this.maneParts[i].amp;\nvar zOffset = this.maneParts[i].zOffset;\nvar periodOffset = this.maneParts[i].periodOffset;\nm.position.z = zOffset + Math.cos(this.windTime+periodOffset)*amp*dt*2; \n}\nthis.leftEar.rotation.x = Math.cos(this.windTime)*Math.PI/16*dt; \nthis.rightEar.rotation.x = -Math.cos(this.windTime)*Math.PI/16*dt; \nfor (var i=0; i<this.mustaches.length; i++){\nvar m = this.mustaches[i];\nvar amp = (i<3) ? -Math.PI/8 : Math.PI/8;\nm.rotation.y = amp + Math.cos(this.windTime + i)*dt*amp; \n};\nfor (var i=0; i<this.bodyVertices.length; i++){\nvar tvInit = this.bodyInitPositions[i];\nvar tv = this.body.geometry.vertices[this.bodyVertices[i]];\ntv.x = tvInit.x + this.head.position.x;\n}\nthis.body.geometry.verticesNeedUpdate = true;\n}\nfunction loop(){\nrender();\nvar xTarget = (mousePos.x-windowHalfX);\nvar yTarget= (mousePos.y-windowHalfY);\nfan.isBlowing = isBlowing;\nfan.update(xTarget, yTarget);\nif(isBlowing) {\nlion.cool(xTarget, yTarget);\n}else{\nlion.look(xTarget, yTarget);\n}\nrequestAnimationFrame(loop);\n}\nfunction render(){\nif (controls) controls.update();\nrenderer.render(scene, camera);\n}\ninit();\ncreateLights();\ncreateFloor();\ncreateLion();\ncreateFan();\nloop();\nfunction clamp(v,min, max){\nreturn Math.min(Math.max(v, min), max);\n}\nfunction rule3(v,vmin,vmax,tmin, tmax){\nvar nv = Math.max(Math.min(v,vmax), vmin);\nvar dv = vmax-vmin;\nvar pc = (nv-vmin)/dv;\nvar dt = tmax-tmin;\nvar tv = tmin + (pc*dt);\nreturn tv;\n}\n"));
e_0.appendChild(e_19);
container.appendChild(e_0);
return container;
}上面为js代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wanghao | Chill The Lion</title>
<link rel="icon" type="image/x-icon" href="../favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="i3bVXD3ywVilJt3b0Denbr2n41les3p8ciIldduw4X0" />
<div id="world"></div>
<div id="instructions">按住并拖动以产生风<br/><span class="lightInstructions">小狮子一定会很舒服</span></div>
<div id="credits">
<div class="made-with-love">
Made with
<i>♥</i> by
<a target="_blank" href="https://blog.csdn.net/qq_44273429/">海拥CSDN博客</a>
</div>
<p>Copyright © <a href="https://wanghao221.github.io/">Wang Hao</a></p>
</div>
<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;
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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/264161/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) {
if (event.touches.length > 1) {
event.preventDefault();
mousePos = {x:event.touches[0].pageX, y:event.touches[0].pageY};
isBlowing = true;
}
}
function handleTouchEnd(event) {
//mousePos = {x:windowHalfX, y:windowHalfY};
isBlowing = false;
}
function handleTouchMove(event) {
if (event.touches.length == 1) {
event.preventDefault();
mousePos = {x:event.touches[0].pageX, y:event.touches[0].pageY};
isBlowing = true;
}
}
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);
}
function createFloor(){
floor = new THREE.Mesh(new THREE.PlaneBufferGeometry(1000,500), new THREE.MeshBasicMaterial({color: 0xebe5e7}));
floor.rotation.x = -Math.PI/2;
floor.position.y = -100;
floor.receiveShadow = true;
scene.add(floor);
}
function createLion(){
lion = new Lion();
scene.add(lion.threegroup);
}
function createFan(){
fan = new Fan();
fan.threegroup.position.z = 350;
scene.add(fan.threegroup);
}
Fan = function(){
this.isBlowing = false;
this.speed = 0;
this.acc =0;
this.redMat = new THREE.MeshLambertMaterial ({
color: 0xad3525,
shading:THREE.FlatShading
});
this.greyMat = new THREE.MeshLambertMaterial ({
color: 0x653f4c,
shading:THREE.FlatShading
});
this.yellowMat = new THREE.MeshLambertMaterial ({
color: 0xfdd276,
shading:THREE.FlatShading
});
var coreGeom = new THREE.BoxGeometry(10,10,20);
var sphereGeom = new THREE.BoxGeometry(10, 10, 3);
var propGeom = new THREE.BoxGeometry(10,30,2);
propGeom.applyMatrix( new THREE.Matrix4().makeTranslation( 0,25,0) );
this.core = new THREE.Mesh(coreGeom,this.greyMat);
// propellers
var prop1 = new THREE.Mesh(propGeom, this.redMat);
prop1.position.z = 15;
var prop2 = prop1.clone();
prop2.rotation.z = Math.PI/2;
var prop3 = prop1.clone();
prop3.rotation.z = Math.PI;
var prop4 = prop1.clone();
prop4.rotation.z = -Math.PI/2;
this.sphere = new THREE.Mesh(sphereGeom, this.yellowMat);
this.sphere.position.z = 15;
this.propeller = new THREE.Group();
this.propeller.add(prop1);
this.propeller.add(prop2);
this.propeller.add(prop3);
this.propeller.add(prop4);
this.threegroup = new THREE.Group();
this.threegroup.add(this.core);
this.threegroup.add(this.propeller);
this.threegroup.add(this.sphere);
}
Fan.prototype.update = function(xTarget, yTarget){
this.threegroup.lookAt(new THREE.Vector3(0,80,60));
this.tPosX = rule3(xTarget, -200, 200, -250, 250);
this.tPosY = rule3(yTarget, -200, 200, 250, -250);
this.threegroup.position.x += (this.tPosX - this.threegroup.position.x) /10;
this.threegroup.position.y += (this.tPosY - this.threegroup.position.y) /10;
this.targetSpeed = (this.isBlowing) ? .3 : .01;
if (this.isBlowing && this.speed < .5){
this.acc +=.001;
this.speed += this.acc;
}else if (!this.isBlowing){
this.acc = 0;
this.speed *= .98;
}
this.propeller.rotation.z += this.speed;
}
Lion = function(){
this.windTime = 0;
this.bodyInitPositions = [];
this.maneParts = [];
this.threegroup = new THREE.Group();
this.yellowMat = new THREE.MeshLambertMaterial ({
color: 0xfdd276,
shading:THREE.FlatShading
});
this.redMat = new THREE.MeshLambertMaterial ({
color: 0xad3525,
shading:THREE.FlatShading
});
this.pinkMat = new THREE.MeshLambertMaterial ({
color: 0xe55d2b,
shading:THREE.FlatShading
});
this.whiteMat = new THREE.MeshLambertMaterial ({
color: 0xffffff,
shading:THREE.FlatShading
});
this.purpleMat = new THREE.MeshLambertMaterial ({
color: 0x451954,
shading:THREE.FlatShading
});
this.greyMat = new THREE.MeshLambertMaterial ({
color: 0x653f4c,
shading:THREE.FlatShading
});
this.blackMat = new THREE.MeshLambertMaterial ({
color: 0x302925,
shading:THREE.FlatShading
});
var bodyGeom = new THREE.CylinderGeometry(30,80, 140, 4);
var maneGeom = new THREE.BoxGeometry(40,40,15);
var faceGeom = new THREE.BoxGeometry(80,80,80);
var spotGeom = new THREE.BoxGeometry(4,4,4);
var mustacheGeom = new THREE.BoxGeometry(30,2,1);
mustacheGeom.applyMatrix( new THREE.Matrix4().makeTranslation( 15, 0, 0 ) );
var earGeom = new THREE.BoxGeometry(20,20,20);
var noseGeom = new THREE.BoxGeometry(40,40,20);
var eyeGeom = new THREE.BoxGeometry(5,30,30);
var irisGeom = new THREE.BoxGeometry(4,10,10);
var mouthGeom = new THREE.BoxGeometry(20,20,10);
var smileGeom = new THREE.TorusGeometry( 12, 4, 2, 10, Math.PI );
var lipsGeom = new THREE.BoxGeometry(40,15,20);
var kneeGeom = new THREE.BoxGeometry(25, 80, 80);
kneeGeom.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 50, 0 ) );
var footGeom = new THREE.BoxGeometry(40, 20, 20);
// body
this.body = new THREE.Mesh(bodyGeom, this.yellowMat);
this.body.position.z = -60;
this.body.position.y = -30;
this.bodyVertices = [0,1,2,3,4,10];
for (var i=0;i<this.bodyVertices.length; i++){
var tv = this.body.geometry.vertices[this.bodyVertices[i]];
tv.z =70;
//tv.x = 0;
this.bodyInitPositions.push({x:tv.x, y:tv.y, z:tv.z});
}
// knee
this.leftKnee = new THREE.Mesh(kneeGeom, this.yellowMat);
this.leftKnee.position.x = 65;
this.leftKnee.position.z = -20;
this.leftKnee.position.y = -110;
this.leftKnee.rotation.z = -.3;
this.rightKnee = new THREE.Mesh(kneeGeom, this.yellowMat);
this.rightKnee.position.x = -65;
this.rightKnee.position.z = -20;
this.rightKnee.position.y = -110;
this.rightKnee.rotation.z = .3;
// feet
this.backLeftFoot = new THREE.Mesh(footGeom, this.yellowMat);
this.backLeftFoot.position.z = 30;
this.backLeftFoot.position.x = 75;
this.backLeftFoot.position.y = -90;
this.backRightFoot = new THREE.Mesh(footGeom, this.yellowMat);
this.backRightFoot.position.z = 30;
this.backRightFoot.position.x = -75;
this.backRightFoot.position.y = -90;
this.frontRightFoot = new THREE.Mesh(footGeom, this.yellowMat);
this.frontRightFoot.position.z = 40;
this.frontRightFoot.position.x = -22;
this.frontRightFoot.position.y = -90;
this.frontLeftFoot = new THREE.Mesh(footGeom, this.yellowMat);
this.frontLeftFoot.position.z = 40;
this.frontLeftFoot.position.x = 22;
this.frontLeftFoot.position.y = -90;
// mane
this.mane = new THREE.Group();
for (var j=0; j<4; j++){
for (var k=0; k<4; k++){
var manePart = new THREE.Mesh(maneGeom, this.redMat);
manePart.position.x = (j*40)-60;
manePart.position.y = (k*40)-60;
var amp;
var zOffset;
var periodOffset = Math.random()*Math.PI*2;
var angleOffsetY, angleOffsetX;
var angleAmpY, angleAmpX;
var xInit, yInit;
if ((j==0 && k==0) || (j==0 && k==3) || (j==3 && k==0) || (j==3 && k==3)){
amp = -10-Math.floor(Math.random()*5);
zOffset = -5;
}else if (j==0 || k ==0 || j==3 || k==3){
amp = -5-Math.floor(Math.random()*5);
zOffset = 0;
}else{
amp = 0;
zOffset = 0;
}
this.maneParts.push({mesh:manePart, amp:amp, zOffset:zOffset, periodOffset:periodOffset, xInit:manePart.position.x, yInit:manePart.position.y});
this.mane.add(manePart);
}
}
this.mane.position.y = -10;
this.mane.position.z = 80;
//this.mane.rotation.z = Math.PI/4;
// face
this.face = new THREE.Mesh(faceGeom, this.yellowMat);
this.face.position.z = 135;
// Mustaches
this.mustaches = [];
this.mustache1 = new THREE.Mesh(mustacheGeom, this.greyMat);
this.mustache1.position.x = 30;
this.mustache1.position.y = -5;
this.mustache1.position.z = 175;
this.mustache2 = this.mustache1.clone();
this.mustache2.position.x = 35;
this.mustache2.position.y = -12;
this.mustache3 = this.mustache1.clone();
this.mustache3.position.y = -19;
this.mustache3.position.x = 30;
this.mustache4 = this.mustache1.clone();
this.mustache4.rotation.z = Math.PI;
this.mustache4.position.x = -30;
this.mustache5 = new THREE.Mesh(mustacheGeom, this.blackMat);
this.mustache5 = this.mustache2.clone();
this.mustache5.rotation.z = Math.PI;
this.mustache5.position.x = -35;
this.mustache6 = new THREE.Mesh(mustacheGeom, this.blackMat);
this.mustache6 = this.mustache3.clone();
this.mustache6.rotation.z = Math.PI;
this.mustache6.position.x = -30;
this.mustaches.push(this.mustache1);
this.mustaches.push(this.mustache2);
this.mustaches.push(this.mustache3);
this.mustaches.push(this.mustache4);
this.mustaches.push(this.mustache5);
this.mustaches.push(this.mustache6);
// spots
this.spot1 = new THREE.Mesh(spotGeom, this.redMat);
this.spot1.position.x = 39;
this.spot1.position.z = 150;
this.spot2 = this.spot1.clone();
this.spot2.position.z = 160;
this.spot2.position.y = -10;
this.spot3 = this.spot1.clone();
this.spot3.position.z = 140;
this.spot3.position.y = -15;
this.spot4 = this.spot1.clone();
this.spot4.position.z = 150;
this.spot4.position.y = -20;
this.spot5 = this.spot1.clone();
this.spot5.position.x = -39;
this.spot6 = this.spot2.clone();
this.spot6.position.x = -39;
this.spot7 = this.spot3.clone();
this.spot7.position.x = -39;
this.spot8 = this.spot4.clone();
this.spot8.position.x = -39;
// eyes
this.leftEye = new THREE.Mesh(eyeGeom, this.whiteMat);
this.leftEye.position.x = 40;
this.leftEye.position.z = 120;
this.leftEye.position.y = 25;
this.rightEye = new THREE.Mesh(eyeGeom, this.whiteMat);
this.rightEye.position.x = -40;
this.rightEye.position.z = 120;
this.rightEye.position.y = 25;
// iris
this.leftIris = new THREE.Mesh(irisGeom, this.purpleMat);
this.leftIris.position.x = 42;
this.leftIris.position.z = 120;
this.leftIris.position.y = 25;
this.rightIris = new THREE.Mesh(irisGeom, this.purpleMat);
this.rightIris.position.x = -42;
this.rightIris.position.z = 120;
this.rightIris.position.y = 25;
// mouth
this.mouth = new THREE.Mesh(mouthGeom, this.blackMat);
this.mouth.position.z = 171;
this.mouth.position.y = -30;
this.mouth.scale.set(.5,.5,1);
// smile
this.smile = new THREE.Mesh(smileGeom, this.greyMat);
this.smile.position.z = 173;
this.smile.position.y = -15;
this.smile.rotation.z = -Math.PI;
// lips
this.lips = new THREE.Mesh(lipsGeom, this.yellowMat);
this.lips.position.z = 165;
this.lips.position.y = -45;
// ear
this.rightEar = new THREE.Mesh(earGeom, this.yellowMat);
this.rightEar.position.x = -50;
this.rightEar.position.y = 50;
this.rightEar.position.z = 105;
this.leftEar = new THREE.Mesh(earGeom, this.yellowMat);
this.leftEar.position.x = 50;
this.leftEar.position.y = 50;
this.leftEar.position.z = 105;
// nose
this.nose = new THREE.Mesh(noseGeom, this.greyMat);
this.nose.position.z = 170;
this.nose.position.y = 25;
// head
this.head = new THREE.Group();
this.head.add(this.face);
this.head.add(this.mane);
this.head.add(this.rightEar);
this.head.add(this.leftEar);
this.head.add(this.nose);
this.head.add(this.leftEye);
this.head.add(this.rightEye);
this.head.add(this.leftIris);
this.head.add(this.rightIris);
this.head.add(this.mouth);
this.head.add(this.smile);
this.head.add(this.lips);
this.head.add(this.spot1);
this.head.add(this.spot2);
this.head.add(this.spot3);
this.head.add(this.spot4);
this.head.add(this.spot5);
this.head.add(this.spot6);
this.head.add(this.spot7);
this.head.add(this.spot8);
this.head.add(this.mustache1);
this.head.add(this.mustache2);
this.head.add(this.mustache3);
this.head.add(this.mustache4);
this.head.add(this.mustache5);
this.head.add(this.mustache6);
this.head.position.y = 60;
this.threegroup.add(this.body);
this.threegroup.add(this.head);
this.threegroup.add(this.leftKnee);
this.threegroup.add(this.rightKnee);
this.threegroup.add(this.backLeftFoot);
this.threegroup.add(this.backRightFoot);
this.threegroup.add(this.frontRightFoot);
this.threegroup.add(this.frontLeftFoot);
this.threegroup.traverse( function ( object ) {
if ( object instanceof THREE.Mesh ) {
object.castShadow = true;
object.receiveShadow = true;
}
} );
}
Lion.prototype.updateBody = function(speed){
this.head.rotation.y += (this.tHeagRotY - this.head.rotation.y) / speed;
this.head.rotation.x += (this.tHeadRotX - this.head.rotation.x) / speed;
this.head.position.x += (this.tHeadPosX-this.head.position.x) / speed;
this.head.position.y += (this.tHeadPosY-this.head.position.y) / speed;
this.head.position.z += (this.tHeadPosZ-this.head.position.z) / speed;
this.leftEye.scale.y += (this.tEyeScale - this.leftEye.scale.y) / (speed*2);
this.rightEye.scale.y = this.leftEye.scale.y;
this.leftIris.scale.y += (this.tIrisYScale - this.leftIris.scale.y) / (speed*2);
this.rightIris.scale.y = this.leftIris.scale.y;
this.leftIris.scale.z += (this.tIrisZScale - this.leftIris.scale.z) / (speed*2);
this.rightIris.scale.z = this.leftIris.scale.z;
this.leftIris.position.y += (this.tIrisPosY - this.leftIris.position.y) / speed;
this.rightIris.position.y = this.leftIris.position.y;
this.leftIris.position.z += (this.tLeftIrisPosZ - this.leftIris.position.z) / speed;
this.rightIris.position.z += (this.tRightIrisPosZ - this.rightIris.position.z) / speed;
this.rightKnee.rotation.z += (this.tRightKneeRotZ - this.rightKnee.rotation.z) / speed;
this.leftKnee.rotation.z += (this.tLeftKneeRotZ - this.leftKnee.rotation.z) / speed;
this.lips.position.x += (this.tLipsPosX - this.lips.position.x) / speed;
this.lips.position.y += (this.tLipsPosY - this.lips.position.y) / speed;
this.smile.position.x += (this.tSmilePosX - this.smile.position.x) / speed;
this.mouth.position.z += (this.tMouthPosZ - this.mouth.position.z) / speed;
this.smile.position.z += (this.tSmilePosZ - this.smile.position.z) / speed;
this.smile.position.y += (this.tSmilePosY - this.smile.position.y) / speed;
this.smile.rotation.z += (this.tSmileRotZ - this.smile.rotation.z) / speed;
}
Lion.prototype.look = function(xTarget, yTarget){
this.tHeagRotY = rule3(xTarget, -200, 200, -Math.PI/4, Math.PI/4);
this.tHeadRotX = rule3(yTarget, -200,200, -Math.PI/4, Math.PI/4);
this.tHeadPosX = rule3(xTarget, -200, 200, 70,-70);
this.tHeadPosY = rule3(yTarget, -140, 260, 20, 100);
this.tHeadPosZ = 0;
this.tEyeScale = 1;
this.tIrisYScale = 1;
this.tIrisZScale = 1;
this.tIrisPosY = rule3(yTarget, -200,200, 35,15);
this.tLeftIrisPosZ = rule3(xTarget, -200, 200, 130, 110);
this.tRightIrisPosZ = rule3(xTarget, -200, 200, 110, 130);
this.tLipsPosX = 0;
this.tLipsPosY = -45;
this.tSmilePosX = 0;
this.tMouthPosZ = 174;
this.tSmilePosZ = 173;
this.tSmilePosY = -15;
this.tSmileRotZ = -Math.PI;
this.tRightKneeRotZ = rule3(xTarget, -200, 200, .3-Math.PI/8, .3+Math.PI/8);
this.tLeftKneeRotZ = rule3(xTarget, -200, 200, -.3-Math.PI/8, -.3+Math.PI/8)
this.updateBody(10);
this.mane.rotation.y = 0;
this.mane.rotation.x = 0;
for (var i=0; i<this.maneParts.length; i++){
var m = this.maneParts[i].mesh;
m.position.z = 0;
m.rotation.y = 0;
}
for (var i=0; i<this.mustaches.length; i++){
var m = this.mustaches[i];
m.rotation.y = 0;
}
for (var i=0; i<this.bodyVertices.length; i++){
var tvInit = this.bodyInitPositions[i];
var tv = this.body.geometry.vertices[this.bodyVertices[i]];
tv.x = tvInit.x + this.head.position.x;
}
this.body.geometry.verticesNeedUpdate = true;
}
Lion.prototype.cool = function(xTarget, yTarget){
this.tHeagRotY = rule3(xTarget, -200, 200, Math.PI/4, -Math.PI/4);
this.tHeadRotX = rule3(yTarget, -200,200, Math.PI/4, -Math.PI/4);
this.tHeadPosX = rule3(xTarget, -200, 200, -70,70);
this.tHeadPosY = rule3(yTarget, -140, 260, 100, 20);
this.tHeadPosZ = 100;
this.tEyeScale = 0.1;
this.tIrisYScale = 0.1;
this.tIrisZScale = 3;
this.tIrisPosY = 20;
this.tLeftIrisPosZ = 120;
this.tRightIrisPosZ = 120;
this.tLipsPosX = rule3(xTarget, -200, 200, -15,15);
this.tLipsPosY = rule3(yTarget, -200, 200, -45,-40);
this.tMouthPosZ = 168;
this.tSmilePosX = rule3(xTarget, -200, 200, -15,15);
this.tSmilePosY = rule3(yTarget, -200, 200, -20,-8);
this.tSmilePosZ = 176;
this.tSmileRotZ = rule3(xTarget, -200, 200, -Math.PI-.3, -Math.PI+.3);
this.tRightKneeRotZ = rule3(xTarget, -200, 200, .3+Math.PI/8, .3-Math.PI/8);
this.tLeftKneeRotZ = rule3(xTarget, -200, 200, -.3+Math.PI/8, -.3-Math.PI/8);
this.updateBody(10);
this.mane.rotation.y = -.8*this.head.rotation.y;
this.mane.rotation.x = -.8*this.head.rotation.x;
var dt = 20000 / (xTarget*xTarget+yTarget*yTarget);
dt = Math.max(Math.min(dt,1), .5);
this.windTime += dt;
for (var i=0; i<this.maneParts.length; i++){
var m = this.maneParts[i].mesh;
var amp = this.maneParts[i].amp;
var zOffset = this.maneParts[i].zOffset;
var periodOffset = this.maneParts[i].periodOffset;
m.position.z = zOffset + Math.cos(this.windTime+periodOffset)*amp*dt*2;
}
this.leftEar.rotation.x = Math.cos(this.windTime)*Math.PI/16*dt;
this.rightEar.rotation.x = -Math.cos(this.windTime)*Math.PI/16*dt;
for (var i=0; i<this.mustaches.length; i++){
var m = this.mustaches[i];
var amp = (i<3) ? -Math.PI/8 : Math.PI/8;
m.rotation.y = amp + Math.cos(this.windTime + i)*dt*amp;
};
for (var i=0; i<this.bodyVertices.length; i++){
var tvInit = this.bodyInitPositions[i];
var tv = this.body.geometry.vertices[this.bodyVertices[i]];
tv.x = tvInit.x + this.head.position.x;
}
this.body.geometry.verticesNeedUpdate = true;
}
function loop(){
render();
var xTarget = (mousePos.x-windowHalfX);
var yTarget= (mousePos.y-windowHalfY);
fan.isBlowing = isBlowing;
fan.update(xTarget, yTarget);
if(isBlowing) {
lion.cool(xTarget, yTarget);
}else{
lion.look(xTarget, yTarget);
}
requestAnimationFrame(loop);
}
function render(){
if (controls) controls.update();
renderer.render(scene, camera);
}
init();
createLights();
createFloor();
createLion();
createFan();
loop();
function clamp(v,min, max){
return Math.min(Math.max(v, min), max);
}
function rule3(v,vmin,vmax,tmin, tmax){
var nv = Math.max(Math.min(v,vmax), vmin);
var dv = vmax-vmin;
var pc = (nv-vmin)/dv;
var dt = tmax-tmin;
var tv = tmin + (pc*dt);
return tv;
}
</script>
</head>
<body>
</body>
</html>
上面为html代码
3632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
