さまざまな3Dのオブジェクトを表示できます。言葉で説明するより、実際に動くものを見たほうがわかりやすいと思いますので、次のデモを試してみてください。サンプルを再生するサンプルのソースコードを確認する上記のデモのような形状がThree.jsで扱える基本的な形状として、いくつか用意されています。基本的な形状を利用するためのサンプルコードThree.jsでは形状とマテリアルを結合しメッシュを作成することによって、表示可能な3Dのオブジェクトを得ることができます。形状はクラスのインスタンスを作成することで用意できます。具体的なコードですが、球体の場合を例にして紹介しますと次の1の部分を変更すれば任意の形状を設定できます。3D空間にメッシュを追加scene.add(mesh);さまざまな形状のスクリプトを確認するThree.jsに用意されているさまざまな形状を実現するコードを見て行きましょう。それぞれの形状のクラスファイルはGeometryという名前がついています。docs」を確認ください。docs」を確認ください。docs」を確認ください。docs」を確認ください。docs」を確認ください。docs」を確認ください。パラメーターについて上記で紹介した形状ですが、それぞれにクラスのコンストラクターの引数で大きさ等を指定できます。ほとんどのクラスで同じ引数を取るのですが、代表的なものを紹介すると次の通りです。Sphereでは球体の半径で、ConeとCylinderでは底辺の半径。縦方向の分割数segments(セグメント)というパラメーターは2次元表現にないので、見慣れないパラメーターだと思います。3Dでは表示オブジェクトをポリゴン化して表示させるのですが、セグメントというパラメーターは大雑把にいうとポリゴンの細分化の分割数となります。セグメントを増やすと、球体(SphereGeometry)ではより滑らかになります。まとめ今回のチュートリアルでは、基本的な形状についての解説を行いました。平面や直方体など基本的な形状を組み合わせるだけでもさまざまな3D表現を作ることができます。サンプルを元に色々と試してみてください。令和元年6月11日現在最新のリビジョン105を元に執筆しています。作例をみてThree.jsで実現可能な表現のインスピレーションを得ましょう。(英語)Three.jsの情報源わからないことがあれば、フォーラムや勉強会を調べてみましょう。