結論 ことの発端 Expoの調査 Expoの導入 ❶ アカウントの作成 ❷ アプリの準備 ❸ expo-cliの導入 ❹ expo-cliにログイン プッシュ通知を受信するアプリの作成 ❶ プロジェクトの作成 ❷ expo-notificationsの導入 ❸ app.jsonを編集 ❹ コードを書く App.tsx プッシ…
Cannon.js + Three.js + React.jsで、 マウス座標に応じて床を傾ける 四方を見えない壁で囲う という空間を作って、そのな簡易3Dの球を配置してみました。 DEMO kimizuka.org ソースコード(抜粋) function handleMouseMove(evt) { const deg = 12; const x…
Three.js(r127)で開発していたサイトで、Three.jsのバージョンをr136まで上げてみたところ、glTFファイルの色味が若干薄暗くなりました。 r127 r136 直感的に、 renderer.outputEncoding = THREE.GammaEncoding; の部分が効いていないのだと思い、調査して…
前回は、worldにaddBodyしたCannon.BodyとaddBodyしていないCannon.Bodyに対してPointToPointConstraintを使いました。blog.kimizuka.org今回はPointToPointConstraintの引数に、worldにaddBodyしたCannon.Bodyを2つ渡してみます。 結論としては同じ座標(中…
前回、Cannon.jsを使ってオブジェクトをマウスで掴んで放り投げるモック をつくりました。blog.kimizuka.orgつくりました。が。いきなり盛り盛りすぎたので、要素を分解して検証していきたいと思います。今回は、ものすごくシンプルに、マウスダウン 自分の…
Cannon.js + Three.jsを使って、マウスでオブジェクトを掴めるようにしてみました。 物理演算をしているので放り投げることもできます。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算…
Cannon.js + Three.jsでオブジェクトの位置を物理演算で算出してみました。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算する ❸ 毎フレーム、Three.jsのオブジェクトの位置と姿勢をCa…
AR.js + Three.js + Next.js(React.js) でWebARコンテンツを作る際、AR.jsの読み込みをどうするのがスマートなのか、ずーっと悩んでいたのですが、とりあえずカスタムフックを作ってみました。 ソースコード useMakerAr.js import { useEffect, useState }…
特殊文字をアンエスケープしたいと思って、もろもろ調べました。Mozillaのサイトによると、 < < > > " " ' ' & &こちらの5文字が特殊文字として挙げられています。developer.mozilla.org最小の構成であれば、この5文字をreplaceす…
blog.kimizuka.orgかつて、 controllerModel.motionController.data にアクセスすることで強引に取得していた、トリガー、A、B、X、Yボタンの状態ですが、VRボタンを、Three.jsのVRButton.jsからImmersive Webのwebxr-button.jsへ切り替えたところ、スマート…
immersive-web.github.io ことの発端 普段はThree.jsでWebVRコンテンツをつくっているので、Three.jsのVRButton.jsを使っています。github.comしかし、以前、gamepadにアクセスしようとした際、sessionが隠蔽されており、外部からスマートにアクセスする方法…
github.comそもそも、GraphiQL側の問題のようなのですが、Shopify GraphiQL Appにエラーとなるようなクエリを書き込んでしまうと、エラーで画面が表示されなくなります。それだけならまだしも、「前回のクエリをlocalStorageに保持して初期値に使う」という…
iOS15.3.1に収録された全絵文字をJavaScriptの配列に収納しようしたのですが、一部スプレッド構文での分割がうまくいかない絵文字がありました。例えば、️という絵文字。 [...'️']; // => ['', '', '', '️']と言う感じで、 と に分かれてしまいます。そ…
linear-gradientとbackground-sizeをうまく使うと、背景に繰り返しで線を引くことができます。 DEMO CSS div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, red 1px, transparent 1px); background-size:…
過去にも商品一覧やブログ記事一覧を取得したことがあったのですが、GraphQLの書き方を調べながらいろんなものを取得してみたので書き方をメモしておきます。blog.kimizuka.org blog.kimizuka.org 商品一覧取得の書き方例 { products(first: 10) { edges { n…