{"id":20275,"date":"2023-08-08T14:43:29","date_gmt":"2023-08-08T21:43:29","guid":{"rendered":"https:\/\/www.kith.org\/jed\/?page_id=20275"},"modified":"2023-08-14T11:51:14","modified_gmt":"2023-08-14T18:51:14","slug":"examples-from-the-vrml-2-0-handbook-chapters-7-8-part-1","status":"publish","type":"page","link":"https:\/\/www.kith.org\/jed\/hodgepodge\/code\/3d-graphics-in-vrml\/examples-from-the-vrml-2-0-handbook\/examples-from-the-vrml-2-0-handbook-chapters-7-8-part-1\/","title":{"rendered":"Examples from the VRML 2.0 Handbook: chapters 7-8, part 1"},"content":{"rendered":"\r\n<script src=\"https:\/\/create3000.github.io\/code\/x_ite\/latest\/x_ite.min.js\"><\/script>\r\n<style>\r\nx3d-canvas {\r\n  width: 600px;\r\n  height: 300px;\r\n}\r\ndiv.x3d-canvas {\r\n  width: 600px;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n}\r\np.download {\r\n  text-align: center;\r\n  text-indent: 0;\r\n  margin: 10px;\r\n}\r\nhr {\r\n  margin-top: 40px;\r\n  margin-bottom: 40px;\r\n}\r\n<\/style>\r\n\r\n<p>This page shows the example 3D models from chapter 7 and the first half of chapter 8 of the <cite>The VRML 2.0 Handbook<\/cite>, by Jed Hartman and Josie Wernecke. For more information, see my main <a href=\"https:\/\/www.kith.org\/jed\/hodgepodge\/code\/3d-graphics-in-vrml\/examples-from-the-vrml-2-0-handbook\/\">Handbook examples page<\/a>.<\/p>\r\n<p>In some cases, the download links download a Zip file containing the main VRML file plus any other associated files that the main file relies on, such as textures.<\/p>\r\n<hr width=\"25%\" \/>\r\n\r\n<p>In the following Chapter 7 scripting examples, we have replaced <code>javascript<\/code> with <code>vrmlscript<\/code>. The specification changed to use <code>vrmlscript<\/code> after publication of the book.<\/p>\r\n\r\n<h2>Example 7-1: Locate-highlighting with a Script node<\/h2>\r\n<p>Shows a skull. To highlight the skull, hover the mouse pointer over it.<\/p>\r\n<p class=\"download\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/07.01.skull.wrl\">Download<\/a><\/p>\r\n<h3>Preview image<\/h3>\r\n<figure id=\"attachment_20390\" class=\"thumbnail wp-caption aligncenter\" style=\"width: 206px\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/7-1.gif\"><img src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/7-1.gif\" alt=\"Example 7-1.\" width=\"196\" height=\"122\" class=\"size-full wp-image-20390\" \/><\/a><figcaption class=\"caption wp-caption-text\">Example 7-1.<\/figcaption><\/figure>\r\n<h3>Live demo<\/h3>\r\n<div class=\"x3d-canvas\">\r\n<x3d-canvas src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/07.01.skull.wrl\"><\/x3d-canvas>\r\n<\/div>\r\n<hr width=\"25%\" \/>\r\n\r\n<h2>Example 7-2: Animating the choices under a Switch node<\/h2>\r\n<p>Shows a flat square. To run the animation, click the square. (The animation of an eagle has been replaced with an animation of a circle moving and getting larger.)<\/p>\r\n<p class=\"download\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/07.02.eagles.zip\">Download<\/a><\/p>\r\n<h3>Preview image<\/h3>\r\n<figure id=\"attachment_20418\" class=\"thumbnail wp-caption aligncenter\" style=\"width: 310px\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/7-2.png\"><img src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/7-2-300x147.png\" alt=\"Example 7-2.\" width=\"300\" height=\"147\" class=\"size-medium wp-image-20418\" \/><\/a><figcaption class=\"caption wp-caption-text\">Example 7-2.<\/figcaption><\/figure>\r\n<h3>Live demo<\/h3>\r\n<div class=\"x3d-canvas\">\r\n<x3d-canvas src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/07.02.eagles.wrl\"><\/x3d-canvas>\r\n<\/div>\r\n<hr width=\"25%\" \/>\r\n\r\n<h2>Example 7-3: Keeping track of state with a script<\/h2>\r\n<p>Shows a brazier. The live demo is slightly different from the example in the book; it uses a small sphere instead of a point set, because the point set wasn\u2019t rendering.<\/p>\r\n<p>To start the animation, click the brazier. The spark (a small yellow sphere) flies up from the coals, and then the animation repeats. To stop the animation, click the brazier again.<\/p>\r\n<p class=\"download\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/07.03.sparkstatePC.zip\">Download<\/a><\/p>\r\n<h3>Preview image<\/h3>\r\n<figure id=\"attachment_20392\" class=\"thumbnail wp-caption aligncenter\" style=\"width: 206px\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/7-3.gif\"><img src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/7-3.gif\" alt=\"Example 7-3.\" width=\"196\" height=\"122\" class=\"size-full wp-image-20392\" \/><\/a><figcaption class=\"caption wp-caption-text\">Example 7-3.<\/figcaption><\/figure>\r\n<h3>Live demo<\/h3>\r\n<div class=\"x3d-canvas\">\r\n<x3d-canvas src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/07.03.sparkstatePC.wrl\"><\/x3d-canvas>\r\n<\/div>\r\n<hr width=\"25%\" \/>\r\n\r\n<h2>Example 7-4, part 1: Animating a viewpoint<\/h2>\r\n<p>Shows a blank sign. The version of this example that appears in the book doesn\u2019t quite work right, so we\u2019ve changed some things for the version here. (For further improvements, see next example.) We apologize for the errors in the book; at the time of publication, some features were not yet implemented in VRML viewers, so we couldn\u2019t test the code for this example.<\/p>\r\n<p>Here are the errors in the book version, and what we did to fix them:<\/p>\r\n<ul>\r\n  <li>A prototype reads its first node and adds it to the scene. Other nodes contained in the prototype can be referenced by routes or scripts, but they are not added to the scene. The example in the book assumed that such nodes would be added to the scene. The corrected example groups all the required nodes (the Viewpoint, the TouchSensor, the Signpost, and the ProximitySensor) under the same Transform node in the TourStop prototype so that they are all added to the scene.<\/li>\r\n  <li>In the original example, <code>viewpointLocation<\/code> and <code>viewpointOrientation<\/code> are fields. Instead, they need to be labeled as <code>exposedField<\/code>.<\/li>\r\n  <li>Some of the viewpoints in the original example seemed to be pointing off into nothingness. This new version makes more visual sense.<\/li>\r\n<\/ul>\r\n<p class=\"download\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/07.04.tour.wrl\">Download<\/a><\/p>\r\n<h3>Preview image<\/h3>\r\n<figure id=\"attachment_20393\" class=\"thumbnail wp-caption aligncenter\" style=\"width: 205px\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/7-4.gif\"><img src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/7-4.gif\" alt=\"Example 7-4, part 1.\" width=\"195\" height=\"121\" class=\"size-full wp-image-20393\" \/><\/a><figcaption class=\"caption wp-caption-text\">Example 7-4, part 1.<\/figcaption><\/figure>\r\n<h3>Live demo<\/h3>\r\n<div class=\"x3d-canvas\">\r\n<x3d-canvas src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/07.04.tour.wrl\"><\/x3d-canvas>\r\n<\/div>\r\n<hr width=\"25%\" \/>\r\n\r\n<h2>Example 7-4, part 2: Further improvements<\/h2>\r\n<p>Shows a blank signpost. At some point after the above improved version of example 7-4, we made some further improvements. In this version, if you\u2019re anywhere near a signpost and you click it, the tour first moves you to the specific location of the tour stop, then moves you to the next stop.<\/p>\r\n<p>This version is still not perfect, but it works better than the previous versions.<\/p>\r\n<p>In this demo, the signposts are blank, but you could add code to display words or images on them.<\/p>\r\n<p class=\"download\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/07\/07.04.fixed.wrl\">Download<\/a><\/p>\r\n<h3>Preview image<\/h3>\r\n<figure id=\"attachment_20061\" class=\"thumbnail wp-caption aligncenter\" style=\"width: 160px\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/07\/07-04-fixed.png\"><img src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/07\/07-04-fixed-150x150.png\" alt=\"Prototype of a guided tour, replacing example 7.4 from The VRML 2.0 Handbook.\" width=\"150\" height=\"150\" class=\"size-thumbnail wp-image-20061\" \/><\/a><figcaption class=\"caption wp-caption-text\">Prototype of a guided tour, replacing example 7.4 from <cite>The VRML 2.0 Handbook<\/cite>.<\/figcaption><\/figure>\r\n<h3>Live demo<\/h3>\r\n<div class=\"x3d-canvas\">\r\n<x3d-canvas src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/07\/07.04.fixed.wrl\"><\/x3d-canvas>\r\n<\/div>\r\n<hr width=\"25%\" \/>\r\n\r\n<h2>Example 8-1: Specifying colors per face<\/h2>\r\n<p>Shows a pyramid with a different color on each face.<\/p>\r\n<p class=\"download\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/08.01.col.face.wrl\">Download<\/a><\/p>\r\n<h3>Preview image<\/h3>\r\n<figure id=\"attachment_20394\" class=\"thumbnail wp-caption aligncenter\" style=\"width: 206px\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/8-1.gif\"><img src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/8-1.gif\" alt=\"Example 8-1.\" width=\"196\" height=\"122\" class=\"size-full wp-image-20394\" \/><\/a><figcaption class=\"caption wp-caption-text\">Example 8-1.<\/figcaption><\/figure>\r\n<h3>Live demo<\/h3>\r\n<div class=\"x3d-canvas\">\r\n<x3d-canvas src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/08.01.col.face.wrl\"><\/x3d-canvas>\r\n<\/div>\r\n<hr width=\"25%\" \/>\r\n\r\n<h2>Example 8-2: Specifying indexed colors per face<\/h2\r\n<p>Shows a pyramid with the same color on some faces.<\/p>\r\n<p class=\"download\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/08.02.col.facei.wrl\">Download<\/a><\/p>\r\n<h3>Preview image<\/h3>\r\n<figure id=\"attachment_20395\" class=\"thumbnail wp-caption aligncenter\" style=\"width: 206px\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/8-2.gif\"><img src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/8-2.gif\" alt=\"Example 8-2.\" width=\"196\" height=\"122\" class=\"size-full wp-image-20395\" \/><\/a><figcaption class=\"caption wp-caption-text\">Example 8-2.<\/figcaption><\/figure>\r\n<h3>Live demo<\/h3>\r\n<div class=\"x3d-canvas\">\r\n<x3d-canvas src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/08.02.col.facei.wrl\"><\/x3d-canvas>\r\n<\/div>\r\n<hr width=\"25%\" \/>\r\n\r\n<h2>Example 8-3: Specifying colors per vertex<\/h2\r\n<p>Shows a pyramid with vertex coloring.<\/p>\r\n<p class=\"download\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/08.03.col.vert.wrl\">Download<\/a><\/p>\r\n<h3>Preview image<\/h3>\r\n<figure id=\"attachment_20396\" class=\"thumbnail wp-caption aligncenter\" style=\"width: 206px\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/8-3.gif\"><img src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/8-3.gif\" alt=\"Example 8-3.\" width=\"196\" height=\"122\" class=\"size-full wp-image-20396\" \/><\/a><figcaption class=\"caption wp-caption-text\">Example 8-3.<\/figcaption><\/figure>\r\n<h3>Live demo<\/h3>\r\n<div class=\"x3d-canvas\">\r\n<x3d-canvas src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/08.03.col.vert.wrl\"><\/x3d-canvas>\r\n<\/div>\r\n<hr width=\"25%\" \/>\r\n\r\n<h2>Example 8-4: Specifying indexed colors per vertex<\/h2\r\n<p>Shows a pyramid with indexed vertex coloring.<\/p>\r\n<p class=\"download\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/08.04.col.verti.wrl\">Download<\/a><\/p>\r\n<h3>Preview image<\/h3>\r\n<figure id=\"attachment_20397\" class=\"thumbnail wp-caption aligncenter\" style=\"width: 206px\"><a href=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/8-4.gif\"><img src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/8-4.gif\" alt=\"Example 8-4.\" width=\"196\" height=\"122\" class=\"size-full wp-image-20397\" \/><\/a><figcaption class=\"caption wp-caption-text\">Example 8-4.<\/figcaption><\/figure>\r\n<h3>Live demo<\/h3>\r\n<div class=\"x3d-canvas\">\r\n<x3d-canvas src=\"https:\/\/www.kith.org\/jed\/wp-content\/uploads\/sites\/2\/2023\/08\/08.04.col.verti.wrl\"><\/x3d-canvas>\r\n<\/div>\r\n<hr width=\"25%\" \/>\r\n\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":20177,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-20275","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages\/20275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/comments?post=20275"}],"version-history":[{"count":22,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages\/20275\/revisions"}],"predecessor-version":[{"id":20508,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages\/20275\/revisions\/20508"}],"up":[{"embeddable":true,"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/pages\/20177"}],"wp:attachment":[{"href":"https:\/\/www.kith.org\/jed\/wp-json\/wp\/v2\/media?parent=20275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}