ホーム > ブログ > プログラミングTips > threejsマウスオーバーでアニメーション

threejsマウスオーバーでアニメーション

2016.04.25

こんちゃ、銀ねこです。

またまたthreejsについて勉強したのでメモします。

マウスオーバーで動くサンプルをわかりやすく改造してみました

今回はマウスオーバーでオブジェクトがアニメーションするのをやってみたかったのでライブラリーからそれっぽいもののソースを取ってきてソースを単純に改造してみました。

exporter_obj

スクリーンショット 2016-04-24 14.01.20.png

画面サイズが変わっても自動でサイズを合わせる処理をする

画面をリサイズしても、カメラの位置などが変わらないようにします。
camera.aspectでカメラの位置の縦横比をセット。
この場合windowの縦横サイズをそれぞれを取得して比率を決めています。

updateProjectMatrix()でカメラの内部状態を更新します。
この関数は後ほどaddEventListenerで読み込みますが、とりあえず解説だけ。

  1. function onWindowResize() {
  2. camera.aspect = window.innerWidth / window.innerHeight;
  3. camera.updateProjectionMatrix();
  4.  
  5. renderer.setSize( window.innerWidth, window.innerHeight );
  6.  
  7. }

マウス座標を利用

マウス座標を利用して、オブジェクトのカメラの位置を変更します。
その数値を生成します。

オブジェクトは画面中心に生成されるのでwindowHalf、XwindowHalfYで中心の数値をとり、マウスのx、y座標との差を取得します。

  1. function onDocumentMouseMove( e ) {
  2.  
  3. var windowHalfX = window.innerWidth / 2;
  4. var windowHalfY = window.innerHeight / 2;
  5. mouseX = ( e.clientX - windowHalfX ) ;
  6. mouseY = ( e.clientY - windowHalfY ) ;
  7.  
  8. }

カメラポジションをセットしアニメーションさせる

lookAt()でカメラをポジションをマウスオーバーのたびにアニメーションさせます。
ついでにライトの位置も修正します。

  1. function animate() {
  2.  
  3. requestAnimationFrame( animate );
  4.  
  5. camera.position.x += ( mouseX - camera.position.x ) ;
  6. camera.position.y += ( mouseY - camera.position.y ) ;
  7. camera.lookAt( scene.position );
  8.  
  9. light.position.set( camera.position.x, camera.position.y, camera.position.z ).normalize();
  10. renderer.render( scene, camera );
  11.  
  12. }

ソースコードをまとめると…

meshを生成して、render、camera、lightを生成してイベントを追加します。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <title>threejsの練習</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7.  
  8. </head>
  9. <body>
  10.  
  11. <script src="three.min.js"></script>
  12.  
  13. <script>
  14. var camera, scene, light, renderer, material, geometry;
  15. var mouseX = 0, mouseY = 0;
  16.  
  17. function init() {
  18.  
  19. //scene
  20. scene = new THREE.Scene();
  21.  
  22. //mesh
  23. material = new THREE.MeshLambertMaterial( { color : 0x2fa9b1 } );
  24. geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
  25. scene.add( new THREE.Mesh( geometry, material ) );
  26.  
  27. //render
  28. renderer = new THREE.WebGLRenderer();
  29. renderer.setPixelRatio( window.devicePixelRatio );
  30. renderer.setSize( window.innerWidth, window.innerHeight );
  31. renderer.setClearColor(0xffffff);
  32. document.body.appendChild( renderer.domElement );
  33.  
  34. //camera
  35. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  36. camera.position.set( 0, 0, 400 );
  37.  
  38. //light
  39. light = new THREE.DirectionalLight( 0xffffff );
  40. scene.add( light );
  41.  
  42. //event
  43. window.addEventListener( 'resize', onWindowResize, false );
  44. document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  45. document.addEventListener( 'mouseover', onDocumentMouseMove, false );
  46.  
  47. }
  48.  
  49. // 自動でカメラ位置をリサイズ
  50. function onWindowResize() {
  51. camera.aspect = window.innerWidth / window.innerHeight;
  52. camera.updateProjectionMatrix();
  53.  
  54. renderer.setSize( window.innerWidth, window.innerHeight );
  55.  
  56. }
  57.  
  58. //マウスオーバーでアニメーション
  59. function onDocumentMouseMove( e ) {
  60.  
  61. var windowHalfX = window.innerWidth / 2;
  62. var windowHalfY = window.innerHeight / 2;
  63. mouseX = ( e.clientX - windowHalfX );
  64. mouseY = ( e.clientY - windowHalfY );
  65.  
  66. }
  67.  
  68. //カメラの位置を変えるアニメーション
  69. function animate() {
  70.  
  71. requestAnimationFrame( animate );
  72.  
  73. camera.position.x += ( mouseX - camera.position.x ) ;
  74. camera.position.y += ( mouseY - camera.position.y ) ;
  75. camera.lookAt( scene.position );
  76.  
  77. light.position.set( camera.position.x, camera.position.y, camera.position.z ).normalize();
  78. renderer.render( scene, camera );
  79.  
  80. }
  81.  
  82. init();
  83. animate();
  84.  
  85. </script>
  86.  
  87. </body>
  88. </html>

サンプルはこちら

当然ですが、マウスがオブジェクトから離れるとオブジェクトのカメラの角度がぐんと変わります。

数値を微妙に変えていろいろ試してみると良いですよー。

この記事のタグ