ノードの作成

概要

この章ではGrimoire.jsで使用可能なノードを作成してみます。ノードを作成することで、ユーザはGOMLでそれを実際にタグとして使用することができます。基本的なノードを作成することを通して、ノード自作のための手順を学びましょう。

学べること

  • ノードの作成

ノードの作成

コンポーネントを定義するにはregisterNodeメソッドを用います。
registerNodeメソッドでは第一引数にノードの名前、第二引数に付属するデフォルトコンポーネント、第三引数に継承するタグを指定できます。
基本的には以上により、Grimoireインターフェースで定義したタグを記述することができるようになります。

デフォルトコンポーネントに指定されているRotateは”コンポーネントを作成してみる“のセクションのものです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
gr.registerComponent('Rotate', {
attributes: {
speed: {
default: '1',
converter: 'Number',
},
},
$mount: function() {
this.phi = 0;
},
$update: function() {
this.phi += this.getAttribute('speed');
this.node.setAttribute('rotation', this.phi + ',' + this.phi + ',' + this.phi);
},
});
gr.registerNode("rotate", ["Rotate"], {}, "mesh");

登録したノードはGOMLにタグとして使用可能になります。デフォルトコンポーネントとして追加したので、speed属性も指定可能です。

1
<rotate geometry="cube" position="0,0,0" color="#0000FF" speed="1" />

それでは確認してみましょう。

次はマテリアルの自作を学びます。マテリアルは物体の質感を設定するために重要です。Grimoire.jsではマテリアルの作成とインポートを強くサポートしています。マテリアルを作成して、3D表現に幅をもたせましょう。

マテリアルを自作してみる