LoginSignup
3
1

More than 3 years have passed since last update.

@Yamkaz(やまかず)

【Three.js】3Dオブジェクトのマウスオーバーを判定。

Last updated at Posted at 2020-12-20

text7.gif

マウスオーバーした3Dオブジェクトを回転させる

現時点で最新版のThree.js（r123）を使っています。
Three.jsと、以下のcodepenのjsコードさえあれば簡単に実装できます。

コード内に解説は詳しく書いたので、読んで、いじったりしてみてください。

See the Pen ThreeJS: Box Geometry + MouseHover by やまかず / Kazuyuki Yamamoto (@yamkaz) on CodePen.

情報源:
Three.jsのRaycasterを使って、画面内のオブジェクトを得る
Raycaster – three.js docs
WebGL開発に役立つベクトルの足し算・引き算 （Three.js編）
【Unity】RayCastを使いこなせ!判定や表示に使ってみよう

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1