Flashdrive sample source code
For this example, a 3d scene is loaded and rendered as usual and a few Html elements are used for interaction to change the colors of selected elements in the 3d scene and to do a simple animation.
 |
Sample page |
| <html> | |
| <head> | |
| <title>Axis Engine Flash drive Sample</title> | |
| <script type="text/javascript" src="https://www.palitri.com/vault/axis/engine/web/current/AxisEngine-min.js"></script> | |
| <script type="text/javascript"> | |
| var axis; | |
| // Gets called when the page has finished loading | |
| function Initialize() { | |
| // Create an object to handle the HTML canvas with id='viewport' and pass a function for continuous rendering | |
| var viewport = new AxAnimationElement("viewport"); | |
| // Create the axis engine object, ready to render onto the canvas | |
| axis = new Axis(viewport.canvas); | |
| // Render the scene continuously | |
| viewport.OnRender = function () { axis.RenderScene(); }; | |
| // Perform picking an element of the flash drive with the mouse | |
| viewport.OnMouseDown = function(x, y, button) { | |
| axis.PickByPixelSpaceCoords(new AxVector2(x, y)); | |
| if (axis.screenPickEvents.entityInfo.materialRef !== null) { | |
| document.getElementById("selectedElementLabel").textContent = axis.screenPickEvents.entityInfo.materialRef.name.contents; | |
| } | |
| }; | |
| // Import a scene and when loading is done, start rendering | |
| axis.ImportScene("FlashDrive.axs", | |
| function() { | |
| // Set up an input model to use mouse X and Y input for rotation while the left mouse button is pressed | |
| axis.inputModels.Add(new AxRotationInputModel(axis, axis.FindResource("Base", AxResourceType.Transform), 2.0, 5.0, | |
| "Mouse Y", "", "", "Mouse X", "", "", "Mouse Left")); | |
| viewport.StartRendering(); | |
| } | |
| ); | |
| } | |
| // Buttons functions | |
| function OnColorBarClick(id) | |
| { | |
| if (axis.screenPickEvents.entityInfo.materialRef !== null) | |
| { | |
| var rgb = document.getElementById(id).style.backgroundColor.replace("rgb", "").replace("(", "").replace(")", "").replace(" ", "").split(","); | |
| axis.screenPickEvents.entityInfo.materialRef.GetProperty("Ambient").SetColor(new AxVector4(rgb[0] / 255.0, rgb[1] / 255.0, rgb[2] / 255.0, 1.0)); | |
| axis.screenPickEvents.entityInfo.materialRef.GetProperty("Diffuse").SetColor(new AxVector4(rgb[0] / 255.0, rgb[1] / 255.0, rgb[2] / 255.0, 1.0)); | |
| } | |
| } | |
| function OnOpenClose() { | |
| var animation = axis.FindResource("Animation frame", AxResourceType.Mechanism); | |
| animation.GetProperty("Speed").SetFloat(-animation.GetProperty("Speed").GetFloat()); | |
| }; | |
| </script> | |
| </head> | |
| <body onload="Initialize();" style="margin:0;"> | |
| <table><tr><td> | |
| <span id="selectedElementLabel">Click the model to select an element and change its color</span> | |
| <div> | |
| <div id="clr1" style="background-color:#ffffff; width:20px; height: 20px; border: 1px solid gray; display:inline-block" onclick="OnColorBarClick(this.id);"></div> | |
| <div id="clr2" style="background-color:#0da3e3; width:20px; height: 20px; border: 1px solid gray; display:inline-block" onclick="OnColorBarClick(this.id);"></div> | |
| <div id="clr3" style="background-color:#ff6868; width:20px; height: 20px; border: 1px solid gray; display:inline-block" onclick="OnColorBarClick(this.id);"></div> | |
| <div id="clr4" style="background-color:#c0c0dd; width:20px; height: 20px; border: 1px solid gray; display:inline-block" onclick="OnColorBarClick(this.id);"></div> | |
| <div id="clr5" style="background-color:#e8e3dd; width:20px; height: 20px; border: 1px solid gray; display:inline-block" onclick="OnColorBarClick(this.id);"></div> | |
| <div id="clr6" style="background-color:#c2deb7; width:20px; height: 20px; border: 1px solid gray; display:inline-block" onclick="OnColorBarClick(this.id);"></div> | |
| <div id="clr7" style="background-color:#f1d4a1; width:20px; height: 20px; border: 1px solid gray; display:inline-block" onclick="OnColorBarClick(this.id);"></div> | |
| <div id="clr8" style="background-color:#000000; width:20px; height: 20px; border: 1px solid gray; display:inline-block" onclick="OnColorBarClick(this.id);"></div> | |
| </div> | |
| </td><td style="padding:0 50px;"> | |
| <input type="button" value="Open/Close" onclick="OnOpenClose();"> | |
| </td></tr></table> | |
| <canvas id="viewport" style="width: 100%; height: 75%;"> | |
| </canvas> | |
| </body> | |
| </html> |
 |
Html |
This example consists of a few Html elements
- A canvas element used to render on. It has its id set to "viewport", which will be used by the JavaScript code to identify it and use it for rendering
- A number of div elements, serving as color buttons, each with its own id and background-color set
- An Open/Close button input, which has its onclick event set to call the OnOpenClose() method
The body element has its onload event set to call the Initialize() method, where the whole initialization and rendering is set.
 |
JavaScript |
The 3d scene and rendering are set up in the Initialize() method.
A viewport object is created to utilize the Html Canvas element for rendering and an instance of the Axis engine is created.
A function which does the rendering is assigned to the viewport's OnRender() method.
A function is set to the OnMouseDown event of the viewport object.
This event fires when the Html Canvas element of the viewport is clicked and what the function does is to pick the 3d element under the mouse cursor, in effect selecting it to have its color changed by the OnColorBarClick() method, when a color button is clicked.
For this example, the selected 3d element is retrieved from the engine's screenPickEvents member variable, which gets set by the PickByScreenCoordsPixel method.
The scene file is then loaded asynchronously by the ImportScene method and when done, a callback function is called where an AxRotationInputModel input model is set so that the 3d model will rotate according to the mouse input. Then the viewport's StartRendering method is called to initiate continuous rendering.
The OnColorBarClick() method gets called when any of the Html div elements, serving as color buttons, gets clicked.
It takes the color of the clicked color bar and applies it on the material of the currently selected element in the 3d scene.
A material in the 3d scene may have many different properties, depending on what shading layers the material has. To learn more about materials and shading in Axis, check out the shading model page.
The OnOpenClose() method manipulates the Speed property of an animation in the 3d scene, in order to open or close the cap of the flash drive 3d model.
It queries the engine for the resource which is responsible for changing the animation frame and simply alters the sign of the value of its Speed property, thus making the animation reverse its progress.
You can get a better idea of how this application works by examining the scene in Axis Editor.