みかづきブログ・カスタム

基本的にはちょちょいのほいです。

2つの3Dオブジェクトを衝突させる(Cannon.js + Three.js + React.js) 💥

前回は、worldにaddBodyしたCannon.BodyとaddBodyしていないCannon.Bodyに対してPointToPointConstraintを使いました。blog.kimizuka.org今回はPointToPointConstraintの引数に、worldにaddBodyしたCannon.Bodyを2つ渡してみます。 結論としては同じ座標(中…

3Dオブジェクトに上向きの力を掛ける(Cannon.js + Three.js + React.js) 🐭

前回、Cannon.jsを使ってオブジェクトをマウスで掴んで放り投げるモック をつくりました。blog.kimizuka.orgつくりました。が。いきなり盛り盛りすぎたので、要素を分解して検証していきたいと思います。今回は、ものすごくシンプルに、マウスダウン 自分の…

マウスで3Dオブジェクトを掴んで放り投げる(Cannon.js + Three.js + React.js) 🐭

Cannon.js + Three.jsを使って、マウスでオブジェクトを掴めるようにしてみました。 物理演算をしているので放り投げることもできます。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算…

3Dオブジェクトの位置を物理演算で算出する(Cannon.js + Three.js + React.js) 📈

Cannon.js + Three.jsでオブジェクトの位置を物理演算で算出してみました。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算する ❸ 毎フレーム、Three.jsのオブジェクトの位置と姿勢をCa…

AR.js + Three.js + React.js でWebARコンテンツをつくるときのためのカスタムフックをつくる 🔨

AR.js + Three.js + Next.js(React.js) でWebARコンテンツを作る際、AR.jsの読み込みをどうするのがスマートなのか、ずーっと悩んでいたのですが、とりあえずカスタムフックを作ってみました。 ソースコード useMakerAr.js import { useEffect, useState }…

textareaを使ってHTMLの特殊文字をアンエスケープする 📝

Mozillaのサイトによると、 < &lt; > &gt; " &quot; ' &apos; & &amp;こちらの5文字が特殊文字として挙げられています。developer.mozilla.orgunescape-htmlというパッケージのソースを見ると、 'use strict' /** * un-escape special characters in th…

Three.jsでOculus Quest向けのWebVRコンテンツを作成し、Oculus Touchコントローラーの入力をスマートに取得する(トリガー、グリップ、スティック、A・B・X・Yボタン) 🎮

blog.kimizuka.orgかつて、 controllerModel.motionController.data にアクセスすることで強引に取得していた、トリガー、A、B、X、Yボタンの状態ですが、VRボタンを、Three.jsのVRButton.jsからImmersive Webのwebxr-button.jsへ切り替えたところ、スマート…

Three.js + Reactで作ったサイトにImmersive Webのwebxr-button.jsを設置する 🔘

immersive-web.github.io ことの発端 普段はThree.jsでWebVRコンテンツをつくっているので、Three.jsのVRButton.jsを使っています。github.comしかし、以前、gamepadにアクセスしようとした際、sessionが隠蔽されており、外部からスマートにアクセスする方法…

Shopify GraphiQL Appが表示されなくなった際の対策(Uncaught Error: Mode graphql failed to advance stream.) 🛒

github.comそもそも、GraphiQL側の問題のようなのですが、Shopify GraphiQL Appにエラーとなるようなクエリを書き込んでしまうと、エラーで画面が表示されなくなります。それだけならまだしも、「前回のクエリをlocalStorageに保持して初期値に使う」という…

iOS15.3.1に搭載されている文字列でJavaScriptのスプレッド構文に耐えうるものを抽出する 😀

iOS15.3.1に収録された全絵文字をJavaScriptの配列に収納しようしたのですが、一部スプレッド構文での分割がうまくいかない絵文字がありました。例えば、‍️という絵文字。 [...'‍️']; // => ['', '‍', '', '️']と言う感じで、 と に分かれてしまいます。そ…

CSSで方眼紙のような線を引く 📄

CSS

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…

Shopify GraphQL Storefront APIで商品・記事・メタフィールドを取得する書き方の例 📝

過去にも商品一覧やブログ記事一覧を取得したことがあったのですが、GraphQLの書き方を調べながらいろんなものを取得してみたので書き方をメモしておきます。blog.kimizuka.org blog.kimizuka.org 商品一覧取得の書き方例 { products(first: 10) { edges { n…

Drag and Drop APIを試す 🖱

Drag and Drop APIを検証しました。developer.mozilla.org 実装手順 最小構成だと、 ドラッグ可能にしたい要素のdraggableをtrueに設定する ドロップ可能にしたい要素にdragoverイベント、dropイベントを設定する dragoverイベント、dropイベントに設定した…

CSSのmix-blend-modeを試す(トランジションとの併用を検証) 🎨

CSS

最近、CSSのmix-blend-modeを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる値を確認しました。developer.mozilla.org 基本的な使い方 mix-blend-modeを指定すると、重なっていている要素の色を合成し…

CSSフィルターを試す(記述順・トランジションとの併用を検証) 🎨

CSS

最近、CSSのfilterを使って、HTMLの色を動的に変更しようと試みることがありまして、デモページを作って、改めて使用できる関数を確認しました。※ SVGフィルターは試してません ※ 上限はある程度適当に決めていますdeveloper.mozilla.org DEMO 記述順 今回は…

Electronで外部ディスプレイ(拡張)を使ったアプリケーションを作る際は、screen.getAllDisplaysで返ってくる配列を座標でソートしてから使うのがおすすめ 🖥

screen.getAllDisplaysを使えば、利用可能なディスプレイを配列で取得することができます。www.electronjs.org const displays = screen.getAllDisplays(); // ディスプレイの配列を取得 この際、配列の順序がよくわからない(認識された順?)ので、僕は座…

ReactのuseStateで管理されている配列内のオブジェクトを更新する 🍛

文章での表現がすごく難しいのですが、 const [list, setList] = useState([{ color: 'red', text: 'Ya-Ha-!' },{ color: 'blue', text: 'Yo-Ho-!' },{ color: 'yellow', text: 'Ya-Ha-!' },{ color: 'green', text: 'Yo-Ho-!' }]); と、いう感じでuseState…

Reactでテキストエリアに行数制限を実装を試みる 📝

テキストエリアに行数制限を作りたくてもろもろ検討しました。 日本語だけの対応でOKであれば、当幅フォントを使って行も列も制限を掛けるのが良いと思いました。 DEMO フォントサイズを10pxに設定 リサイズを不可に設定 大きさを20文字×10行に合わせる 最大…

Apollo Clientを使ってShopifyのブログ記事一覧を取得しNext.jsで表示する(GraphQL編) 📝

先日、自前でAPIを用意してShopifyのブログ記事一覧を取得しましたが、前回、商品一覧を取得する際にGraphQLの使いかたを学んだので、GraphQLで書き換えてみます。blog.kimizuka.org blog.kimizuka.org 手順 プライベートアプリを用意して、ストアフロントAP…

Apollo Clientを使ってShopifyの商品一覧を取得しNext.jsで表示する(GraphQL編) 🎁

前回は、js-buy-sdk(shopify-buy)を使って商品一覧を取得しましたが、今回はGraphQLで取得します。 方法はいろいろあるのですが、GraphQLを扱いやすくするためにApollo Clientを使って実装しました。blog.kimizuka.org個人的には結果が同じであれば使い慣…

js-buy-sdk(shopify-buy)を使ってShopifyの商品一覧を取得しNext.jsで表示する(REST API編) 🎁

手順 プライベートアプリを用意して、ストアフロントAPIのアクセストークンを取得する help.shopify.comこちらの手順に従って、 プライベートアプリを用意する ストアフロントAPIを有効にする 商品、バリエーション、コレクションを読み込むの権限を付与する…

@shopify/shopify-api(shopify-node-api)を使わずにShopifyのブログ記事一覧をNext.jsでつくったAPIで強引に取得する 📝

なにか根本的なところを間違えている気がしてならないのですが、強引な手法でShopifyのブログ記事一覧を取得できたのでメモを残しておきます。 結論 src/pages/api/getArticles.js import axios from 'axios'; export default async function getArticleList…

microCMSのSDK + Next.jsでコンテンツを取得する際にクエリを渡して取得件数を調整したりフィルターをかけたりする 📝

かつては自前でmicroCMSとNext.jsを組み合わせていましたが、SDKができたとのことだったので、つかってみました。Nuxt.js用のSDK、GatsbyJS用のSDKとフレームワーク専用で用意されているものもありますが、Next.jsは専用のものが無いので、Javascript(Node.…

Three.jsでVRコントローラーとオブジェクトとの接触を判定する 🕶

DEMO Oculus Quest用 DEMO 👉 https://kimizuka.org/mock/r127/vr-collision Oculus Rift用 DEMO 👉 https://kimizuka.org/mock/r111/vr-collision※ r111はコントローラーの位置にCubeが表示されます 解説 こちらの記事で作ったコードを改造して、VRコントローラ…

Three.jsでオブジェクト同士の接触を判定する 📦

DEMO https://kimizuka.org/mock/collision画面をクリックすると、オブジェクトが近づいて行って接触すると「HIT!」と表示されます。 実装方針 色々方法はあると思うのですが、今回は Sphere.intersectsSphere を使って球体と交差している球体があるかを判定…

Three.jsでつくったWebVRをOculus Riftに対応させたいのであればr111を使うべし 🕶

結論 DEMO ことの発端 ソースコードの確認 WebVR API と WebXR Device API WebVR APIに対応しているThree.jsのバージョンを探す r111 r127 結論 Three.js(r111)を使いましょう。github.comただし、r111には XRControllerModelFactory.js が無いのでコントロ…

Three.jsでクリックされたオブジェクトを判定する 🖱

DEMO https://kimizuka.org/mock/click Three.jsでオブジェクトがクリックされたことを判定したいなと思い、いろいろ調べてみたのですが、公式ドキュメントに紹介されているやり方で問題なく対応できました。threejs.org ソースコード抜粋 window.addEventLi…

Three.jsで表示したMeshにログを表示する 📈

Three.jsでVRコンテンツを作る際、console.logで出力した値を確認するのが面倒なので、かつて作成した動的にテキストを出力できるテクスチャを切り出して、ログの出力に特化させたものをつくりました。blog.kimizuka.orgこちらの記事内に出てくるDEMOでもち…

Three.js(r127) + TypeScriptでの開発で「Property 'updateProjectionMatrix' does not exist on type 'PerspectiveCamera'.ts(2339)」を解決する 📦

ことの発端 TypeScript + Three.js(r127)での開発で、 const camera = new THREE.PerspectiveCamera(); camera.updateProjectionMatrix(); というコードを書いたところ、 Property 'updateProjectionMatrix' does not exist on type 'PerspectiveCamera'.t…

Macのメニューバーに常にローカルIPを表示するelectronアプリをつくる 💻

ローカルにウェブサーバを立てて、別のデバイスからアクセスする際、ローカルIPを調べるのが面倒なので、常時表示されておきたくなります。 そんなとき、これまでは IP in menubar というアプリを使って、MacのメニューバーにIPアドレスを表示していたのです…