This is example to change mesh color when mouse hover on the mesh.
You can query node of Grimoire by calling
gr("script tag query")("node tag query") like jQuery.
But there might be multiple GOML files in a single HTML file. Therefore, you need to specify which goml file should be operated with query.
The first query is script tag query. This is query for
<script type="text/goml"> in your HTML. In this example, all GOML file in the HTML is target of the query. This return value is named as
GOMLInterface because it limit which GOML should be affected by later API call.
The secound query is node tag query. This is query for GOML nodes. You can use class,id or node name for querying.
You can not use attribute value for querying like
This return value is named as
NodeInterface in same way.
You can create and assign script queried interface to use them easily. This is same code with the example.
var all = gr("*"); // This is GOML interface
gr("*")("mesh").on method register event handler to specified node. All nodes have event emitter to register handlers.
Several components attached to node can fire some events from these nodes.
gr is a global variable registered by Grimoire.js and it is called
NodeInterface are the most fundamental API of Grimoire.
By understanding these APIs, you would be able to operate Grimoire objects and coop with the other your Web stuff.
If your script need to use
grin global variable, you can prevent Grimoire to use
There is the other global variable
GrimoireJSis also same reference of
gr.noConflict(), value of
gris restored if there was some values before Grimoire.js was loaded.
This feature similar to
You can acccess configuration of Grimoire.js through GrimoireInterface.
For instance, you can dismiss console logging for debugging that is generated by Grimoire default by this code.
GrimoireInterface is functional object. You can call gr as a function.
When string argument was passed to GrimoireInterface, this function works for querying GOML script as described previous section.
This function also accepts function as an argument, Grimoire will call the function as a callback when node construction of GOML was completed. Be careful that this is not called after all resource loaded.
This feature is commonly used for operating objects in the scene initially since these object must be operated after GOML script loaded. This is very similar to
DOMContentLoaded event on HTML.
// Arrange 10 cubes
lib field of GrimoireInterface is important field. You can access internal class definitions of Grimoire from this reference.
var lib = gr.lib;
For example if you loaded
grimoirejs-fundamental plugin that is basic renderer of Grimoire, you can access internal classes of the plugin from
gr.lib.fundamental. This is a example for fetching
Material class of
var Material = gr.lib.fundamental.Material.Material;
This references are automatically generated from folder structures of these plugins. If you need to access internal classes of Grimoire plugins, you would need to know which folder containing these references. (But several classes are so common to use that you can know these references from tutorials).
import Material from "grimoirejs-fundamental/ref/Material/Material";
You can know folder structures from github repository or API references.
GomlInterface is returned value of querying GOML script via GrimoireInterface.
Let assume there was 3 goml files like below.
<script id="first-goml" class="goml-class" type="text/goml" src="first.goml"></script>
<script id="second-goml" class="goml-class" type="text/goml" src="second.goml"></script>
<script id="third-goml" type="text/goml" src="third.goml"></script>
You can fetch GomlInterface by querying these scripts.
var thirdGomlInterface = gr("#third-goml");
GomlInterface can operate multiple or single GOML files.
You can inspect how many script nodes are queried in following way.
GomlInterface don’t contains so much interfaces like GrimoireInterface.
Generally it is used for fetching NodeInterface by calling GomlInterface as a function.
thirdNodeInterface = thirdGomlInterface("mesh");
Make sure the queried objects are GOML nodes not HTML tags like GrimoireInterface.
NodeInterface is used for operating nodes. There are many APIs to operate GOML nodes.
// Display count of meshes
NodeInterface is capable of operating multiple nodes by one call.
If you want to get actual reference of single node from selector, you can use
first() interface to get first one of the selected nodes.
var mesh = gr("*")("mesh").first();
The instance selected by
first() is instance of
GomlNode. GomlNode is actual instance of element in GOML.
GomlNode also contains similar interfaces like
setAttribute. But these are completely different objects.