「Cluster Creator Kit」を使ってみるsimatten（しまってん）

基本的な動きをつくることができるスクリプトのサンプルコード集

2022年10月20日からCluster Creator KitにScriptable Itemが追加されました。
Scriptable Itemを使うとJavaScriptでアイテムを制御することができます。

Scriptable Itemでギミックを動かそう
ギミックと連携することも！

本記事では、スクリプトを使ってつくることができる基本的な動きのサンプルコードを掲載します！そのまま使えるものもありますので、ぜひ触ったり、改変してみたりしてください！

スクリプトの基本的な使い方

スクリプトを使うには、「Scriptable Item」というコンポーネントをつける必要があります。
Cluster Creator Kitのバージョンを最新版にしないと使えないのでご注意ください！

Cluster Creator Kitのアップデート方法

そのまま使えるサンプルコード

X軸方向に反復移動する

const speed = 1.0;
const range = 2.0;
const direction = new Vector3(1.0, 0.0, 0.0).normalize();

$.onUpdate(deltaTime => {
  if (!$.state.initialized) {
    $.state.initialized = true;
    $.state.pivot = $.getPosition();
    $.state.time = 0.0;
  }

  $.state.time += deltaTime;

  $.setPosition($.state.pivot.clone().add(direction.clone().multiplyScalar(Math.sin($.state.time * speed) * range).applyQuaternion($.getRotation())));
});

Y軸方向に反復移動する

const speed = 1.0;
const range = 2.0;
const direction = new Vector3(0.0, 1.0, 0.0).normalize();

$.onUpdate(deltaTime => {
  if (!$.state.initialized) {
    $.state.initialized = true;
    $.state.pivot = $.getPosition();
    $.state.time = 0.0;
  }

  $.state.time += deltaTime;

  $.setPosition($.state.pivot.clone().add(direction.clone().multiplyScalar(Math.sin($.state.time * speed) * range).applyQuaternion($.getRotation())));
});

Z軸方向に反復移動する

const speed = 1.0;
const range = 2.0;
const direction = new Vector3(0.0, 0.0, 1.0).normalize();

$.onUpdate(deltaTime => {
  if (!$.state.initialized) {
    $.state.initialized = true;
    $.state.pivot = $.getPosition();
    $.state.time = 0.0;
  }

  $.state.time += deltaTime;

  $.setPosition($.state.pivot.clone().add(direction.clone().multiplyScalar(Math.sin($.state.time * speed) * range).applyQuaternion($.getRotation())));
});

X軸方向に回転する

const speed = 72.0;
const axis = new Vector3(1.0, 0.0, 0.0);

$.onUpdate(deltaTime => {
  $.setRotation($.getRotation().multiply(new Quaternion().setFromAxisAngle(axis, speed * deltaTime)));
});

Y軸方向に回転する

const speed = 72.0;
const axis = new Vector3(0.0, 1.0, 0.0);

$.onUpdate(deltaTime => {
  $.setRotation($.getRotation().multiply(new Quaternion().setFromAxisAngle(axis, speed * deltaTime)));
});

Z軸方向に回転する

const speed = 72.0;
const axis = new Vector3(0.0, 0.0, 1.0);

$.onUpdate(deltaTime => {
  $.setRotation($.getRotation().multiply(new Quaternion().setFromAxisAngle(axis, speed * deltaTime)));
});

インタラクトするとZ軸方向に反復移動する

const speed = 1.0;
const range = 2.0;
const direction = new Vector3(0.0, 0.0, 1.0).normalize();

$.onInteract(() => {
  $.state.enabled = !$.state.enabled;
})

$.onUpdate(deltaTime => {
  if (!$.state.initialized) {
    $.state.initialized = true;
    $.state.pivot = $.getPosition();
    $.state.time = 0.0;
    $.state.enabled = false;
  }

  if (!$.state.enabled) return;

  $.state.time += deltaTime;

  $.setPosition($.state.pivot.clone().add(direction.clone().multiplyScalar(Math.sin($.state.time * speed) * range).applyQuaternion($.getRotation())));
});

