I'm myu, a study/play.
ICS MEDIAの入門サイトを見ました。GitHubもありました。samplesフォルダのみMIT LICENSEということなので、ここに載せるときははsamplesフォルダの中のだけを使います。
ics-creative/tutorial-threeのGitHub(別窓で開きます)とても良くまとめられているので、ありがたく勉強させていただきます。
three.js1
React Three FiberというJSのライブラリがThree.jsを扱いやすいらしいので、まずReactから初めてReact Three Fiberに行こうと思ってる。
GSAPとかA-Frameを、試してみたのでUP
GSAP
JavaScriptライブラリのGSAPを利用して作成(motionpath_bezier.htmlを数値変えたり、つけ足したりしたもの)
画像なので下線のある（別窓で開きます）で開いたもので見てください (別窓で開きます)
A-FrameでVRのためし中
test
画像なので指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 vr1(別窓で開きます)
vr2(別窓で開きます) vr3(別窓で開きます)セーブポイント風魔法陣
セーブポイント風魔法陣を元に、画像と数値を変えてみました。
画像なので指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 (別窓で開きます)
webpack使用したのを修正するとき、npx tscとnpm run buildをしないと反映されないのは手間だけど、処理が速くなるのと(実感はないけど)、UPするファイル数が激減
three.js応用 3
マグマエフェクトを参考に作成
画像なので指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 PC推奨スマホだと一部のみ表示(別窓で開きます)
webpackとTypeScriptを使用して作成したものです。実行したらtsファイルからjsファイルが作成された。mapファイルも作成されてました。
three.jsのGLSL
GLSLは初めてしったので、ぷるぷるシェーダーの作り方をみました。
参考にしたサイトのぷるぷるシェーダーの作り方(別窓で開きます)画像なので指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 プッチンを押すとプリンが落ちてきますPCで見てください。(別窓で開きます)
ぷるぷるシェーダーの作り方を見て、プリンの揺れを少し変えたのと、サクランボを１つ追加、スプーンを追加してみました。スプーンはジオメトリで作ったのですが、簡単な形でも大変だった。
応用の途中から
webpackとTypeScriptを使用してるものが出てきたので、構築とTypeScriptとGLSLの本を買ったので、勉強しました。
three.js応用 2
内積のパーティクルと外積のコースとトロッコをあわせて変えてみたもの
画像なので指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 (別窓で開きます)
スマホで見る場合は横向きにするとコースが全部はいると思います。
three.js応用 1
数値計算の緯度経度高度から地球上に点を打つのものを利用したもの
画像なので指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 (別窓で開きます)
緯度と経度の数値をいれてみました。
three.js中級 3
points_position.htmlの配置する個数と頂点の初期座標、パーティクルの速度を変えてみたものです。
画像なので指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 (別窓で開きます)
three.js中級 2
オブジェクトの交差を調べるraycast.htmlを利用して丸とドーナツ型の2種類で作成してみたもの。
画像なので指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 (別窓で開きます)
meshListの配列に丸100個とドーナツ100個いれて作りました。
three.js中級 1
three.js基本のものを画面サイズの拡大縮小に合わせて3Dオブジェクトも拡大縮小するものを追加しました。
画面サイズの拡大縮小はPCからしかできないかな。WindowsのEdgeとChromeとFirefoxは確認済み。スマホはブラウザの画面サイズ変えられないよね。
サンプルソースコードのloader_gltf.htmlを基本にしてrenderer_resize.htmlの一部を追加して作成しました。
画像なので指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 (別窓で開きます)
three.js基本 1のはウィンドウを小さくすると、そのままウィンドウサイズが小さくなるだけですが、three.js中級 1のは画面に合わせて果物の入ったバスケットも拡大縮小します。
three.js基本 1
基本が終わり、作成しました。Blender始めたばかりのころに作った果物の入ったバスケットでglb形式を使用したものです。下線のある（別窓で開きます）を開いたものは指かマウスで動かしたりズームなどができます。 (別窓で開きます)
モデルデータの読み込みでのサンプルソースコードのloader_gltf.htmlを利用したものです。
サイズが大きすぎたので、画面に入るように、model.scale.setを小さくしました。
-
※ 一部コード
// 読み込み後に3D空間に追加
const model = gltf.scene;
scene.add(model);
model.scale.set(2, 2, 2);
three.js入門 2
画像なので、回ってる様子や指やクリックして動かしたりズームする場合は下線のある（別窓で開きます）で開いたものでためしてください。 (別窓で開きます)
geometry_general.htmlにorbitControlsを追加してみたものです。
three.js入門 1
入門の所が終わったので、自分で作成してみました。画像にあるとおり、ドーナツ型の中に三角錐をいれたものです。下線のある（別窓で開きます）を開いたものは指かマウスで動かしたりズームなどができます。
(別窓で開きます)カメラの制御方法（OrbitControls）のサンプルソースコードのcamera_orbitcontrols_basic.htmlを利用したもので 四角をドーナツ型に変えたのと、三角錐を追加してみました。
- ※ 一部コード
// 形状とマテリアルからメッシュを作成します
const mesh = new THREE.Mesh(new THREE.TorusGeometry(300, 90, 48, 100), new THREE.MeshNormalMaterial());
const mesh1 = new THREE.Mesh(new THREE.TetrahedronGeometry(100, 0), new THREE.MeshNormalMaterial());
scene.add(mesh, mesh1);
