"Can you show me step by step instructions on how to rotate an object using the mouse

I just finished coding in javascript and now I have an object displayed on my screen.

Below is the javascript code I used:

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
            var SCREEN_HEIGHT = window.innerHeight;
            var SCREEN_WIDTH = window.innerWidth;

            var container;

            var camera, scene, renderer, mesh, directionalLight;

            var parent, meshes = [], clonemeshes = [];

            var p;

           //rest of the existing code....

                composer.render( 0.01 );    
            }

I am looking to rotate the object imported through the script (txtS.json) using the mouse. How can I achieve that? Any assistance would be greatly appreciated.

javascriptthree.js

Answer №1

Have you considered utilizing one of the controllers provided by three.js?

For instance, you could use OrbitControl.

The process is quite straightforward - simply include the controller file:

<script src="js/controls/OrbitControls.js"></script>

Initialize it in your init function:

controls = new THREE.OrbitControls( camera );

And update it within your animate function (prior to rendering):

controls.update();

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

Error encountered while scrolling with a fixed position

I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be n ...

javascriptjqueryhtmlcss

Server has sent an Ajax response which needs to be inserted into a div

I have a modal window that sends a POST request to the server. Before returning to the view, I store some information in ViewData. Here's an example of what I'm doing: ViewData["Msg"] = "<div id=\"msgResponse\" class=\"success ...

javascriptc#jqueryajaxmodel-view-controller

javascript theFunctionCalledInArray

Looking for a JavaScript function that can determine whether a string is present in an array? Here's a simple solution: function checkStringInArray(str, arr){ // code to check if the string is in the array } Keep in mind: this function does not ...

javascriptarrays

What is the most effective way to extract content values from different divs for calculation using jQuery?

I am working on creating a function that retrieves the content values from the <div class="rowtabela"> div and reads the nodes of <div class="item v_...">. Check out my code below: <div class="adicionados" id=& ...

javascripthtmljqueryajax

A cube created in Three.js featuring a unique texture on each of its six faces

I'm attempting to generate a cube using three.js with unique textures on each face, resembling a dice. This is being developed in a sandbox environment where a rotating cube with dice images (1-6) on each side will be created. Once completed, I plan t ...

javascriptthree.js

In Javascript, the DOM contains multiple <li> elements, each of which is associated with a form. These forms need to be submitted using AJAX for efficient

I have a list element (ul) that includes multiple list items (li), and each list item contains a form with an input type of file. How can I submit each form on the change event of the file selection? Below is the HTML code snippet: <ul> ...

javascriptjqueryhtmlajax

Encountering a window undefined error while using React-leaflet

I'm currently working on creating a map using react-leaflet and server-side react. To tackle the "ReferenceError: window is not defined" issue, I've implemented a map component and experimented with utilizing the useEffect hook for dynamic loadin ...

javascriptreactjsreact-hooksleafletreact-leaflet

Utilizing setTimeout() to temporally postpone an action

I have developed a function that handles the addition and removal of a class to a different element upon hovering over one element: $(document).ready(function() { $('.mm-parent:not(.mm-active)').hover(function(){ $('. ...

javascriptjquery

Array not transmitted via jQuery ajax

I am attempting to use the jQuery ajax function to send an array, but for some reason it is not functioning as expected. Below is the code I have been working with: if (section_name == "first_details_div") { var fields_arr = ["f_name", "l_name", "i ...

javascriptjqueryajax

Having trouble with Angular router.navigate not functioning properly with route guard while already being on a component?

I am currently troubleshooting an issue with the router.navigate(['']) code that is not redirecting the user to the login component as expected. Instead of navigating to the login component, I find myself stuck on the home component. Upon adding ...

javascriptangulartypescriptangular-routingangular-components

Tips for launching a fresh window and embedding HTML into it with jQuery?

I'm attempting to use JavaScript to open a new window, but the HTML content is not being added: var callScriptText = $('#callScriptText').html(); var url = '/Action/CallScript/?callScript='; // Open the current call script in a n ...

javascriptjqueryhtml

Could it be that express-session is not compatible with express 4.13?

I have followed the setup instructions for express-session as outlined in the documentation, but it seems that my cookie is not being created. According to the documentation, simply setting the request.session value should automatically set the cookie. How ...

javascriptnode.jsexpressauthenticationexpress-session

Is it possible to access values from an IndexedDB object store key stored in an array without global access?

I am facing an issue where I am trying to extract values of a specific key from an indexed DB and store them in an array. The array seems to work correctly within the onsuccess function but appears empty after that. It seems like the asynchronous nature ...

javascriptarraysasynchronousindexeddb

Repetitive NodeJS event triggers within Electron-React application causing unexpected behavior

In my custom software package (referred to as PACKAGE_A), I have implemented various automated tasks using a node script. This package includes a Notifier module that creates and exports an EventEmitter. (The entire project is structured as a Monorepo) co ...

javascriptnode.jsreactjseventselectron

NodeJS is constantly refreshing the data in the database table

Every day, I use a cron job to scrape data and insert it into a database. However, I'm facing an issue where the database results on the server do not refresh themselves after new data is inserted. I've come across 2 solutions here, but one was ...

javascriptmysqlnode.jsexpresscron

nuxt-auth is experiencing difficulties retrieving token information through the refresh provider

I'm currently facing challenges with the login functionality in Nuxt 3. To handle user authentication, I've installed the package @sidebase/nuxt-auth. Below are my configurations set in the file nuxt.config.ts: auth: { globalAppMiddleware: t ...

javascriptjwtnuxt3.jsnuxt-auth

Manipulating the information pulled from an external PHP script that is currently being displayed

Although I don't consider myself a professional, I am determined to learn some web languages this summer to be able to turn my design ideas into prototypes. Currently, I am struggling to figure out how to manipulate elements that are being echoed bac ...

javascriptphpjqueryajax

Transfer of part of a JSON object

My current setup involves an API in PHP that sends JSON data to a Javascript webpage for processing. However, when dealing with large datasets, it can strain both the user's internet connection and computer capabilities. To address this issue, I want ...

javascriptphpjsonapi

Ways to eliminate flickering when dynamically updating iframe content

Currently, I am in the process of constructing an iframe slideshow that consists of 7 webpages named event1.html to event7.html. To implement the automatic changing of the iframe source every 1 second, I am utilizing setInterval. However, I am facing an is ...

javascripthtmlcssiframe

Why is there a node_modules folder present in the npm package I authored when using it as a dependency in another module?

After successfully launching my first npm package, I noticed something strange when installing it as a dependency in my project. Upon exploring the project folder in node_modules, I discovered an unexpected node_modules folder containing just one package ...

javascriptnode.jsnpmdependenciesnode-modules