Manually adjust rotation in Three.js by clicking

Question

Manually adjust rotation in Three.js by clicking

I am looking to initiate an animated rotation of an object by clicking a button. I have a basic understanding that the render function operates as an infinite loop and that adding 0.1 to cylinder.rotation.x continuously rotates the object. My goal is to trigger this rotation with a button click, rather than having it run automatically. Here is an example of what I have attempted so far:

<html>
    <head>
        <title>3D Cube</title>
        <style>

            canvas { width: 100%; 
            height: 100% }
            </style>
    </head>
    <body>
        <script src="three.js"></script>
        <script>

            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 cylindergeometry = new THREE.CylinderGeometry(0.1, 0.1, 2, 50, false);
            var cylindermaterial = new THREE.MeshLambertMaterial({wireframe: true, color: 0x000000});
            var cylinder = new THREE.Mesh(cylindergeometry, cylindermaterial);
            cylinder.position.set(0,0,0);
            scene.add(cylinder);

            camera.position.z = 5;

            var render = function () {
                requestAnimationFrame(render);

                cylinder.rotation.x = 0.1;

                renderer.render(scene, camera);
            };

            render();
            var btn = document.createElement("BUTTON");
            var t = document.createTextNode("CLICK ME");     
            btn.appendChild(t);    
            document.body.appendChild(btn);


            btn.onclick=function(){
                // start animation
                // change cylinder.rotation.x = 0.1; to cylinder.rotation.x += 0.1;
            };
        </script>

    </body>
</html>

javascript three.js rotation

Answer 1

Answer №1

One solution is to move the render() function inside the onclick event.

var render = function () {
  requestAnimationFrame(render);

  cylinder.rotation.x += 0.1;

  renderer.render(scene, camera);
};

btn.onclick = function() {
  render();
};

While this approach may work for your specific issue, it may not be ideal for more complex scenarios. A better alternative could involve separating the rendering and cylinder logic like so:

/* global render function */
var render = function() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
};
render();

/* cylinder rotation logic */
var rotateCylinder = function() {
  requestAnimationFrame(rotateCylinder);
  cylinder.rotation.x += 0.1;
};

/* initiate the rotation */
btn.onclick = function() {
  rotateCylinder();
};

This suggestion is generated spontaneously and may have its own limitations.

Answer 2

One solution is to move the render() function inside the onclick event.

var render = function () {
  requestAnimationFrame(render);

  cylinder.rotation.x += 0.1;

  renderer.render(scene, camera);
};

btn.onclick = function() {
  render();
};

While this approach may work for your specific issue, it may not be ideal for more complex scenarios. A better alternative could involve separating the rendering and cylinder logic like so:

/* global render function */
var render = function() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
};
render();

/* cylinder rotation logic */
var rotateCylinder = function() {
  requestAnimationFrame(rotateCylinder);
  cylinder.rotation.x += 0.1;
};

/* initiate the rotation */
btn.onclick = function() {
  rotateCylinder();
};

This suggestion is generated spontaneously and may have its own limitations.

Answer 3

Answer №2

Set the value "0.1" as a variable and update this variable within the onclick function. Initially, set the variable to zero. Then, increase it by 0.1 within the button's callback.

...
camera.position.z = 5;

var rotationAmount = 0.0; // Start with no rotation.

var render = function () {
    requestAnimationFrame(render);

    // Define 0.1 as a variable and increment rotation by that amount in each frame.
    cylinder.rotation.x += rotationAmount; // It begins without any rotation even though "+=" is used.
    // If you omit "+=", your object will remain still at a 0.1 angle every frame change.

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

Your onclick callback. The animation initiates upon the first button click.

...
btn.onclick=function(){
    // Begin animation
    // Change cylinder.rotation.x = 0.1; to cylinder.rotation.x += 0.1;

    // Update the variable within the onclick function.
    rotationAmount += 0.1 // Each click on the button accelerates the rotation. Starting from zero, the first click sets it to 0.1.
    // Implement any other logic using this button that you can think of.
    if (rotationAtmount > 0.1) 
        rotationAtmount = 0 // One click starts, another stops.
};
...

Answer 4

Set the value "0.1" as a variable and update this variable within the onclick function. Initially, set the variable to zero. Then, increase it by 0.1 within the button's callback.

...
camera.position.z = 5;

var rotationAmount = 0.0; // Start with no rotation.

var render = function () {
    requestAnimationFrame(render);

    // Define 0.1 as a variable and increment rotation by that amount in each frame.
    cylinder.rotation.x += rotationAmount; // It begins without any rotation even though "+=" is used.
    // If you omit "+=", your object will remain still at a 0.1 angle every frame change.

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

Your onclick callback. The animation initiates upon the first button click.

...
btn.onclick=function(){
    // Begin animation
    // Change cylinder.rotation.x = 0.1; to cylinder.rotation.x += 0.1;

    // Update the variable within the onclick function.
    rotationAmount += 0.1 // Each click on the button accelerates the rotation. Starting from zero, the first click sets it to 0.1.
    // Implement any other logic using this button that you can think of.
    if (rotationAtmount > 0.1) 
        rotationAtmount = 0 // One click starts, another stops.
};
...

Manually adjust rotation in Three.js by clicking

Answer №1

Answer №2

Similar questions

Steps for integrating external components into Laravel 5.3 with VueJs Routes

Building a basic music player with the <audio> element and JavaScript / jQuery

Tips for sending web form data straight to Google Sheets without the need for an authentication page

Create groupings within an array based on the month and year using JavaScript

How about wrapping a large amount of text three times and including a "read more" link?

Vows: proceed to the subsequent error handling process

execute javascript code after loading ajax content

Using strings "true/false/null" in React Map render instead of true/false/null values

Executing XSS Reflected Attack by Loading an External JS Script via POST Parameter

The constructor window.CCapture is not valid in Node.js environment

Spinning text within a circular rotation in CSS

How do I utilize the file handler to execute the flush method within the Deno log module using Typescript?

I'm encountering difficulties in utilizing Ajax to upload images

Change the blue line to a crisp, clean white

Updating a hyperlink with data dynamically upon clicking a different button using jQuery

What are the reasons for transitioning from using <script> includes to npm installs?

Ways to Verify the Existence of a Value in an Array Using JavaScript

Enhancing Next.js Images with Custom CSS Styles

The full height of the image cannot be captured by html2canvas

The function does not provide an output of an Object