今日はJavaScriptライブラリで３Dオブジェクトを使う事ができるthree.jsを紹介します。

今回は基本としてオブジェクトを作成するところまで説明したいと思います。

環境

  • npmが使える
  • JavaScriptの基本が理解できている

three.jsをインストール

では、公式ドキュメンテーションに沿ってライブラリをインストールしましょう。

ついでにgsapのライブラリもインストールします。

これはブラウザに関係なくJavaScriptのアニメーションを動かしてくれるヘルパーになります。

Viteを使わなくても良いですが、お勧めなのでVanilla JSでもViteを使ってプロジェクトを作成してみましょう。

#viteでvanillaJavaScriptのプロジェクトを作成しましょう。

npm create vite@latest

npm install three gsap

npm run dev

これでブラウザからデフォルトのぺージが見れるようになりました。

three.jsを始める前に

three.jsでは３Dのオブジェクトが使えます。という事はそれに合わせて３Dを出力するための情報が必要になるわけですね。

必要な情報は：

①シーン（scene）：風景。three.jsに何をどこにレンダーするか決めます。

②キャラクター：モノや、キャラのオブジェクト

③ライト：光の方向や強さなどを調整します。

④カメラ（camera）：対象物に向けます。デフォルトでは、対象物と同じ位置なので離してあげます。

⑤レンダラー（renderer）：シーンをHTMLにレンダーしてくれます。

では、下記の例が基本の例です。

import * as THREE from "three";

//シーン
const scene = new THREE.Scene();

//キャラクター
const geometry = new THREE.SphereGeometry(3, 64, 64); //物体
const material = new THREE.MeshStandardMaterial({ color: "#00ff83" }); //素材
const sphere = new THREE.Mesh(geometry, material); //形成された3D物体
scene.add(sphere);

//ライト
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 30);
scene.add(light);


//カメラ
const camera = new THREE.PerspectiveCamera(45, 800 / 600, 0.1, 100);
camera.position.z = 20; //カメラをシーンから遠ざける
scene.add(camera);

//レンダラー
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGL1Renderer({ canvas });
renderer.setSize(800, 600);
renderer.render(scene, camera);

これでHTMLに球体が表示されました。

キャラクター

それぞれのメソッドに入れる引数で各パラメータを変えることができます。

上記の例では、SphereGeometry()で球体を呼び出しています。公式ドキュメンテーションでパラメータを変えながら実物をビジュアル化して確認することができます。

キャラクター（物体）のコードの例をおさらいします。

const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

SphereGeometryの部分で形を指定します。

他にBoxGeometry（四角・箱型）や、ConeGeometry（コーン、三角の角）の形までいろいろあります。

BoxGeometry
CapsuleGeometry
CircleGeometry
ConeGeometry
CylinderGeometry
DodecahedronGeometry
EdgesGeometry
ExtrudeGeometry
IcosahedronGeometry
LatheGeometry
OctahedronGeometry
PlaneGeometry
PolyhedronGeometry
RingGeometry
ShapeGeometry
SphereGeometry
TetrahedronGeometry
TorusGeometry
TorusKnotGeometry
TubeGeometry
WireframeGeometry

このSphereGeometry( 15, 32, 16 )のコンストラクタの使い方を説明します。

今回はSphereGeometry（球体）で説明します。デフォルト値や入る値はそれぞれの形で変わるので参考までに理解して、応用してください。

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

radius — 半径（デフォルトで１）
widthSegments — 水平のラインの数（最小値３、デフォルトで３２）多いほどなめらかになります。
heightSegments — 垂直のラインの数（最小値２、デフォルトで１６）多いほどなめらかになります。
phiStart — （水平のスタートする角度、デフォルトで０）

他に、phiLength、thetaStart、thetaLengthなども指定できますが、省きます。

素材

では、形（シェイプ）を決めたところでその素材（マテリアル）を決めます。これにより、光の反射の仕方やテクスチャ（感触）が変わってきます。

例としてMeshNormalMaterialを使うとこのように書けます。

const material = new THREE.MeshNormalMaterial();

このマテリアルはベクター素材をRGBカラーに変換してくれます。

素材の種類だけでもこんなにあります。

LineBasicMaterial
LineDashedMaterial
Material
MeshBasicMaterial
MeshDepthMaterial
MeshDistanceMaterial
MeshLambertMaterial
MeshMatcapMaterial
MeshNormalMaterial
MeshPhongMaterial
MeshPhysicalMaterial
MeshStandardMaterial
MeshToonMaterial
PointsMaterial
RawShaderMaterial
ShaderMaterial
ShadowMaterial
SpriteMaterial

さらに各素材で指定できるパラメータがあるので必要に応じて確認してください。

これで、シェイプ（形）とマテリアル（素材）を合わせて物体を作成してシーンに追加します。

//キャラクター
const geometry = new THREE.SphereGeometry(3, 64, 64); //物体
const material = new THREE.MeshStandardMaterial({ color: "#00ff83" }); //素材
const sphere = new THREE.Mesh(geometry, material); //形成された3D物体
scene.add(sphere);

ライト

次にライトを見てみます。ライトの設定で、先ほど作成した対象物の見え方が変わってきます。

例えば、HemisphereLightを使うとこのように見えます。

const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );

このHemisphereLightは上空から照らすライトなのでこのような影が生成されます。

他に、AmbientLightを使うとこのようにグローバルに対象物を照らすライトが全体を明るくしてくれます。

const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

AmbientLightだけだと方向の概念がないために、３Dのように見えませんね。

もちろん、複数のライトをシーンに追加することもできるので色々試してください。

照明で使えるメソッドはこれくらいあります。

//Lights
AmbientLight
AmbientLightProbe
DirectionalLight
HemisphereLight
HemisphereLightProbe
Light
LightProbe
PointLight
RectAreaLight
SpotLight

//Lights / Shadows
LightShadow
PointLightShadow
DirectionalLightShadow
SpotLightShadow

他にアニメーション、音声、ほのかの細かい設定ができてやっと３Dがまともになると思います。

とりあえずthree.jsの基本だけカバーしておきました。