Three.js Advent Calendar 2019まとめ

Three.js Advent Calendar 2019をスレ立てしたあんどうです。

最大10日くらいは一人でもなんとかするつもりでしたが、月初にはまだ3-4日しか埋まっておらず、これは流石に駄目かも分からんなぁと思っていたThree.js Advent Calendar 2019ですが、おかげさまで（ほぼ）完走できました。記事を書いてくださった皆さんどうもありがとうございました。

せっかく24-1本も新たにThree.jsに関係する記事が増えたので、見落とすことがないよう、ここですべての記事を簡単に紹介しておきます。

1日 WebXR AR Paint その１ (technohippy)

Three.js r111で追加されたARで空間上に線を描く新しいサンプル「WebXR AR Paint」の紹介です。その１はサンプルを試して見る方法について。4日のその２に続きます。

2日 3Dモデルの頂点座標にオブジェクトを配置するときは重複に注意しよう (sakusan393)

タイトルのとおりですが、複数の頂点座標が重複している3Dモデルもあり得るので、気をつけましょう。困ったときにはBufferGeometryUtils.mergeVerticesを使いましょう、というチップスの紹介です。

3日 Three.jsのためのBlender入門 (ukonpower)

3DモデリングツールのBlenderの基本的な操作方法と、Blenderで作成したモデルをglTFで書き出してThree.jsで表示する手順の紹介です。

4日 WebXR AR Paint その２ (technohippy)

WebXR AR Paintの実装の説明です。Mr.doobがなんか修正したそうなので更新が必要です。いずれにしてもここの情報だけだとARアプリを作る役に立たなそうだったので9日に続きます。

5日 three.jsのcustomDepthMaterialを使ってみる (aa_debdeb)

頂点位置をシェーダーで変更した物体の影を正しく計算するには`customDepthMaterial`を設定する必要がある、という話です。学びがあります。

6日 THREE.IKでIK入門してみた (naotaro0123)

IKはInverse Kinematicsの略で、例えば足先の位置を指定することで、膝関節や股関節の位置や角度もいい感じに設定することができます。Three.jsでこのIKを利用するTHREE.IKの紹介です。

7日 three.js / editor (f-a24)

実はThree.jsにはやたらと気合の入ったオンラインエディタが付属しています。そのエディタの基本的な使い方の紹介です。

8日 2019年の3D物理演算ライブラリ状況 (naotaro0123)

物理エンジンは重力や衝突などの物理的な現象をシミュレーションしてくれるライブラリです。Three.jsと組み合わせて利用できる物理エンジンの紹介です。

9日 最小構成のWebXR AR (technohippy)

WebXR AR PaintのコードからARアプリを作成するために必要な最低限の部分だけを取り出したアプリの紹介です。Three.jsを使用してARアプリを作る際の参考にしてください。

10日 three.jsで一筆書きのlineを作る (yukidoke)

3D空間上に少しずつ線が描かれていくアプリの紹介です。

11日 Amazon Sumerianの紹介 (idacchi)

ARやVRアプリをブラウザ上でGUIを使用して簡単に作成できるAmazon Sumerianの紹介です。

12日 ほぼ実録 three.js 案件とピュア WebGL 案件 2019 年版 (doxas)

doxasさんの2019年に関わったプロジェクトまとめです。Three.jsやWebGLを業務でいろいろ利用できてうらやましいです。

13日 WebAR Tokyo 01に参加してきた (naotaro0123)

WebARのコミュニティ「WebAR Tokyo」の初回イベントレポートです。会場の雰囲気や各セッションの紹介があります。

14日 2019年のWebGLデバッグツール状況 (naotaro0123)

タイトルのとおりですが、WebGLのデバッグに利用できるさまざまなツールの特徴と開発状況の紹介です。

15日 Three.js　AR　女の子　出す　方法 (FMS_Cat)

WebXR AR ModuleとWebXR Plane Detectionを利用して、AR空間上にVRMフォーマットの女の子を表示する方法です。

16日 three.js with Nuxt.js (misaki_mofu)

Nuxt内でThree.jsを使用する際のコツを紹介してくれています。サンプルがかっこいいです。

17日 React-three-fiber + TypeScript で苦労したこと (Quarter-lab)

React-three-fiber + TypeScriptでOrbitControlsを使用する方法の紹介です。

18日 Three.jsに入門＋手を検出してAR.jsと組み合わせてみた (s-haya-123)

Three.jsとAR.jsとHandtrack.jsを利用して、ジェスチャーでARマーカー上に炎のような効果を表示するアプリの紹介です。

19日 three.js with React (taptappun)

React内でthree.jsを使う方法の紹介です。

20日 Three.jsを用いたモデルのアニメーション切り替えを簡単にした話 (sawa-zen)

Three.jsのAnimationMixerが使いにくいので、より簡潔にアニメーションを切り替えることができるライブラリを作成したそうです。

21日 THREE.LatheBufferGeometryでグニュグニュ動く回転体を作ろう (Kkod)

LatheBufferGeometryで作成した回転体の断面を時間変化させてグニュグニュ動かします。環境マップを追加したサンプルの動きが楽しい。

22日 Three.jsとIndexedDBでMMDモデルビューアーを作った (one-color-low)

MMDLoaderを改造してArrayBufferを直接読み込めるようにし、IndexedDBに保存したMMDモデルを表示できるようにしたそうです。MMDLoaderの改造は普通にpullreqすると喜ばれるんじゃないでしょうか。

23日 threeでshadertoy (ohisama@github)

RawShaderMaterialを使用してthree.jsでshadertoyのスクリプトを動かしたそうです。

24日 Dispose three.js objects with Nuxt (uto-usui)

Nuxt内でThree.jsを使用したときに、メモリリークしないように適切にdisposeする方法の紹介です。

25日 Three.js Advent Calendar 2019まとめ (technohippy)

これ

皆さんいろいろと新しい情報を紹介してくださいましたが、月末ということでさっそく先日Three.jsのr112が出たようです。俺たちのThree.js（のChange Log確認）はこれからだ！

それでは皆さん良いお年を。