Full version: jsB@nk » 3D » 3D living hearts 2
URL: https://www.javascriptbank.com/examples-heart3d-circle.html
This code makes the 3D heart. Also with the points, this code generate a heart which 'be breathing'. Beside, these hearts can be revolved depend on drag&drop status of users.
Full version: jsB@nk » 3D » 3D living hearts 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