三角関数で球を回す

デモ：http://mo49.tokyo/threejs/earth_trigonometric.html

sin, cosを x, y片方ずつに使っている「赤」「黄」の球は円を描きながら回転していることがわかる。

色	x	y
黄	cos	sin
赤	sin	cos
青	sin	sin
緑	sin	tan

javascript

window.addEventListener("load", init);
function init() {
    // シーン
    var scene = new THREE.Scene();

    // カメラ
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.set(0, 0, 1000);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    // レンダラー
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    var degree = 0; // 角度
    var radius = 300; // 半径
    var radius2 = 150; // 半径
    var radius3 = 50; // 半径
    var radius4 = 100; // 半径

    // 球
    var sphere = new THREE.Mesh(new THREE.SphereGeometry(20), new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }));
    scene.add(sphere);
    var sphere2 = new THREE.Mesh(new THREE.SphereGeometry(20), new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }));
    scene.add(sphere2);
    var sphere3 = new THREE.Mesh(new THREE.SphereGeometry(20), new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true }));
    scene.add(sphere3);
    var sphere4 = new THREE.Mesh(new THREE.SphereGeometry(20), new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }));
    scene.add(sphere4);
    // 地球
    var earth = new THREE.Mesh(new THREE.SphereGeometry(250, 20, 20), new THREE.MeshBasicMaterial({ wireframe: true }));
    scene.add(earth);

    // フレーム毎の再描画
    function ballRotate() {
        // 球を回転させる
        degree += 1;
        // 角度をラジアンに変換
        var rad = degree * Math.PI / 180;
        // xとyでsin,cosを入れ替えると逆回転する
        // http://www.ajaxtower.jp/js/math_class/index9.html
        var x = radius * Math.cos(rad);// X座標 = 半径 x Cosθ
        var y = radius * Math.sin(rad);// Y座標 = 半径 x Sinθ
        var x2 = radius2 * Math.sin(rad);
        var y2 = radius2 * Math.cos(rad);
        var x3 = radius3 * Math.sin(rad);
        var y3 = radius3 * Math.sin(rad);
        var x4 = radius4 * Math.sin(rad);
        var y4 = radius4 * Math.tan(rad);
        sphere.position.set(x, y, 0);
        sphere2.position.set(x2, y2, 0);
        sphere3.position.set(x3, y3, 0);
        sphere4.position.set(x4, y4, 0);

        renderer.render(scene, camera);

        requestAnimationFrame(ballRotate);
    }
    ballRotate();
}

参考
https://ics.media/entry/10657