"Can someone show me how to rotate a cube in Three.js when a button is clicked

My code creates a perfect cube, but I am struggling to make it rotate on button click. For example, when the front button is clicked, I want the cube to show its front side just like the other buttons.
I have researched extensively but have not found a solution yet.
Can anyone please help me with this?

var scene, camera, renderer, cube;
    
    init();
    //drag();
    
    function init() {
    
        // renderer
        var container = document.getElementById("container");
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor ('#fff', 1);
        container.appendChild(renderer.domElement);
    
    
        // camera
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.x = 50;
    camera.position.y = 50;
    camera.position.z = 800;
    
        //cube
         var geometry = new THREE.BoxBufferGeometry(250, 350, 100,1,1,1);
     var cubeMaterial = new THREE.MeshLambertMaterial({color:"red"});
    
        cube = new THREE.Mesh(geometry, cubeMaterial);
        //cube.doubleSided = true;
    
        cube.rotation.x = Math.PI / 1.5;
        cube.rotation.y = Math.PI / 1;
        // scene
        scene = new THREE.Scene();
        scene.add(cube);
    
        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x888888);
        scene.add(ambientLight);
    
        // directional lighting
        var directionalLight = new THREE.DirectionalLight(0x666666);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);
    
       
        function render() {
            renderer.render(scene, camera);
            //requestAnimFrame(render);
            requestAnimationFrame(render);
        }
    
        render();
    }
body {
margin: 0px;
}
#container {
width: 100%;
height: 100%;
}
<script src="https://rawgit.com/mrdoob/three.js/r86/build/three.min.js"></script>

<div id="container"></div>

Answer №1

Your existing code handles rotation for the cube:

cube.rotation.x = Math.PI / 1.5;
cube.rotation.y = Math.PI / 1;

Create a series of functions that rotate the object to specific angles and trigger them when buttons are clicked.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Finding the Angular alternative for $http $resource when making a PDF GET request

In my Angular project, I utilize $resource for all the requests to the Web API. However, I recently encountered an issue with handling data from a request for a PDF file. After some research, I came across a snippet that worked perfectly using $http. Despi ...

``"Selecting a location upon clicking a marker in the array

I have limited experience with javascript but I am determined to improve my skills. Currently, I am facing a major roadblock in a project that I am working on and urgently require assistance. The project involves creating a map with marked locations from ...

How can I automatically bind a collection from an HTML form using the node.js express framework?

Is there a way to bind collections on the server side? For instance: Single Binding <input type="text" name="person[name]" /> This binds to: person:{ name: 'Name from HTML form' } If using Express, you can access this object at: a ...

Node.js and Jest resolve module paths in varying sequences

Within my Node.js project, I have the passport package installed alongside my custom config/passport.js file containing Passport strategies and app configuration in config/config.js. To streamline my workflow on Ubuntu 16.04, I configured my NODE_PATH to ...

I'm struggling to understand why the jQuery find() method isn't functioning as expected

UPDATE: In a twist of events not caused by syntax errors, but rather by a loading issue with the html template, it turns out that the checkbox update was happening prematurely. So if you're searching for an element that seems to be missing, it may sim ...

Preventing the Vue compiler from managing static assets: A step-by-step guide

In my Vue 3 application, I have a variety of static assets that are organized in their own file structure separate from the app's source directory. Fortunately, my web server is configured to serve files from both the Vue build directory and the stati ...

The clingy navigation bar hinders smooth scrolling to the content

My website has an image where users can click on elements to scroll down to text. However, I'm facing a problem because there is a sticky menu at the top of my website. How can I ensure that the scrolling works correctly with the sticky menu included? ...

Ways to verify if JSON response is null using jquery

$.getJSON(url, function(json) { var output = ''; $.each(json, function(i,d) { if(d.DESCRIPTION == 'null'){ console.log("Its empty"); } var description = d.DESCRIPTION; output += '<tr><td>&apo ...

How can I retrieve the $index value of an ng-repeat element within a uib-dropdown?

I am currently working on implementing an ng-repeat loop that includes a dropdown menu for each element. I want the dropdown menu to contain functions that operate on the specific element, requiring access to the index of that element. Below is the code sn ...

How can I toggle the visibility of a div based on whether a variable is defined or not?

How can I display a specific div on my webpage only when certain variables in PHP pull out a specific result from a database? I attempted to use the code snippet below, but it's not working as expected. Can someone provide guidance on how to achieve ...

Retrieving information from JSON files using AngularJS

Here is a JSON object example: [ { "user": "A220", "shorttext": "shanghai", "reportedBy": "S,A", "questions": " [{\"question\":\"Q1\",\"is_mand\":\"0\",\"type\":\"text\",\"a ...

The PHP file fails to load JavaScript because it requires another JavaScript file to be loaded beforehand

I created a chat widget using PHP (chat.php) and now I want to embed it into another PHP page (blank.php). To make this work, chat.php requires some scripts that are located in external JavaScript files. So, in blank.php, I added the necessary JS files th ...

I keep encountering the issue "auth is not a function" every time I try to call my authentication function within a route

Whenever a user requests sensitive information from the backend, I need to call an authenticated function. However, I am facing an issue where this function is not running when called. Below is the code for my authentication function: const auth = (req,re ...

Modifying button appearance based on state change in AngularJS

I have a button with a grey color and I want to create two different states for it: one that is selected (blue) and another that is in an idle state (grey). Currently, I am working on Angularjs but I am fairly new to this platform. Could you kindly provid ...

Executing jQuery AJAX requests in a chain with interdependent tasks

I am struggling to grasp the concept of magic deferred objects with jQuery. Consider the following code snippet: function callWebService(uri, filter, callback) { var data = {}; if (filter && filter != '') data['$filter&apos ...

Populate an HTML layout with MySQL information and dynamically add the content to the page using JavaScript

I'm facing a challenge with creating an about us page for a website. I am using a template to structure the page and I want to populate it with MySQL data. I have enclosed the entire <div> of the personcard within a <script> tag, but the p ...

Continuous loop of images displayed in a slideshow (HTML/JavaScript)

Greetings everyone, I am currently working on creating an endless loop slideshow of images for my website. Despite researching several resources, I am still struggling to get the code right. The issue I am facing is that only the image set in the HTML code ...

The issue with Ajax's failure to replace periods with commas in numbers remains unresolved

I am facing an issue with my function that retrieves numbers from input fields. The numbers have commas instead of dots for decimals (e.g. 123,5). To perform calculations, I convert them using the replace method and then revert back to commas for displayin ...

"Encountering challenges with integrating Addthis on a WordPress website

Hey there, I've got a few questions about my self-hosted Wordpress site... 1) I'm having an issue with the Google Plus button not appearing on AddThis Smart Layers. Even though the code is in my header, only 4 buttons show up on my page - the Go ...

Monitor which image has been selected to alter the content inside

Is there a way to track the image clicked on and modify the inner HTML of the element located above where all the images are displayed? For instance, if I click on St. John The Baptist, I want the title to change to St. John The Baptist. Currently, the fu ...