Object responds to mouse click by rotating and moving through animation

Question

Object responds to mouse click by rotating and moving through animation

Exploring the possibilities of three.js

I'm attempting to create an animation (rotation/movement) for an object upon a mouse click event, however, I am not achieving the desired animation effects.

Below is the code snippet that I have implemented. Could it be that I am using render excessively?

        document.addEventListener( 'mousedown', clickMe, false );
        render();

        function clickMe() {
            rotation();
            render();   
        }

        var gltfModel;

        function rotation() {
            var rotationAnimation = 5 * (Math.PI / 180);
            gltfModel.rotation.x += rotationAnimation;
            render();       
        }

        function render() {
            renderer.render( scene, camera );
        }

If I insert 'requestAnimationFrame(rotation);' within the rotation function:

        function rotation() {
            requestAnimationFrame(rotation);
            var rotationAnimation = 5 * (Math.PI / 180);
            gltfModel.rotation.x += rotationAnimation;
            render();       
        }

The gltfModel continues to spin endlessly, and every time I click, the speed doubles.

Here is the complete code:

       // Complete code provided here

Is this achievable with EventDispatcher? If so, what would be the approach? https://threejs.org/docs/#api/en/core/EventDispatcher

However, my preference leans towards the initial method discussed.

javascript function three.js jquery-animate

Answer 1

Answer №1

Indeed, you only need to execute the render function once. Therefore, you can remove those calls from within both the rotation() and clickMe() functions, placing them after

document.addEventListener( 'mousedown', clickMe, false );

.

Nevertheless, by following this approach, the object will only rotate once with each click. Assuming your goal is to continuously rotate the object while holding down the mouse button.

If that is the case, you can simply set a boolean flag on mousedown.

Within the clickMe function, consider implementing something like:

function clickMe() {
  rotating = true; // ensure this variable is globally declared
}

Subsequently, in the render function, you may include the following logic:

function render() {
  if (rotating) {
    var rotationAnimation = 5 * (Math.PI / 180);
    gltfModel.rotation.x += rotationAnimation;
  }
  renderer.render(scene, camera);
}

Lastly, remember to attach a mouseup listener to halt the object's rotation when releasing the mouse button.

function handleMouseUp() {
  rotating = false;
}

document.addEventListener('mouseup', handleMouseUp);

Answer 2

Indeed, you only need to execute the render function once. Therefore, you can remove those calls from within both the rotation() and clickMe() functions, placing them after

document.addEventListener( 'mousedown', clickMe, false );

.

Nevertheless, by following this approach, the object will only rotate once with each click. Assuming your goal is to continuously rotate the object while holding down the mouse button.

If that is the case, you can simply set a boolean flag on mousedown.

Within the clickMe function, consider implementing something like:

function clickMe() {
  rotating = true; // ensure this variable is globally declared
}

Subsequently, in the render function, you may include the following logic:

function render() {
  if (rotating) {
    var rotationAnimation = 5 * (Math.PI / 180);
    gltfModel.rotation.x += rotationAnimation;
  }
  renderer.render(scene, camera);
}

Lastly, remember to attach a mouseup listener to halt the object's rotation when releasing the mouse button.

function handleMouseUp() {
  rotating = false;
}

document.addEventListener('mouseup', handleMouseUp);

Answer 3

Answer №2

If you're looking to add a spinning box feature to your gltf model, here's a basic code sample to help you get started. Remember that using the render method in your functions might not be necessary, so take a look at some simple scene examples for guidance.

For more information and detailed instructions on creating a scene with Three.js, check out this link.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<script> 
    var box;
    var isMouseDown = false;
    var rotateSpeed = 0;

    init();
    animate();

    function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
        camera.position.set(5,5,5);
        camera.lookAt(new THREE.Vector3(0,0,0));

        scene = new THREE.Scene();

        light = new THREE.HemisphereLight(0xbbbbff, 0x444422);
        light.position.set(0, 1, 0);
        scene.add(light);
        
        var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        box = new THREE.Mesh(geometry, material);
        scene.add(box);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        window.addEventListener('mousedown', () => isMouseDown = true,false);
        window.addEventListener('mouseup', () => isMouseDown = false,false);
        
        animate();

    }

    function animate() {

        requestAnimationFrame(animate);

        if(isMouseDown) rotateSpeed += 0.001;
        else rotateSpeed /= 1.01;
        box.rotation.y += rotateSpeed;

        render();

    }
    
    function render() {

        renderer.render(scene, camera);

    }
</script>

</html>

Answer 4

If you're looking to add a spinning box feature to your gltf model, here's a basic code sample to help you get started. Remember that using the render method in your functions might not be necessary, so take a look at some simple scene examples for guidance.

For more information and detailed instructions on creating a scene with Three.js, check out this link.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
<script> 
    var box;
    var isMouseDown = false;
    var rotateSpeed = 0;

    init();
    animate();

    function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.25, 20);
        camera.position.set(5,5,5);
        camera.lookAt(new THREE.Vector3(0,0,0));

        scene = new THREE.Scene();

        light = new THREE.HemisphereLight(0xbbbbff, 0x444422);
        light.position.set(0, 1, 0);
        scene.add(light);
        
        var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        box = new THREE.Mesh(geometry, material);
        scene.add(box);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        window.addEventListener('mousedown', () => isMouseDown = true,false);
        window.addEventListener('mouseup', () => isMouseDown = false,false);
        
        animate();

    }

    function animate() {

        requestAnimationFrame(animate);

        if(isMouseDown) rotateSpeed += 0.001;
        else rotateSpeed /= 1.01;
        box.rotation.y += rotateSpeed;

        render();

    }
    
    function render() {

        renderer.render(scene, camera);

    }
</script>

</html>

Object responds to mouse click by rotating and moving through animation

Exploring the possibilities of three.js

Here is the complete code:

Answer №1

Answer №2

Similar questions

Choose the span element that is contained within multiple div elements

Sending data from a Flask application written in Python to a JavaScript file using AJAX for seamless integration

Rotating the icon in Bootstrap Accordion upon opening

Is {{@index}} an even or odd number in Handlebars: A Step-by-Step Guide

Tips for hiding the bottom bar within a stackNavigator in react-navigation

Error: Uncaught TypeError - Unable to access the 'handleClick' property of undefined within a forEach loop

What is the best way to confirm if the elements in an array are in consecutive order?

Find unique numbers within a specified range using NodeJS

Encountering a problem when trying to assign a value to a file/image input field using Vue Formulate

Examining whether an ajax call was not initiated within an Angular application

Effective methods for eliminating timezone in JavaScript

"Enhancing communication with PHP-powered private messaging through AJAX technology

A guide on verifying a phone number using just one character

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

The utilization of "startIcon" and "endIcon" from the <Button/> API of Material-UI is restricted

Ways to access elements and their associated values in a JavaScript Array

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

TPL operating on a List that is stocked with merchandise

Navigating in React Navigation: Techniques to Directly Access a Specific Index in a Datasource

retrieve undefined value from redux state in a React Native application