Tips for deactivating trackball rotation events and triggering a custom rotation event while adjusting the rotation speed within the custom event

In an attempt to disable the trackball control rotate event and trigger a custom rotate event, I have encountered some challenges. While setting controls.enableRotate = false; works for OrbitControl, it does not completely disable the trackball control rotate functionality. The issue can be observed in this fiddle: https://jsfiddle.net/azso936f/1/ In the fiddle, the rotation operation occurs on mousemove, but when mousedown is triggered, the rotation functionality of the trackball control also kicks in.

var scene, renderer, camera;
    var cube;
    var controls;
    var containerWidth = window.innerWidth,
        containerHeight = window.innerHeight;
    var isDragging = false;
    var previousMousePosition = {
        x: 0,
        y: 0
    };
    init();

    animate();

    function init() {
        configureRenderer();

        scene = new THREE.Scene();
        configureCube();
        configureCamera();
        configureLight();
        configureControls();
    }

    function configureRenderer() {
        // Renderer configuration code
    }

    function configureCube() {
       // Cube configuration code
    }

    function configureCamera() {
       // Camera configuration code
    }

    function configureLight() {
      // Light configuration code
    }

    function configureControls() {
       // Controls configuration code
    }

    function animate() {
      // Animation code
    }

Answer №1

The rotation feature in the fiddle is operational when moving the mouse, and also when clicking down with trackball control

To disable the rotate functionality of THREE.TrackballControls, simply set the rotation speed (.rotateSpeed) to 0:

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

controls.rotateSpeed = 0.0;

You can adjust the rotation speed by adjusting the scale of the THREE.Euler angles:

renderer.domElement.addEventListener('mousemove', function (e) {
    const that = this;
    var rotateSpeed = 0.1;
    var deltaMove = {
        x: e.offsetX - previousMousePosition.x,
        y: e.offsetY - previousMousePosition.y
    };

    if (isDragging) {
        var deltaRotationQuaternion = new THREE.Quaternion()
            .setFromEuler(new THREE.Euler(
                toRadians(deltaMove.y * rotateSpeed),
                toRadians(deltaMove.x * rotateSpeed),
                0,
                'XYZ'
            ));
        cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
    }

    previousMousePosition = {
        x: e.offsetX,
        y: e.offsetY
    };
});

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

What is the best way to utilize the features of component A within component B when they exist as separate entities

Component A has all the necessary functionalities, and I want to use it in Component B. The code for ComponentA.ts is extensive, but it's not written in a service. How can I utilize the logic from Component A without using a service, considering both ...

A guide on accessing objects from an array in Vue.js

Wondering how to choose an object from an array in Vue.js: When the page loads, the selectTitle() function is triggered. I simply want to select a specific object (for example, i=2) from my 'titleList' array. However, at the moment, I am only re ...

Getting a 404 error when attempting to go straight to a URL in a Single Page Node App

Currently, my setup involves a NodeJS backend connected to a ReactJS frontend (without utilizing create-react-app). To bundle both the React frontend and the Node backend, I am using webpack. The webpack configuration generates an "dist" directory in the ...

v-bind is not recognizing modifications in the array elements (vue js)

I'm currently working on switching the id of an image upon the user clicking a button. At first, the id should be set to B0_h, but once the user clicks the button, it should trigger a change in an array value to true. Initially, all values in the arra ...

Obtaining a response in string format using the $.ajax function

var module = (function(){ return{ loadData: function(url, success, error){ $.when($.ajax({ type: 'GET', cache: false, url: url, contentType: 'application ...

Retrieving ng-model using ng-change in AngularJS

Here is an example of the HTML code I am currently working with: <select ng-model="country" ng-options="c.name for c in countries" ng-change="filterByCountry"></select> This HTML snippet is being populated by the following object containing a ...

What exactly does the statement if(item.some((item) => !item.available) represent in typescript?

Can you explain the meaning of if(item.some((item) => !item.available))? While looking at some code randomly, I came across this snippet: if(item.some((item) => !item.available){ } I'm curious about what it signifies. Can you elaborate on it? ...

What are the recommended callbacks for initiating ajax calls and managing files/chunks during dropzone chunk uploading?

I am currently working on implementing chunk uploading using dropzone js and php. My main concern is regarding the placement of ajax calls in this process. When dealing with single file uploads, specifying the URL parameter is sufficient. However, when ...

Having difficulty establishing a connection between my node.js application and the database

I've been struggling to establish a connection between my application and the database. Despite attempting the code below, my models are still not being recognized. const MongoClient = require('mongodb').MongoClient; const assert = require(& ...

Strategies for detecting and handling blank data in JSON parsing with JavaScript

Here is a function that retrieves details: function GetSomeDetails(Param) { Json_Parameters = JSON.stringify(Param); $.ajax({ type: "POST", url: "MainPage.aspx/MyMethod", data: J ...

Implementing universal design in Next.js 14

I'm encountering a problem while trying to use the style jsx global property in the latest version of Next.js. Previously, you would include it in the _app.js file, but since that file no longer exists, I assumed it should be added to the layout.tsx f ...

"Upon triggering an event in AngularJS, the data attribute transitions to a state of truth

Here is the input I am using: <input type="checkbox" ng-model="area.id" data-id="{{area.id}}"/> Above this, there is some action with ng-click functionality. My goal is to gather all selected checkboxes' ids. However, after checking them, the ...

Unable to navigate using ui-sref or $state.go in initial directive execution

There seems to be an issue with my ng-repeat on a directive where I'm passing in 3 pieces of information. The directive includes a button that is supposed to pass that information on to another view using params like this: ui-sref='profiles.sho ...

Vue.JS encounter a hiccup while attempting to store data in the local storage

My application is set up to fetch data from a rest api, and it consists of two key components: 1 - (main) Display the results 2 - (list) To display a list of selected items from the main results The feature I am trying to implement involves adding a save ...

Issue with alignment in the multiselect filter of a React data grid

In React Data Grid, there is a issue where selecting multiple filter options messes up the column headers. Is there a solution to display selected filter options above a line in a dropdown rather than adding them to the column header? The column header siz ...

Automatically calculate the quantity of pie charts to showcase and present each one individually on a CanvasJS-generated page

I am looking to create multiple pie charts dynamically and display them together on a webpage. The number of pie charts needed will be determined by the elements in a JSON object. Here is an example of how the data will be structured: [ { "id" : "12 ...

Is it possible to utilize jQuery to insert a chosen form into a table?

Here is the code example I am working with: <label for="">Select Ticker: </label> <select class="form-control" style="display: inline" id='selected'> {% for p in tickers %} <option value="{{ p.tick ...

Using the event object in the onClick handler within React applications

In my React app, I have implemented a feature where clicking on a column heading sorts the data in the table using merge sort algorithm My goal is to pass both the data (an array of objects) and the event object to the sorting function. However, I am faci ...

What is the default parameter type in react-native?

Currently, I am delving into React-native framework. While browsing through the Facebook ListView sample page, I stumbled upon the below code snippet. _renderRow: function(rowData: string, sectionID: number, rowID: number) { .... Interestingly, I have n ...

Create an animated circle in canvas that smoothly descends over a set duration

I am looking to animate a circle using the ctx.arc(10, 10, 15, 0, Math.PI*2, true); method and have it flow downwards without losing its trail. The image below illustrates this clearly: As shown in the image, the circle is continuously moving downwards o ...