Curl で 3D | CURL DEVELOPER CENTER

3D空間をCurlでどのように作成するかをご紹介します。

１．Sceneとは？

Sceneは3D空間を提供するグラフィックAPIです。

２．Sceneを作成する方法

Sceneを作成する方法は簡単で、Sceneオブジェクトをインスタンス化するのみです。もちろんこのままではSceneで見えるものはなにもありません。

let my-scene:Scene={Scene}

3.作成したSceneの中にオブジェクトを作成し加える方法

オブジェクトをSceneに追加するには、Sceneのメソッドである add-object を使用します。（削除するときは remove-objectメソッドを使用します。）

標準APIに組み込まれているSceneに加えられるオブジェクトは3つあります：Triangle, Quad, Polygonset

独自のオブジェクトを作成したい場合は SceneObject　もしくは上記3点のオブジェクトを継承して作成することが可能です。

他にも、TextSceneObjectのように３D空間にテキストを置くためのクラスがあります。

また、PolygonSetに光を当てたい場合は、SceneObject を継承した SceneLight を実装します。（SceneLightには直接継承しているサブクラスとして PointLight, SpotLight, DirectionalLight があります。）

{let my-scene:Scene = {Scene}}
{my-scene.add-object my-object}

４．Sceneを表示させる方法

最も簡単にSceneを表示させる方法は、Graphic を継承した SceneGraphic を使うことです。

{let scene-graphic:SceneGraphic =
{SceneGraphic
my-scene,
width= 20cm,
height= 20cm,
border-width = 5cm,
border-color=”black”,
background = {FillPattern.get-black}
}
}

５．視点の移動方法

すべてのSceneは Camera オブジェクトを持っています。Scene の camera メソッドを使用することで色々な視点を切り替えることが可能です。

６．光を当てる方法

Curlでは、SceneLightsクラスを使用し、３種類の光を提供しています：PointLight（電球のような光）, SpotSlight（円錐内の原点から発せられる光線）, DirectionalLight（方向性を持つ複数の光線）の3種類です。

他のオブジェクトと同様に、SceneLightはSceneに追加します。SceneLightは自分自身を描画しませんが、その光によってオブジェクトが光っていることが確認できると思います。尚、現時点ではPolygonSetのみがSceneLightに対応しています。

７．マウスクリック等のイベントを取得する方法

SceneObject は EventTarget を継承しているので、マウスクリックやポインタイベントに反応させるためには、EventHandlersを設定することが必要です。EventHandler の作成の際に、SceneEvent を継承したものを使う場合が多くなります（PointerPress ではなく PointerPressSceneEvent を使用する、等）。

８．複数のSceneObjectをグループ化する方法。

SceneGroup を使って複数のSceneObjectをグループ化します。add-object メソッドを使い SceneObject を追加していきます。

そして、そのSceneGroup を Scene に追加すれば終わりです。

SceneGroupを使用するメリットとして、複数の SceneObject の制御、管理を一括で行うことが挙げられます。

ソースサンプル

３Dソースサンプル