react-tweenjs001

React+TypeScriptなWebアプリで、Tweenしてみた001。(移動と回転)

ポイント

1. TWEENをimportする。

import TWEEN from '@tweenjs/tween.js'

2. Tween関数コンポーネントを作って、タグを埋め込む。

const Tween = () => {
  useFrame(() => {
    TWEEN.update()
  })
  return(<></>)
}
～略～
   <Tween />

3. new TWEEN.Tween()で生成、いろいろ設定して、startで開始する。

  const tween = new TWEEN.Tween(ref.current.position)
                .to({x: 1, y: 3, z: 0,  rotation: 0}, 2000)
                .delay(1000)
                .easing(TWEEN.Easing.Elastic.InOut)
  const tweenrot = new TWEEN.Tween(ref.current.rotation)
                .to({x: Math.PI, y: 0, z: 0,  rotation: 0}, 2000)
                .easing(TWEEN.Easing.Elastic.InOut)
  const tweenBack = new TWEEN.Tween(ref.current.position)
                .to({x: 1, y: 1, z: 1, rotation: 0}, 3000)
                .easing(TWEEN.Easing.Elastic.InOut)
  tween.chain(tweenrot)
  tweenrot.chain(tweenBack)
  tweenBack.chain(tween)
  tween.start()

4. useEffectで初回startすると、動き続ける。デフォルト繰り返し？ to()に設定するrotationは値設定しても意味ないみたい。 移動させたいときは、new TWEEN.Tween()の引数に、ref.current.positionを設定して、 回転させたいときは、new TWEEN.Tween()の引数に、ref.current.rotationを設定する。 一度に移動させたいときは...？調査中。