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

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

React

Next.jsを使って、スマートフォン用のPull to Reflash(引っ張って更新)を実装する 📱

Next.jsを使って、スマートフォン用のPull to Reflash(引っ張って更新)を実装しました。 DEMO https://next-pull-to-refresh.vercel.app/※ スマートフォン限定です ソースコード PullToRefreshView.tsx 'use client'; import styled, { keyframes } from '…

Three.jsでグリッチエフェクトを使う 📺

以前、 Three.js で EffectComposer の UnrealBloomPass を試しました。blog.kimizuka.org今回は、EffectComposer の GlitchPass を試してみました。 DEMO https://kimizuka-org-git-r154-kimizuka.vercel.app/glitch-passグリッチが掛かります。 ソースコー…

Three.jsでオブジェクトを発光させる ✨

先日、 Blenderでオブジェクトを発光させました が、今回はThree.jsでオブジェクトを発光させる手順のメモです。 Three.jsとNext.jsを使っていますが、本質的な部分としては Three.jsのEffectComposer と postprocessing unreal bloom を使って実装します。t…

Next.jsで慣性スクロールを実装する 🌏

かつて、 ブラウザの標準のページスクロールをループさせたこと がありました。blog.kimizuka.orgしかし、こちらの DEMO は、PCでみるとそれなりにいい感じに動作するのですが、iOSのSafariでみるとループの瞬間にカクついてしまいます。今回はカクつかない…

Reactでスロットのリールのようなカウンターを実装する 🎰

くるくる回るように数字が変化するカウンターを作りました。 styled-components、lodash、gsapに依存しています。 lodashはreverseしか使っていないので、reverseを自作して外すこともできたのですが、面倒なので使っちゃいました。 gsapに関しても、CSSアニ…

Reactで要素をダブルクリックした際のコールバックイベントを設定する 🖱️

いちかばちか、onDoubleClickでコールバックを設定してみたら動きました。 びっくりして、筆を取っています。よくみたら、 ドキュメント にも記載がありましたが、全然知りませんでした。ja.legacy.reactjs.org ソースコード(抜粋) <div onDoubleClick={ () => console.log('DoubleCl</div>…

Reactを使ったWebサイトで右クリックした際にメニューを表示させないようにする 🖱

右クリックした際の挙動は、 onContextMenu を使って制御できます。 なので、 Event.preventDefault を使って、既定のアクションが発生しないようにできます。developer.mozilla.org developer.mozilla.org ソースコード(抜粋) import { MouseEvent } from…

画面幅375pxを下回る環境で観覧した際はviewportをwidth=375に書き換えるスクリプトをカスタムフックにする 📱

かつて制作した、 画面幅375pxを下回る環境で観覧した際はviewportをwidth=375に書き換えるスクリプト ですが、React用にカスタムフックにしました。blog.kimizuka.orguseResizeに関しても、かつて作成した useResize を流用しています。 ソースコード useVi…

GSAPをつかってuseRefの値をアニメーションさせる 🎥

Next.jsでDOMをアニメーションさせようと思った際、いつもはトゥイーンを自作していたのですが、いい感じのライブラリがあれば使いたいなと常々思っていました。 そこで、今回はReact + GSAPでDOMのアニメーションを試みてみようと思います。greensock.com …

Three.jsでカメラをスムーズに移動する 🎥

DEMO kimizuka.org左上のボタンを押すとカメラの位置がスムーズに移動します。 今回の例だとcubeのscaleを変えるのと見栄えは変わらないですが、しっかりとカメラを動かしています。 ソースコード(抜粋) const maxRange = 16; const minRange = 2; export …

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

React + Three.jsでウェブサイトを作る際、こんな感じのカスタムフックを使って、WebGLRenderer、PerspectiveCamera、Sceneを取得しています。 useThree.tsx import { useEffect, useState } from 'react'; import * as THREE from '~/build/three.module'; …

Reactで等速で往復運動するコンポーネントをつくる 👾

単純な往復運動であればsin関数を使って実装しますが、これだと等速にはなりません。 いや、数学の得意な人であれば、どうにかして等速にできるのかもしれないですが、今回は単純に区間を区切った式で等速往復を実装します。 DEMO ※ クリックすると動き出し…

scroll-snapを使ってカルーセルをつくる 🖱

CSSのscroll-snapをつかってカルーセルをつくってみました。developer.mozilla.org ループ無し DEMO ソースコード(抜粋) JavaScript const { useEffect, useRef, useState } = React; function App() { const [ list ] = useState([1, 2, 3]); const width…

Reactでテキスト量に応じて高さを自動で調整するtextareaを作る 📝

結論 自作編 基本的な方針 JavaScript(抜粋) DEMO 応用的な方針 JavaScript(抜粋) DEMO 他人のふんどし編 結論 react-textarea-autosize に任せる。github.com 自作編 基本的な方針 textareaのvalueの変更を検知する textareaのheightをautoにする texta…

床を傾けて3Dのボールを転がす(Cannon.js + Three.js + React.js) 🏐

Cannon.js + Three.js + React.jsで、 マウス座標に応じて床を傾ける 四方を見えない壁で囲う という空間を作って、そのな簡易3Dの球を配置してみました。 DEMO kimizuka.org ソースコード(抜粋) function handleMouseMove(evt) { const deg = 12; const x…

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 }…

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.jsで作ったサイトにImmersive Webのwebxr-button.jsを設置する 🔘

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

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行に合わせる 最大…

styled-componentsでリキッドレイアウトを再現するために画面幅に合わせたサイズを計算する関数をつくる 📱

ことの発端 以前、vwを使って画面幅に合わせたサイズ調整を行うモックをつくりましたが、今回はそれを簡単に設定できるユーティリティ関数を作ろうと思いました。 ひとつひとつを手書きで書いていくのは非常に骨が折れるからです。blog.kimizuka.org 方針と…

ページのスクロールとリサイズを管理するシンプルなカスタムフックをつくってページのスクロール量を割合で管理する 🖱

以前シンプルに作り直したカスタムフック をほんのり複雑に作り直しました。 具体的には以前のものはウィンドウのスクロール量を測定することに特化していたのですが、引数で測定対象を渡せるように修正した次第です。blog.kimizuka.org useScroll.tsx impor…

React.Fragmentを使って要素を複数返すループを実現する ✏️

めずらしいケースだと思いますが、 <ul> {list.map((item, i) => { return ( <li>{ item.title }</li> <li>{ item.text }</li> ); })} </ul> というような感じで、要素を複数返したいケースに出くわしました。 <ul> {list.map((item, i) => { return ( <> <li>{ item.title }</li> <li>{ item.text }</li> ); </ul>…

Reactでchildrenにpropsを渡す 👨‍👩‍👧

基本的には、React.cloneElementを使い、propsを固定した状態のcomponentを作るのがセオリーのようです。ja.reactjs.orgイメージ的には、Function.prototype.bindを使って引数を固定した関数を作るのに似ている気がしました。developer.mozilla.org実際に例…

forwardRefを使って子コンポーネントにrefを渡す 👦

forwardRefは、以前、子コンポーネントのメソッドを叩こうとしたときに使ったことがあるのですが、今回は単純にrefを渡すだけの記事です。blog.kimizuka.orgただ、公式ドキュメントにもわかりやすい記事があるので、そちらを見た方が早いかもしれないです。j…

ループで生成した要素にuseRefを使う 🔁

creareRefを使ってrefを要素分つくるのが良いみたいです。 import { createRef, useRef } from 'react'; const list = ['', '', '']; export default function Indexpage() { const listRefs = useRef([]); list.forEach((_, i) => { listRefs.current[i] = …