ノードの作成

概要

この章では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表現に幅をもたせましょう。

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

Edit this page on Github