kimizuka https://blog.hatena.ne.jp/kimizuka/ みかづきブログ・カスタム https://blog.kimizuka.org/ Cannon.js Three.js React Cannon.js + Three.jsを使って、マウスでオブジェクトを掴めるようにしてみました。 物理演算をしているので放り投げることもできます。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算する ❸ 毎フレーム、Three.jsのオブジェクトの位置と姿勢をCannon.jsの位置と姿勢に合わせるに加え、❹ マウスダウン時にマウスと交差しているオブジェクトを探し、交差点を割り出す ❺ 交差点とオブジェクトの中心座標分でベクトルをつくる ❻ ❺のベクトルを逆向きにしてpivotを設定 ❼ マウスのオブ… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.kimizuka.org%2Fentry%2F2022%2F03%2F04%2F225625" title="マウスで3Dオブジェクトを掴んで放り投げる（Cannon.js + Three.js + React.js） 🐭 - みかづきブログ・カスタム" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/k/kimizuka/20220304/20220304223001.gif Hatena Blog https://hatena.blog 2022-03-04 22:56:25 rich https://blog.kimizuka.org/entry/2022/03/04/225625 1.0 100%