Интерактивная сфера?

Question

[js_123]

Здравствуйте. Столкнулся с интересной задачей, создать интерактивную сферу. Когда пользователь ведет мышь влево, сфера начинает крутится влево, когда начинает вести курсор вправо, сфера плавно меняет направление кручения, и крутится вправо. По дефолту сфера крутится вправо (это реализовал). Вопрос в том, что мой код не работает правильно (использовал TreeJS). Поэтому, хотел узнать у вас, возможно вы знаете примеры реализации данной задачи, или видите проблемы в моем коде. Буду благодарен каждому!

<script src="https://threejs.org/build/three.min.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
window.onload = () => {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
    camera.position.set(0, 0, 10);
    var renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    var controls = new THREE.OrbitControls(camera, renderer.domElement);

    var tex = new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg');


    var sphereGeom = new THREE.SphereBufferGeometry(1, 32, 32, 5);

    // сфера 

    var innerSphere = new THREE.Mesh(sphereGeom, new THREE.MeshBasicMaterial({
        map: tex
    }));
    innerSphere.scale.setScalar(3);
    scene.add(innerSphere);
    window.addEventListener("mousemove", rotating, false);
    var clock = new THREE.Clock();
    // крутить сферу

    function rotating(e) {

        if (typeof e === 'undefined') {
            innerSphere.rotation.y = clock.getElapsedTime() * -0.5 - 6

        } else {
            innerSphere.rotation.y = clock.getElapsedTime() * +0.5 - 6
        }

    }

    renderer.setAnimationLoop(() => {
        rotating()
        renderer.render(scene, camera);
    });
}

Answer 1

[RAX7]

Comments

[js_123]

Спасибо, колега!