Three.jsで、オブジェクトが四角形の軌跡を描くようにしたい

Question

前提・実現したいこと

今日初めてThree.jsに触れました。
特定のx座標まで移動したらx軸方向の運動を止め、そのあとy方向への運動を始め特定のy座標でy軸方向への止め、次にまたx軸方向への運動を始める、さらに・・・・というように、球などのオブジェクトが四角形の軌跡を描くようなコードをかきたいです。この場合、どのようなメソッド・数式を使えば良いでしょうか。

発生している問題・エラーメッセージ

if文を使って方向転換を試みましたが2回目の方向転換でオブジェクトが停止してしまいました

該当のソースコード

sphere.position.z += controls.sphereSpeed;
              if(sphere.position.z>=10) {
                sphere.position.z =10;
                sphere.position.x -= controls.sphereSpeed;
              }
              if(sphere.position.x<=-20){
                sphere.position.x=-20;
                sphere.position.z -= controls.sphereSpeed;
              }

試したこと

上のコードの通りです

補足情報（FW/ツールのバージョンなど）

Answer 1

こんにちは、自分でコードを書いてみました。
たぶん参考になると思います。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

var animate = function () {
    requestAnimationFrame(animate);
    console.log(cube.position);
    var max_x = 1;
    var max_y = 1;
    //右移動
    if (cube.position.x < max_x && cube.position.y >= 0) {
        cube.position.x += 0.01;
        //下移動
    } else if (cube.position.x >= max_x && cube.position.y > -max_y) {
        cube.position.y -= 0.01;
        //左移動
    } else if (cube.position.y < -max_y && cube.position.x > -max_x) {
        cube.position.x -= 0.01;
        //上移動
    } else if (cube.position.x < -max_x) {
        cube.position.y += 0.01;
    }

    renderer.render(scene, camera);
};

animate();

Comments

[Kanikama-chan]

ありがとうございます！こちらのコードを参考にしてうまく動くようになりました！このコードでどうやったら自分の思い通りに動くのか、なんとなくコツを掴めたような気がします。ありがとうございました！