HTML5 Canvas realizes the Dream 3D Hedgehog Ball

Today to bring you a HTML5 canvas to achieve the dream of 3D hedgehog ball. The page is fantastic. As follows:

Online preview Source Download

HTML code:

< Div >        <  width= "1366"  height= " width:1366px" style= "height" : 62px; " >        </ Canvas > </ Div >

JS Code:

 varScreen_width =window.innerwidth, Screen_height=Window.innerheight, R= 200, MouseX= 0, Mousey = 0, Windowhalfx= WINDOW.INNERWIDTH/2, Windowhalfy= WINDOW.INNERHEIGHT/2, camera, scene, renderer;        Init ();        Animate (); functioninit () {varcontainer; Container= document.createelement (' div ');            Document.body.appendChild (container); Camera=NewThree. Perspectivecamera (screen_width/screen_height, 1, 3000); Camera.position.z= 1000; Scene=Newthree.            Scene (); varI, line, vertex1, vertex2, material, p, parameters= [[3.5, 0X90CEBF, 0.5, 1]], geometry=Newthree.            Geometry ();  for(i = 0; i < i++;) {                varVertex1 =Newthree.                Vector3 (); vertex1.x= Math.random () * 2-1; Vertex1.y= Math.random () * 2-1; Vertex1.z= Math.random () * 2-1;                Vertex1.normalize ();                Vertex1.multiplyscalar (R); Vertex2=Vertex1.clone (); Vertex2.multiplyscalar (Math.random ()* 0.09 + 1);                Geometry.vertices.push (VERTEX1);            Geometry.vertices.push (VERTEX2); }             for(i = 0; i < parameters.length; + +)i) {p=Parameters[i]; Material=NewThree. Linebasicmaterial ({color:p[1], opacity:p[2], linewidth:p[3] }); Line=Newthree. Line (geometry, material, three.                Linepieces); Line.scale.x= Line.scale.y = Line.scale.z = p[0]; Line.originalscale= P[0]; LINE.ROTATION.Y= Math.random () *Math.PI;                Line.updatematrix ();            Scene.add (line); } renderer=NewThree. Webglrenderer ({antialias:true });            Renderer.setsize (Screen_width, screen_height);            Container.appendchild (renderer.domelement); Document.addeventlistener (' MouseMove ', Ondocumentmousemove,false); Document.addeventlistener (' Touchstart ', Ondocumenttouchstart,false); Document.addeventlistener (' Touchmove ', Ondocumenttouchmove,false); //Window.addeventlistener (' Resize ', onwindowresize,false); }        functiononwindowresize () {Windowhalfx= WINDOW.INNERWIDTH/2; Windowhalfy= WINDOW.INNERHEIGHT/2; Camera.aspect= Window.innerwidth/Window.innerheight;            Camera.updateprojectionmatrix ();        Renderer.setsize (Window.innerwidth, window.innerheight); }        functionOndocumentmousemove (event) {MouseX= Event.clientx-Windowhalfx; Mousey= Event.clienty-Windowhalfy; }        functionOndocumenttouchstart (event) {if(Event.touches.length > 1) {event.preventdefault (); MouseX= Event.touches[0].pagex-Windowhalfx; Mousey= Event.touches[0].pagey-Windowhalfy; }        }        functionOndocumenttouchmove (event) {if(Event.touches.length = = 1) {event.preventdefault (); MouseX= Event.touches[0].pagex-Windowhalfx; Mousey= Event.touches[0].pagey-Windowhalfy; }        }        //        functionAnimate () {requestanimationframe (animate);        Render (); }        functionrender () {CAMERA.POSITION.Y+ = (-mousey + 200-camera.position.y) *. 05;            Camera.lookat (scene.position);            Renderer.render (scene, camera); varTime = Date.now () * 0.0001;  for(vari = 0; i < scene.children.length; i++) {                varObject =Scene.children[i]; if(Objectinstanceofthree. Line) {OBJECT.ROTATION.Y= Time * (I < 4?) (i + 1):-(i + 1)); }            }        }

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/6585

HTML5 Canvas realizes the Dream 3D Hedgehog Ball