乗るとZ軸方向に反復移動する

const speed = 1.0;
const range = 2.0;
const direction = new Vector3(0.0, 0.0, 1.0).normalize();

$.onRide(isGetOn => {
  $.state.isGetOn = isGetOn;
})

$.onUpdate(deltaTime => {
  if (!$.state.initialized) {
    $.state.initialized = true;
    $.state.pivot = $.getPosition();
    $.state.time = 0.0;
    $.state.isGetOn = false;
  }

  if (!$.state.isGetOn) return;

  $.state.time += deltaTime;

  $.setPosition($.state.pivot.clone().add(direction.clone().multiplyScalar(Math.sin($.state.time * speed) * range).applyQuaternion($.getRotation())));
});

インタラクトすると反復移動をX・Y・Z軸で変更できる

class MoveAxis {

  constructor(speed, range, direction) {
    this.speed = speed;
    this.range = range;
    this.direction = direction.normalize();
  }

  calcMoveByTime(time) {
    return this.direction.clone().multiplyScalar(Math.sin(time * this.speed) * this.range);
  }
}

const moveAxes =
  [
    new MoveAxis(1.0, 2.0, new Vector3(1.0, 0.0, 0.0)),
    new MoveAxis(1.0, 2.0, new Vector3(0.0, 1.0, 0.0)),
    new MoveAxis(1.0, 2.0, new Vector3(0.0, 0.0, 1.0))
  ];


$.onInteract(() => {
  $.state.case = ($.state.case + 1) % moveAxes.length;
})

$.onUpdate(deltaTime => {
  if (!$.state.initialized) {
    $.state.initialized = true;
    $.state.case = 0;
    $.state.pivot = $.getPosition();

    for (let i = 0; i < moveAxes.length; i++) {
      $.state['time' + i] = 0.0;
    }
  }

  $.state['time' + $.state.case] += deltaTime;

  let nextPosition = $.state.pivot.clone();
  for (let i = 0; i < moveAxes.length; i++) {
    nextPosition.add(moveAxes[i].calcMoveByTime($.state['time' + i]));
 }
  $.setPosition(nextPosition);

});

インタラクトすると回転をX・Y・Z軸で変更できる

const speed = 72.0;
const axes =
  [
    new Vector3(1.0, 0.0, 0.0).normalize(),
    new Vector3(0.0, 1.0, 0.0).normalize(),
    new Vector3(0.0, 0.0, 1.0).normalize()
  ];

$.onInteract(() => {
  $.state.case = ($.state.case + 1) % 3;
  $.state.axis = axes[$.state.case];

})

$.onUpdate(deltaTime => {
  if (!$.state.initialized) {
    $.state.initialized = true;
    $.state.case = 0;
    $.state.axis = axes[$.state.case];
  }

  $.setRotation($.getRotation().multiply(new Quaternion().setFromAxisAngle($.state.axis, speed * deltaTime)));
});

改変して使えるサンプルコード

持っても反復移動し続ける

const speed = 1.0;
const range = 0.5;
const direction = new Vector3(1.0, 0.0, 0.0).normalize();
const subNode = $.subNode("動かしたい子オブジェクトの名前をここに書く");

$.onUpdate(deltaTime => {
  if (!$.state.initialized) {
    $.state.initialized = true;
    $.state.pivot = subNode.getPosition();
    $.state.time = 0.0;
  }

  $.state.time += deltaTime;

   subNode.setPosition($.state.pivot.clone().add(direction.clone().multiplyScalar(Math.sin($.state.time * speed) * range)));
});

持っても回転し続ける

const speed = 72.0;
const axis = new Vector3(0.0, 1.0, 0.0);
const subNode = $.subNode("動かしたい子オブジェクトの名前をここに書く");

$.onUpdate(deltaTime => {
  subNode.setRotation(subNode.getRotation().multiply(new Quaternion().setFromAxisAngle(axis, speed * deltaTime)));
});