three.jsでオブジェクトを観覧車のように回転させたい

Question

blenderで観覧車の乗り物一つずつを作り、glbファイルにして読み込み、乗り物が逆さまにならないように位置のみ回転させたいと思っています。

しかし、回転はするのですが、位置だけでなく乗り物自体も回転し、これでは中に乗っている人が頭を打ってしまいます。

どうすれば位置のみ回転させることができるでしょうか。

公転のクオータニオンも使ってみましたが、乗り物自体も回転してしまいました。

const loader = new GLTFLoader();

//blenderで作ったglbファイルを配列に
const urls = [
  'blender/foundation.glb',
  'blender/skelton.glb',
  'blender/wagon_1.glb',
  'blender/wagon_2.glb',
  'blender/wagon_3.glb',
  'blender/wagon_4.glb',
  'blender/wagon_5.glb',
  'blender/wagon_6.glb',
  'blender/wagon_7.glb',
  'blender/wagon_8.glb'
];

、、、、、
let obj = null;
for(let i = 0; i < urls.length; i++){//blenderで作ったglbファイルを順番に読み込む
  loader.load(
    urls[i],
    function (gltf) {
        const obj = gltf.scene;
        const animations = gltf.animations;

        else if(i > 1 ){
          //obj.rotation.z = Math.PI / 2;//軸と乗り物を回転(90度回転する)

          //ポイント光源を球の周りを周りを巡回させる//座標を変数にして動的に変える
          //リロードしないと場所が変わらないので、常にぐるぐる回らせるために、アニメート関数に入れて、アニメート関数をフレーム単位で変えていく

          let rot = 0;//カメラを回転させるときにフレームごとに角度をプラスしていくので、プラスするための変数を用意※animate関数の中で宣言すると効かないので外に書く
          console.log(rot);


          const rotationStart = document.getElementById("rotationStart");
          const rotationStop = document.getElementById("rotationStop");

          function animate() {
  
            rot += 1;//1度ずつ足す
            let radian = rot * (Math.PI / 180);//度数をラジアンに変換する


            obj.rotation.z = radian;
            /*200 * Math.cos(Date.now() / 500),*///カメラを回すときに使ったz軸のローテーション


            //レンダリング
            renderer.render(scene, camera);//これもフレームタイムでレンダリングしないと、画面がフレーム単位でレンダリングされないので、アニメート関数に組み込む

            //アニメーション関数をフレーム単位で更新するためには、requestAnimationFrameという関数を使う
            requestAnimationFrame(animate);//これだけではアニメート関数を呼んでいない


            scene.add(obj);
 
          };
          
    };
}

読み込んだファイルの2つ目以降を位置のみ回転させたいので、i > 1 として、その部分のみコードを載せさせていただきます。

お手数をおかけしますが、よろしくお願いします！

Answer 1

こんなイメージでしょうか？（ワゴンの代わりに適当なモデルを読み込ませてみました。）
https://jsfiddle.net/cx20/fcm0kj6n/2/

回転はするのですが、位置だけでなく乗り物自体も回転

回転させるのではなく、位置（position）だけを動かすようにすれば良いかと思います。
観覧車の回転に合わせてゴンドラの位置を円を描くように変更すれば良いでしょう。
円の動きとしては、下記のように sin/cos を用いると円の軌道で動かすことがができます。詳細は単位円について調べてみて下さい。

for (let i = 0; i < wagons.length; i++) {
    wagons[i].position.x = 2 * Math.sin(Math.PI / 180 * (360*i/8) + radian);
    wagons[i].position.y = 2 * Math.cos(Math.PI / 180 * (360*i/8) + radian);
}

■ 観覧車のイメージ

■ 単位円のイメージ

・x が赤色の動き（左右の動き）… cos カーブ
・y が青色の動き（上下の動き）… sin カーブ

Comments

[gubi.m]

とても丁寧に教えてくださり、ありがとうございます！！
そうです！リンクに載せてくださったカエルのように動かしたいと思っています！

載せてくださったコードを参考に修正したところ、乗り物が逆さまにならずに回転させることはできたのですが、中心が観覧車の中心ではなく、それぞれが別々の座標を中心にしたような動きになってしまいました・・・
（それぞれがバラバラの場所で回転している）

また、以下のエラーが大量に表示されるようになってしまいました。
THREE.Object3D.add: object not an instance of THREE.Object3D.

もし可能であれば
追加で質問させていただきたいのですが、別で質問を投稿した方がよろしいでしょうか。

お忙しいところ恐れ入りますが、お時間がある時に教えていただけると幸いです。
何卒よろしくお願いいたします。

[gubi.m]

https://teratail.com/questions/v5npew9028zu3n
新たに質問を立てたので、もしお時間があれば教えていただけると大変嬉しいです！
何卒よろしくお願いいたします。