Switching camera controls in Three.js from First Person to Orbit mode (and vice versa) can be easily

Transitioning between Three.js FirstPerson controls and Orbit controls can be seamless, but there seems to be an issue when switching from First Person to Orbit where the display gets stuck in a 'mousedown' mode.

Is there a way to easily go back and forth between First Person and Orbit controls without encountering this problem?

To see a demo of the issue, check out the jsBin example:

http://jsbin.com/jekebo/2/edit?html,js,output

The following are the two functions used for setting up the different controls:

function setControlsFirstPerson() {

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( -150, 20, 0 );
    controls = new THREE.FirstPersonControls( camera, renderer.domElement );
    controls.lookSpeed = 0.05;
    controls.movementSpeed = 50;

}


function setControlsOrbit() {

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 100, 100, 100 );
    controls = new THREE.OrbitControls( camera, renderer.domElement );

}

Any suggestions or help on resolving this issue would be greatly appreciated.

Answer №1

The reason it's not functioning properly is due to passing the second parameter to the OrbitControls. This seems to interfere with the firing of the end event.

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

When you remove this parameter, everything works as intended:

controls = new THREE.OrbitControls( camera );

I made some changes in your jsbin by adjusting the parameters passed to both control constructors.

http://jsbin.com/fabalomave/1/edit?js,output

I also updated how the cameras are created and switched so that a new instance isn't generated each time the camera changes. Instead, it now retains a reference and changes which camera and control the global camera and controls variables point to.

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

Add a variety of parameters to the URL in order to make an AJAX request

I want to dynamically add values from checked checkboxes to a URL for use in an AJAX call. I only want these values to be added to the URL if the checkbox is checked. If a user checks and then unchecks, I do not want that value included in the URL. Below ...

Sinon - the ultimate guide to intercepting the save() function in a mongoose schema

Currently, I am in the process of writing unit tests for an API that utilizes MongoDB in conjunction with mongoose for database access. Within my codebase, there exists a model file that defines and exports a mongoose model as shown below: const { Schema, ...

Troubleshooting: Issues with jQuery's Class selector

Having trouble setting up an alert to trigger when a specific class anchor tag is clicked inside a div. This is what my HTML section looks like... <div id="foo"> <a class='bar' href='#'>Next</a> </div> And h ...

Converting every item's values into keys

Currently, my goal is to export all object values as keys specifically for a tree-shakable import system in a plugin I'm currently developing. The approach involves dynamically importing modules from various directories and subfolders, consolidating t ...

Warning: Potential critical dependency detected while utilizing react-pdf package

When attempting to showcase a PDF on my react application, I encountered the following warning: /node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.js Critical dependency: require function is used in a way in which dependencies cannot be static ...

Combining Multiple Arrays into One | Node.js

Can someone explain how to merge an array of arrays to me? For instance, I have the following array: [ [ {brand: 'fiat', model: 'palio'} ], [ {brand: 'nissan', model: 'march'} ] ] I want to transform this array int ...

Using javascript to add SVGs with duplicate IDs

When SVGs are inserted into a document using javascript, they may appear as gibberish due to conflicting IDs within them. For example, consider these two distinct svg files: Upon insertion into the document using javascript*, one of them may display incor ...

Exploring ways to display a JavaScript object on click from a .json file

As I delve into the world of javascript and json, I find myself facing a challenge. I am looking to extract information (using the Get Information function) from a json file within a javascript function triggered by an event. The catch is, I want to accom ...

Could use some assistance in developing a custom jQuery code

Assistance Needed with jQuery Script Creation <div>Base List</div> <div id="baseSection"> <ul class="selectable"> <li id="a">1</li> <li id="b">2</li> <li id="c">3</li> ...

"When attempting to upload an image from the front end, the issue arises that req.file

I have been troubleshooting this issue by referring to similar posts, but I am still facing the problem of getting 'undefined' when using console.log. I have followed instructions for defining the multer middleware from other sources, so I am uns ...

The jQuery panel slider magically appears when you click the button, but refuses to disappear

One issue I am facing on my webpage involves a button that triggers a right panel to open using the jquery and modernizr frameworks. The button is positioned at the far right of the screen. When clicked, it slides to the left along with the panel it reveal ...

Does it follow standard practice for Array.filter to have the capability to also perform mapping on an array of objects?

While experimenting with Array.filter, I made an interesting discovery. By forgetting to include an equality check, my array was unexpectedly mapped instead of filtered. Here is the code snippet that led to this result: const x = [{ name: 'user' ...

Testing an ExpressJS route and their corresponding controller individually: a step-by-step guide

I have set up an Express route in my application using the following code snippet (where app represents my Express app): module.exports = function(app) { var controller = require('../../app/controllers/experiment-schema'); app.route('/a ...

Apply a new class to all Radio buttons that were previously selected, as well as the currently

Struggling with a simple code here, trying to figure out how to add color (class) to the selected radio button and the previous ones. For example, if button No3 is selected, buttons 1, 2, and 3 should get a new color. Below is the basic code snippet: < ...

What is the best way to retrieve the values of various input fields using their numbered IDs and then store them in a MySQL

I attempted to design a form that allows for multiple inserts, where users can add as many titles and languages as they desire by entering a number. The display of titles and languages is functioning correctly, but I am struggling to retrieve the individua ...

Guide to customizing marker colors on APEXCHARTS in a Next.js project

Is there a way to specify the color of each data point individually? For example, something like { x: 'Yellow', y: [2100, 3000], colors: '#808080' }, as the default color is set for all markers under plotOptions > dumbbellColors. I n ...

Utilizing a for loop to iterate through an array based on its length

Just delving into the world of JavaScript and recently grasped the concept of For loops. I have a variable that holds an array with a list of first names, and my goal is to add last names to each of them. Here's the code snippet I came up with: l ...

Transmitting JSON securely to a server using an HTML form webpage

Currently, I have an HTML page with a form that communicates with a server using JSON requests. The purpose is to load user's previous answers upon loading and save new answers when the submit button is pressed. Each user has a unique user_id attribut ...

Guide on transforming Div content to json format with the use of jquery

I am trying to figure out how to call the div id "con" when the export button is clicked in my HTML code. I want it to display JSON data in the console. If anyone has any suggestions or solutions, please help! <html> <div id ="con"> < ...

Unresponsive radio buttons in React failing to display as checked

My child component is designed to receive props from a parent. Within the child component, there are radio buttons that render like this: <div> <div className="radio"> <label> <input type="radio ...