おはこんばんにちは～
3Dに興味あるけど、なかなか手が出せてなかったきょうPです。
前回紹介した「3Dを駆使したWEBサイト」についてまとめた記事を作成してみましたが、 あれから自分も同じように3Dを使ったサイトを作れたら面白いなぁ～と考えていました。
JSちゃんと理解してないと絶対躓きそうだなぁと感じながらも、記事のネタにもなると思って、今回は実際に「ブラウザ上で3Dを表示して動かしてみる」ところまでを勉強してみました。
まず初めに
まず初めに、ブラウザ上で3Dを再現するため技術について「WebGL(ウェブジーエル)」というものがあります。
ウィキペディアの内容を引用すると、 下記のような説明になっています。
WebGL（ウェブジーエル）はウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。
引用元：https://ja.wikipedia.org/wiki/WebGL
前提としてこのWebGLが根本にあって3Dを表示することができるのですが、これをさらに簡単にしたJSのライブラリーが存在します。
それが今回解説していく「Three.js」になります。
このThree.jsをわかりやすく説明すると、jQuery（ジェイクエリー）の3D版のような感じです。
つまり、JSが苦手な人でも簡単に3Dをブラウザ上に表示できるようにした画期的なライブラリとなっています。
そして、このThree.jsを使ってSTRIXのロゴの3Dオブジェクトを作ってみました▼
※今回はこちらの記事を参考にさせていただきました▼
https://www.mitsue.co.jp/knowledge/blog/frontend/201912/20_0000.html
では、実際にどういう仕組みでこのSTRIXロゴを作成していったのか手順を解説していきます。
htmlにThree.jsを読み込む
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
<!–three.min.jsを読み込む–>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js”</script>
<!– OrbitControls.jsを読み込む(任意) –>
<script src=”https://codepen.io/kudo3/pen/abzbWYN.js”</script>
</head>
<body>
<canvas id=”myCanvas”</canvas>
</body>
</html>
Three.jsを動かすためにhtmlに必要な情報は2つになります。
・three.jsを読み込むscriptタグ
・3Dを描画するためのcanvasタグ
※Three.jsのライブラリは公式サイト:https://threejs.org/からDLできますが、今回はCDNで提供されているURLを使用しています。
※ OrbitControls.jsはマウスのドラッグなどでカメラの3Dを回転させたりする場合に必要になります。
three.jsの記述を追加
//ページの読み込みを待つ
window.addEventListener(‘load’, init);
function init() {
//————— 1. canvas —————//
//canvasに3Dオブジェクトを表示
const canvas = document.querySelector(“#myCanvas”);
//canvasのサイズを指定
const width = 350;
const height = 250;
//————— 2. scene —————//
//3Dを表現する空間
const scene = new THREE.Scene();
//————— 3. light —————//
//点光源1を作成(色, 光の強さ, 距離, 光の減衰率)
const point1 = new THREE.PointLight(0xffffff, 4, 50, 0);
point1.position.set(100, 200, 100);
scene.add(point1);
//点光源2を作成(色, 光の強さ, 距離, 光の減衰率)
const point2 = new THREE.PointLight(0xffffff, 4, 50, 0);
point2.position.set(-200, -200, -100);
scene.add(point2);
//————— 4. mesh —————//
//光沢感のあるマテリアル({ color: 0xから始まる16進数カラー})
const Material = new THREE.MeshStandardMaterial({color: 0xffffff, roughness:0.1})
//直方体その1
const box1 = new THREE.Mesh(
//直方体のジオメトリー(幅,高さ,奥行き)
new THREE.BoxGeometry(30, 400, 70),
Material
);
//位置(x,y,z)
box1.position.set(0, 0, -15);
//回転角(x,y,z)
box1.rotation.set(15,0,0);
//直方体その2
const box2 = new THREE.Mesh(
//直方体のジオメトリー(幅,高さ,奥行き)
new THREE.BoxGeometry(30, 400, 70),
Material
);
//位置(x,y,z)
box2.position.set(0, 0, 15);
//回転角(x,y,z)
box2.rotation.set(-15,0,0);
//円柱その1
const cylinder1 = new THREE.Mesh(
//円柱のジオメトリー(上面半径,下面半径,高さ,円周分割数)
new THREE.CylinderGeometry(35, 35, 30, 30),
Material
);
//位置(x,y,z)
cylinder1.position.set(0, -10, -125);
//回転角(x,y,z)
cylinder1.rotation.set(0,0,1.6);
//円柱その2
const cylinder2 = new THREE.Mesh(
//円柱のジオメトリー(上面半径,下面半径,高さ,円周分割数)
new THREE.CylinderGeometry(35, 35, 30, 30),
Material
);
//位置(x,y,z)
cylinder2.position.set(0, -10, 125);
//回転角(x,y,z)
cylinder2.rotation.set(0,0,1.6);
//メッシュをグループ化
const mesh = new THREE.Group();
mesh.add(box1,box2,cylinder1,cylinder2);
//3D空間にmeshを配置
scene.add(mesh);
//————— 5. camera —————//
//遠近感のあるカメラ(視野角, アスペクト比, near, far)
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 2000);
//カメラの位置(x,y,z)
camera.position.set(0, 0, +1000);
//カメラの視点（注視点）
camera.lookAt(scene.position);
//カメラを360度移動
const controls = new THREE.OrbitControls(camera);
//————— 6. renderer —————//
//物体の輪郭が滑らかに表示
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
//高解像度対応
renderer.setPixelRatio(window.devicePixelRatio);
//幅と高さを設定
renderer.setSize(width, height);
//空間の背景色
renderer.setClearColor(0x000000);
//————— 7. animate —————//
//再度render関数を実行
function render() {
requestAnimationFrame(render);
//反時計周りにロゴを回転
mesh.rotation.y += 0.01;
//シーン, カメラをもとに描画
renderer.render(scene, camera);
}
render();
}
canvas
htmlで記述したcanvas内の表示エリアを指定します。
scene
物体(メッシュ)を置くためのステージ(シーン)を用意します。
light
物体(メッシュ) を照らすための光源を配置します。
現状使用しているポイントライトでは、色、距離、光の減衰率を変更することが可能です。
ポイントライト以外にも様々な光の種類を指定することができます（参考）▼
https://ics.media/tutorial-three/light_variation/
※また、光源は複数設置することが可能です。
mesh
3D本体の部分になるコードを書いていきます。
Three.jsでは、 「球体」「直方体」「平面」などベースとなる3Dの形状(ジオメトリ)がいくつか用意されており、それらを変形し組み合わせることができます。
形状（ジオメトリ ）の種類について（参考）▼
https://ics.media/tutorial-three/geometry_general/
またジオメトリの質感や色に関わる「マテリアル 」を指定も可能です（参考）▼
https://ics.media/tutorial-three/material_variation/
camera
3D空間の視点となるカメラを制御していきます。
カメラには「遠近感 」「平行投影」の2種類があり、今回は奥行き感を表現したいため遠近感のカメラを指定しています。
カメラの種類について（参考）▼
https://ics.media/tutorial-three/camera_variation/
また、カメラの位置をマウスドラッグなどで360°自由に回転させるための制御を同時に行いたい場合はhtmlにOrbitControls.jsを読み込ませ、下記のjsコードを指定する必要があります。
const controls = new THREE.OrbitControls(camera);
※OrbitControls.jsは、公式サイト:https://threejs.org/ からダウンロードできます。
renderer
3Dを画面に描画するための設定を行います。
3Dの輪郭を滑らかに表示するための設定や、画面のピクセルアスペクト比が異なる場合の設定などの処理を描いていきます。
animate
最後は、3Dを回転させたりするためのアニメーション制御を行います。
最後に
最初は興味本意で実際動くかどうか不安はありましたが、Three.jsのおかげでJSがあまりわからない自分でも3Dを作成して動かすことができました。
Three.jsに関する記事も意外とたくさんあったので、調べていくうちにいろいろと覚えることもあってかなり勉強になりました。
今回紹介した内容は、基本中の基本となる技術なのでこれを元の応用していきながら、ブラウザ上で簡易的なVRを作ったり、Google Earthみたいな3D空間に地球を置いて回転させてみたり、調べれば結構いろいろできそうな気がしました。
時間と気力があれば、またThree.jsを勉強してみたいと思います。
ではまたごきげんよ～ 😎
