Three.js
DEMO https://kimizuka.org/mock/collision画面をクリックすると、オブジェクトが近づいて行って接触すると「HIT!」と表示されます。 実装方針 色々方法はあると思うのですが、今回は Sphere.intersectsSphere を使って球体と交差している球体があるかを判定…
結論 DEMO ことの発端 ソースコードの確認 WebVR API と WebXR Device API WebVR APIに対応しているThree.jsのバージョンを探す r111 r127 結論 Three.js(r111)を使いましょう。github.comただし、r111には XRControllerModelFactory.js が無いのでコントロ…
DEMO https://kimizuka.org/mock/click Three.jsでオブジェクトがクリックされたことを判定したいなと思い、いろいろ調べてみたのですが、公式ドキュメントに紹介されているやり方で問題なく対応できました。threejs.org ソースコード抜粋 window.addEventLi…
Three.jsでVRコンテンツを作る際、console.logで出力した値を確認するのが面倒なので、かつて作成した動的にテキストを出力できるテクスチャを切り出して、ログの出力に特化させたものをつくりました。blog.kimizuka.orgこちらの記事内に出てくるDEMOでもち…
ことの発端 TypeScript + Three.js（r127）での開発で、 const camera = new THREE.PerspectiveCamera(); camera.updateProjectionMatrix(); というコードを書いたところ、 Property 'updateProjectionMatrix' does not exist on type 'PerspectiveCamera'.t…
追記 ことの発端 結論 DEMO ソースコード 経緯 追記 両手のコントローラーに対応しました！https://kimizuka.org/mock/r127/vr-controller ことの発端 examplesを見ながらWebVRコンテンツをつくっていたのですが、コントローラーの「トリガー」「グリップ」…
先日、AR.js + Three.js + Next.jsでスマートフォン向けのウェブARをつくりました。3Dオブジェクトをブラウザ上に、3Dオブジェクトの影を現実空間に表示する、ウェブAR + プロジェクションマッピングを作りました。名付けて「影絵R（カゲエーアール）」です…
Three.jsに3Dモデルを読み込んだとき、時々、環境光源（AmbientLight）が当たらないモデル（平行光源・DirectionalLightや点光源・PointLightなど他のライトは当たる）がありまして、しょうがないので他のライトで照らしていたのですが、やっぱり気になるの…
こんな需要があるかはわかりませんが、前々回と前回の記事を併せれば実現できます。blog.kimizuka.org blog.kimizuka.orgつまり、透明なオブジェクトに対してcastShadowを有効にしてあげれば影だけが投影されるのです。 透明なのに影が映るのはおかしい気も…
Three.jsでライト（AmbientLight以外）を使うと、凹凸のあるオブジェクトには影が表示されます。 が。他のオブジェクトに対しては影が落ちません。他のオブジェクトに影を落とすためには、いろいろ設定が必要だったのでまとめておきます。 WebGLRenderer.sha…
マテリアルの変更は以前調べた し、なんならその時も半透明にしたから大丈夫でしょう。blog.kimizuka.orgと思って、取り組んだのですが、ハマったのでメモを残しておきます。まず、glbファイルを読み込みます。前回の記事を参考にmaterialを透明にします。 …
久しぶりにWebARを実装する機会があり、自分の記事を読み返していたのですが、いつの間にか動かなくなっていました。。blog.kimizuka.org「何もしてないのに壊れた！」と思ったりしましたが、検証してみた結果、 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/master/three.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js">
threejs.org最近、ドキュメント に、 シーンからメッシュを削除すると、そのジオメトリとマテリアルも破棄されますか？ いいえ、dispose()を使用してジオメトリとマテリアルを明示的に破棄する必要があります。ジオメトリとマテリアルはメッシュなどの3Dオブ…
GLTFLoaderでモデルを読み込む際、配列でURLを渡せると非常に楽だなと思い、つくってみました。 JavaScript async function loadGltfFromUrls(urls) { if (!urls.length) { return []; } const loader = new GLTFLoader(); const list = []; urls.forEach((u…
こちらの記事で、Blenderで作ったglbファイルを読み込んで表示しました。blog.kimizuka.org読み込んだモデルを一度しか使わないのであれば、これで問題ないのですが、同じモデルを何個も配置するときはどうしたものかと考えた結果、cloneをつかって複製する…
これまでWebARの実装には、A-Frame + AR.jsを使ってきましたが、細かい調整が必要になってきたのでThree.js + AR.jsで実装してみようと思います。aframe.iothreejs.orgA-Frameも内部ではThree.jsを使っているので、ライブラリをひとつ減らすイメージです。AR…
Three.jsがレンダリングしているCanvasは、デフォルトでpreserveDrawingBufferがfalseになっているため、普通にdrawImageで他のCanvasにレンダリングしようとしたり、toDataURLを使ってbase64化したりしようと真っ黒になります。developer.mozilla.orgthreej…
以前Three.js上で作ったこちらのモデルをBlenderでモデリングして3Dプリンタでプリントしてみました。 See the Pen CubeMan by kimmy (@kimmy) on CodePen. Blender 2.8でモデリング 設定の変更 まずは、単位をmmにするために、LengthをMillimetersに、Unit …
Three.jsでレンダリングした3Dモデルを、セガサターンのような見た目にしたいなと思い、ポストプロセスやシェーダーを書いていたんですが、CSSにimage-renderingたるものがあることを知り、早速試してみました。 developer.mozilla.org 使い方はものすごく簡…
以前、Blenderで作ったモデルをThree.jsで読み込んでOculus QuestのブラウザのVRモードで鑑賞するという検証をした際に、Blenderからglbファイルを書き出して、Three.jsに読みました。blog.kimizuka.org今回は、Three.js側で読み込んだglbファイルのマテリア…
https://blog.kimizuka.org/entry/2020/11/05/145418blog.kimizuka.orgこちらの記事 の応用版です。 1フレームずつポーズを作りアニメーションさせてみました。作り始めた時は、1フレームあたり10x10x10の1000個のcubeで想定していましたが、途中でどうして…
はじめに 己のスキル 己のスキルで実行可能な作戦を考える ドット絵の三面図の大きさを決める ドット絵で三面図を描いて輪切りにする 輪切りの情報を配列にする 弓 Aポーズ 配列をThree.jsでレンダリングする 弓 Aポーズ はじめに ちょっと前からVRのゲーム…
以前、VRモードに対応する形で作ったので、そのままVRモードでつくりますが、VRモードじゃなくても要点は変わりません。❶ Canvasを作る ❷ TextureにCanvasを設定する ❸ MaterialにTextureを設定する ❹ MeshにMaterialと適当なGeometryを設定する ❺ Meshのmat…
BlenderでつくったモデルをVR上で確認したく、Three.jsをつかってWebVRコンテンツをつくってみました。 そこまでの手順を簡単にまとめておきます。 Blenderの基本操作を覚える 簡単なモデリングをする .glbファイルで書き出す Three.jsで読み込む ❶ Three.js…
ひょんなことからGETパラメータを基にキューブを生成してくれるサイトをつくってみました。develop.kimizuka.org 使い方 ❶ https://develop.kimizuka.org/cube/?1,1,1,1,1,1,1,1という形でGETパラメータにカンマ区切りで1を渡すと、1x1のcubeを8個並べてcube…
