Phiên bản đầy đủ: jsB@nk » 3D » Trái tim xoay theo chuột 2
URL: https://www.javascriptbank.com/examples-heart3d-circle.html
Cũng với các điểm vuông, hiệu ứng tạo ra hình tượng trưng một trái tim 'đang thở' đồng thời có thể chuyển động theo nhiều góc độ khác nhau khi người dùng chuột kéo và thả ở vị trí bất kì trên trang web.
Phiên bản đầy đủ: jsB@nk » 3D » Trái tim xoay theo chuột 2
URL: https://www.javascriptbank.com/examples-heart3d-circle.html
<style type="text/css"><!--body {background-image:url('images/bgheart3d.gif');background-repeat:repeat-x;background-color:#C7E0FF;}// --></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/<!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]// ---------------------------------------------------------------------------// MATERIALSvar redBallCBMAterial = createClipButtonMaterial("images/balls.gif", 20, 180, 20, 20, 9);var blueBallCBMAterial = createClipButtonMaterial("images/balls_blue.gif", 20, 180, 20, 20, 9);// ---------------------------------------------------------------------------// HEART MODEL// creates heart model with red ballsvar heartModel = new Model("heart", redBallCBMAterial);// defines model points.// The model's points have to be defined before the respective code is written into the document.heartModel.setPoints(createHeartModelPoints());// ---------------------------------------------------------------------------// HEART SHADOW MODEL// creates heart shadow model with gray ballsvar heartShadowModel = new Model("heartShadow", blueBallCBMAterial);// defines model points.heartShadowModel.setPoints(createHeartModelPoints());// ---------------------------------------------------------------------------// MODULATORS// modulator to rotate the model dependent on mouse interactionsvar myMouseModulator = new MouseModulator("myMouseModulator");// modulator to change the size of the model dependent on sin()var myHeartBeatModulator = new HeartBeatModulator(15);// ---------------------------------------------------------------------------// the matrix to transform the heart into its shadow var reflectionMatrix = new Matrix();function initOnLoad() {fixNetscape();// >> begin to work with the model etc.heartModel.assignLayers();heartShadowModel.assignLayers();//OFFSET_Y_3DHTML = 180;// inits reflectionMatrix reflectionMatrix.translate(0, -300, 0);reflectionMatrix.scale(1, 1, -1);reflectionMatrix.rotateX(Math.PI);// creates and inits matrix to initialize the modelvar initMatrix = new Matrix();initMatrix.scale(20, 20, 20);initMatrix.rotateX(Math.PI);// transforms heart (and shadow) modelheartModel.transform(initMatrix);// copies the current positions of the points from the heart modelheartShadowModel.copyPointsFrom(heartModel);// transforms the heart as it is its own shadowheartShadowModel.transform(reflectionMatrix);// >> first draw call to the modelheartModel.draw();heartShadowModel.draw();// starts animationanimate();}// try: used to store all heartBeat scale transformations// to undo them. (OpenGL technique)var heartBeatStackMatrix = new Matrix();/* * The main animate method. Calls itself repeatedly. */function animate() {var delay = 10;// animates the modulator to spin the heartmyMouseModulator.animate();// animates the modulator to beat the heartmyHeartBeatModulator.animate();// animates HeartModel ----------------------------------------// transforms the heart depending on mouse movements// and on heart beat functionvar myMatrix = myMouseModulator.getMatrix();myMatrix.compose(myHeartBeatModulator.getMatrix());heartModel.transform(myMatrix);// updates displayheartModel.draw();// animates HeartShadowModel ----------------------------------------// copies the current positions of the points from the heart modelheartShadowModel.copyPointsFrom(heartModel);// transforms the heart as it is its own shadowheartShadowModel.transform(reflectionMatrix);// updates displayheartShadowModel.draw();// calls itself with an delay to decouple client computer speed from the animation speed.// result: the animation is as fast as possible.setTimeout("animate()", delay);}// event handlingdocument.onmousemove = mouseMoveHandler;document.onmousedown = mouseDownHandler;document.onmouseup = mouseUpHandler;if (ns) document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);/* * The mouse handlers in this document must call the modulator's handlers. * To be able to use a mouse modulator and to do your own stuff. */function mouseMoveHandler(e) {// calls move handler of the mouse modulatormyMouseModulator.move(e);/*// other stuff, e.g.if (ns || ie) {mouseX = (ns) ? e.pageX : event.x;mouseY = (ns) ? e.pageY : event.y;}*/return !ie;} function mouseDownHandler(e) {// calls down handler of the mouse modulatormyMouseModulator.down(e);}function mouseUpHandler(e) {// calls up handler of the mouse modulatormyMouseModulator.up(e);}// ---------------------------------------------------------------------------function createHeartModelPoints() {// the heart modelreturn new Array(new Point3D(0.0, 3.0, 1.0, 0),new Point3D(1.0, 4.0, 1.0, 0),new Point3D(2.4, 4.2, 1.5, 0),new Point3D(3.75, 3.5, 2.0, 0),new Point3D(3.7, 1.5, 2.0, 0),new Point3D(2.0, -2.0, 1.5, 0),new Point3D(0.0, -4.0, 0.5, 0),new Point3D(-0.0, 3.0, 1.0, 0),new Point3D(-1.0, 4.0, 1.0, 0),new Point3D(-2.4, 4.2, 1.5, 0),new Point3D(-3.75, 3.5, 2.0, 0),new Point3D(-3.7, 1.5, 2.0, 0),new Point3D(-2.0, -2.0, 1.5, 0),new Point3D(-0.0, -4.0, 0.5, 0),new Point3D(0.0, 3.0, -1.0, 0),new Point3D(1.0, 4.0, -1.0, 0),new Point3D(2.4, 4.2, -1.5, 0),new Point3D(3.75, 3.5, -2.0, 0),new Point3D(3.7, 1.5, -2.0, 0),new Point3D(2.0, -2.0, -1.5, 0),new Point3D(0.0, -4.0, -0.5, 0),new Point3D(-0.0, 3.0, -1.0, 0),new Point3D(-1.0, 4.0, -1.0, 0),new Point3D(-2.4, 4.2, -1.5, 0),new Point3D(-3.75, 3.5, -2.0, 0),new Point3D(-3.7, 1.5, -2.0, 0),new Point3D(-2.0, -2.0, -1.5, 0),new Point3D(-0.0, -4.0, -0.5, 1));}// --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><body onload="initOnLoad()" style="height:100%"><!-- layer to bugfix netscape --><div id="fixnetscape" style="position:absolute;visibility:hidden"></div><div id="sym" style="position:absolute; left:600px; top:430px; background-color:red"><img src="images/sym.gif" width="155" height="145" alt="" border="0"></div><script language="JavaScript" type="text/javascript"><!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]// MANDATORY: INSERTION OF HTML PART INTO PAGE// creates the HTML code representing the model's points// NB: This is written directly into the page from within the methodheartModel.createPointCode();heartShadowModel.createPointCode();// --></script></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/3d/js/LyrObj.jshttp://javascriptbank.com/javascript/3d/js/3dhtml.jshttp://javascriptbank.com/javascript/3d/js/ClipButton.jshttp://javascriptbank.com/javascript/3d/js/MouseModulator.jshttp://javascriptbank.com/javascript/3d/js/ColorUtil.jshttp://javascriptbank.com/javascript/3d/js/HeartBeatModulator.jshttp://javascriptbank.com/javascript/3d/js/materials.jshttp://javascriptbank.com/javascript/3d/examples/images/balls.gifhttp://javascriptbank.com/javascript/3d/examples/images/balls_blue.gif