3D

今日はJavaScriptライブラリで３Dオブジェクトを使う事ができるthree.jsを紹介します。 今回は基本としてオブジェクトを作成するところまで説明したいと思います。 環境 three.jsをインストール では、公式ドキュメンテーションに沿ってライブラリをインストールしましょう。 ついでにgsapのライブラリもインストールします。 これはブラウザに関係なくJavaScriptのアニメーションを動かしてくれるヘルパーになります。 Viteを使わなくても良いですが、お勧めなのでVanilla JSでもViteを使ってプロジェクトを作成してみましょう。 これでブラウザからデフォルトのぺージが見れるようになりました。 three.jsを始める前に three.jsでは３Dのオブジェクトが使えます。という事はそれに合わせて３Dを出力するための情報が必要になるわけですね。 必要な情報は： ①シーン（scene）：風景。three.jsに何をどこにレンダーするか決めます。 ②キャラクター：モノや、キャラのオブジェクト ③ライト：光の方向や強さなどを調整します。 ④カメラ（camera）：対象物に向けます。デフォルトでは、対象物と同じ位置なので離してあげます。 ⑤レンダラー（renderer）：シーンをHTMLにレンダーしてくれます。 では、下記の例が基本の例です。 これでHTMLに球体が表示されました。 キャラクター それぞれのメソッドに入れる引数で各パラメータを変えることができます。 上記の例では、SphereGeometry()で球体を呼び出しています。公式ドキュメンテーションでパラメータを変えながら実物をビジュアル化して確認することができます。 キャラクター（物体）のコードの例をおさらいします。 SphereGeometryの部分で形を指定します。 他にBoxGeometry（四角・箱型）や、ConeGeometry（コーン、三角の角）の形までいろいろあります。 このSphereGeometry( 15, 32, 16 )のコンストラクタの使い方を説明します。 今回はSphereGeometry（球体）で説明します。デフォルト値や入る値はそれぞれの形で変わるので参考までに理解して、応用してください。 radius — 半径（デフォルトで１）widthSegments — 水平のラインの数（最小値３、デフォルトで３２）多いほどなめらかになります。heightSegments — 垂直のラインの数（最小値２、デフォルトで１６）多いほどなめらかになります。phiStart — （水平のスタートする角度、デフォルトで０） 他に、phiLength、thetaStart、thetaLengthなども指定できますが、省きます。 素材 では、形（シェイプ）を決めたところでその素材（マテリアル）を決めます。これにより、光の反射の仕方やテクスチャ（感触）が変わってきます。 例としてMeshNormalMaterialを使うとこのように書けます。 このマテリアルはベクター素材をRGBカラーに変換してくれます。 素材の種類だけでもこんなにあります。 さらに各素材で指定できるパラメータがあるので必要に応じて確認してください。 これで、シェイプ（形）とマテリアル（素材）を合わせて物体を作成してシーンに追加します。 ライト 次にライトを見てみます。ライトの設定で、先ほど作成した対象物の見え方が変わってきます。 例えば、HemisphereLightを使うとこのように見えます。 このHemisphereLightは上空から照らすライトなのでこのような影が生成されます。 他に、AmbientLightを使うとこのようにグローバルに対象物を照らすライトが全体を明るくしてくれます。 AmbientLightだけだと方向の概念がないために、３Dのように見えませんね。 … Read more