CSSプロパティの一覧
3Dオブジェクト要素に指定できるCSSプロパティを紹介します。
GOMLには外部スタイルシートやstyle要素がないので、各要素のstyle属性に直接記述します。
scale系
1を100％として親要素に対する拡縮率を指定できます。子孫要素すべてに影響を与えます。
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| scale | X方向の拡縮率 Y方向の拡縮率 Z方向の拡縮率 | 1 1 1 |
| scaleX | X方向の拡縮率 | 1 |
| scaleY | Y方向の拡縮率 | 1 |
| scaleZ | Z方向の拡縮率 | 1 |
position系
親要素を原点としたオブジェクトの中心座標を指定できます。子孫要素すべてが相対位置を保ち続けます。画面右をX軸の＋方向、画面上をY軸の＋方向としたときに画面手前がZ軸の＋方向です。
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| position | X座標 Y座標 Z座標 | 0 0 0 |
| positionX | X座標 | 0 |
| positionY | Y座標 | 0 |
| positionZ | Z座標 | 0 |
rotate系
オブジェクトの中心を原点とした各座標軸に対する回転角を指定できます。子孫要素すべてが回転に連動します。単位はラジアンなので3.14（π）で約半回転、6.28（2π）で約1回転します。回転軸の正方向に対し、反時計回りが正の回転です。
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| rotate | X軸の回転角 Y軸の回転角 Z軸の回転角 | 0 0 0 |
| rotate | X軸の回転角 | 0 |
| rotate | Y軸の回転角 | 0 |
| rotate | Z軸の回転角 | 0 |
lookAt系
親要素の中心を原点とした座標系において、オブジェクトがどこを視点に取るかを指定できます。主にカメラの視点を設定する際に使用します。子孫要素すべてが視点移動に伴う回転に連動します。
一度設定した後に移動や回転が起こるとそれに伴い視点も移動します。画面右をX軸の＋方向、画面上をY軸の＋方向としたときに画面手前がZ軸の＋方向です。
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| rotate | 視点のX座標 視点のY座標 視点のZ座標 | 0 0 0 |
| rotate | 視点のX座標 | 0 |
| rotate | 視点のY座標 | 0 |
| rotate | 視点のZ座標 | 0 |
camera（デフォルト）系
透視投影カメラのパラメータを設定できます。
カメラから見える無限の範囲のオブジェクトすべてを描画すると負荷が高くなるため、camera-nearとcamera-farでどこからどこまでを描画するかを設定します。
アスペクト比はjThreeが自動計算するためcamera-aspectを使う必要はありません。
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| camera-near | 描画を始めるカメラからの距離（>=0） | 0.1 |
| camera-far | 描画を終えるカメラからの距離(>camera-near) | 2000 |
| camera-fov | 画角（>0） | 50 |
| camera-aspect | カメラのアスペクト比 | 自動計算 |
camera（type=”Ort”）系
平行投影カメラのパラメータを設定できます。
camera-nearとcamera-farは、デフォルトの透視投影カメラと同様に設定できます。camera-widthあるいはcamera-heightどちらかのみ設定した場合、もう一方は自動計算されます。
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| camera-width | 描画範囲の横幅 | 100 |
| camera-height | 描画範囲の高さ | 自動計算 |
light系
ライトのパラメータを設定できます。
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| light-color | 光源色のカラーコードまたは数値 | 0xffffff |
| light-intensity | 光の強さ（>0、type=”Amb”以外対応） | 1 |
| light-sky | 空側の光源色（type=”Hem”のみ対応） | 0xffffff |
| light-ground | 地面側の光源色（type=”Hem”のみ対応） | 0xffffff |
| light-distance | 光が届く距離（type=”Poi”と”Spo”のみ対応） | 0 |
| light-angle | 照らす範囲の中心角の半分（type=”Spo”のみ対応） | 約1.04（60°） |
| light-exponent | 光の減衰係数（>0、type=”Spo”のみ対応） | 10 |
その他
子孫要素すべてに影響を与えます。
| プロパティ名 | 値 | デフォルト値 |
|---|---|---|
| display | 表示するか否か（boolean） | true |
| opacity | 不透明度（0～1） | 1 |
3DオブジェクトをGOMLファイルに記述する
ここまでの知識を踏まえて、scene要素内に3Dオブジェクトを配置してみます。
シーンに描画したいもののイメージ（MMDモデルはプラグインを使うため第5回で解説）
- 箱庭（スカイドーム）
- MMDモデルが踊る場所の床
- 環境光
- 太陽光
- カメラ
今回はブラウザ上への描画は行いません。このコードを次回以降も引き続き使用します。
<?xml version="1.0" encoding="UTF-8"?>
<goml>
<head>
<!--次回の記事で解説します。-->
</head>
<body>
<scene>
<!--スカイドームを設置-->
<mesh gmt="#skyGmt" mtr="#skyMtr" />
<!--床を設置-->
<mesh gmt="#floorGmt" mtr="#floorMtr" />
<!--環境光を設置-->
<light type="Amb" />
<!--太陽光を画面左上手前に設置-->
<light type="Dir" style="light-color: #9f9f9f; position: -14 28 24.5;" />
<!--カメラを画面手前上部に設置-->
<camera style="position: 0 10 30; lookAtY: 10;" />
</scene>
</body>
</goml>
まとめ
今回は、jThreeのもっとも重要な仕様であるGOMLとその内のbody要素について解説しました。いきなり大量の情報が出てきましたが、慣れるとHTMLより簡単だと思えるようになるはずです。
次回からはGOMLの残り半分、head要素について解説します。body要素に記述した箱庭（スカイドーム）と床をブラウザ上に描画できるようになります。
