Tips on adjusting the OrbitControls target for navigation movement?

How can I make the orbitcontrols focus on a selected object for navigation? I see there is a center/target attribute, but I'm unsure how to set it to the object I have chosen.

I attempted the following:

var controls = this.controls = new THREE.EditorControls(camera, container.dom);

this.orbitControls = new THREE.OrbitControls( camera );
this.orbitControls.damping = 0.5;
this.orbitControls.addEventListener( 'change', SceneManager.animate );

 var controls = this.controls = new THREE.OrbitControls(camera, container.dom);
 onObjectselected(function(o){
    controls.center.fromArray([o.position.x, o.position.y, o.position.z]);
 });

controls.addEventListener('change', function () {
    thisView.transformControls.update();
    thisView.orbitControls.update();
    SignalHub.signals.cameraChanged.dispatch(camera);
});

However, I am not seeing any outcomes from this code. It was built upon the threejs editor as reference.

Answer №1

After reconsidering, I've decided not to delete this post and leave it up.

I initially believed that the controls would handle everything, but I realized I needed to add the following code to the objectSelected callback:

onObjectselected(function(o){
  //controls.center.fromArray([o.position.x, o.position.y, o.position.z]);
  thisView.orbitControls.center.fromArray([o.position.x, o.position.y, o.position.z]);
});

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

Putting Text Inside a Video Player in HTML

Is there a way to insert text, like a Logo, into my video player? https://i.sstatic.net/CZ6Rp.png I would appreciate any help on how to achieve this. Thank you. <video width="320" height="240" controls src="video/flashtrailer.mp4"> Your browser ...

Is it possible for me to hand over control to a child process and retrieve the result in Node.js?

Recently, I encountered an issue where multiple simultaneous GET requests to my Node.js server caused it to become overwhelmed and unresponsive, leading to timeouts for clients (503, service unavailable). Upon thorough performance analysis, I discovered t ...

Creating dynamic routes for custom locales in Next.js

I'm currently working on a Next.js application with internationalization functionality using next-i18next. Most of my site's pages have been generated in both English and French, except for dynamic routes (like blog/[id]/[blog-title]). For these ...

The drawbacks of using toJS() in React Redux: Is it really necessary in mapStateToProps()?

After reading through the Redux documentation, I came across a recommendation to not use Immutable with Redux. This advice has left me feeling confused. Why should I avoid using toJS() in the mapStateToProps function? It seems that React already uses Dee ...

Create an input box with a designated class

When I click the button in my HTML and JavaScript code below, I am able to dynamically add a text field and radio button. This functionality is working properly. However, I also want the newly generated text field to have the same font size and appearance ...

Unable to preventDefault() function from working within .then method

Snippet: angular .module('mean-starter') .run(run) ; function run($rootScope, Auth, $state) { function stopStateChange (message, event, redirect) { console.log(event); event.preventDefault(); alert(message); if (redirect) ...

Output data to file in a sequential order using JavaScript

I am struggling to comprehend this particular issue. In the context of executing the runOneCombination function across numerous files, my goal is to extract specific information, perform calculations, and then append the results to a file. However, the ch ...

JavaScript refuses to connect with HTML

Just starting out in the world of programming, I decided to dive into a Programming Foundations class on Lynda.com. However, after following along for fifteen minutes, I encountered an issue - I couldn't seem to connect my JavaScript file to my HTML f ...

What steps are necessary to instruct multer to store the file in a specific directory?

Having some issues with multer while trying to save an image in a specific folder. The path for the file gets uploaded to mlab successfully, but the problem arises when attempting to retrieve the image from the designated folder as it fails to save there ...

Trouble with RegExp functionality within prisma's aggregateRaw when using MongoDB

I'm currently learning about MongoDB and Prisma in JavaScript. The following code snippet shows a MongoDB query using Prisma's aggregateRaw method. In this case, the cond is used to perform a case-insensitive string comparison. For instance, if $ ...

Retrieve Content from a Different Web Page Using Ajax

I recently received permission from another website to pull their RSS feeds, and now I'm trying to figure out what to write in TAG1 and TAG2. This is the specific issue I'm facing: Here is the HTML code (it's an ajaxed page) <!doctype ht ...

Tips for adjusting the animation position in Off-Canvas Menu Effects

I am currently utilizing the wave menu effect from OffCanvasMenuEffects. You can view this menu in action below: ... // CSS code snippets here <link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/f ...

Guide to creating a vertical handler that can be resized

Did you know that you can resize tables in http://www.jsfiddle.net? I'm curious about how to resize just the "Vertical Handler". Could someone share the source code with me? If possible, please provide an example on http://www.jsfiddle.net. ...

Implementing global parameters in ui-router

Currently, I am utilizing ui-router in AngularJS as shown below: .state ('browse.category', { url: "/:category", templateUrl: "views/browseCategory.html", controller: function($stateParams, $scope) { $scope.params = $st ...

Executing a Ruby function via AJAX

I am fairly new to working with ajax, and I find myself in need of using it for my Rails application. Here is the function in my controller: def check_code input = params[:input] code = params[:code] if input == code return true else retur ...

Capturing and managing gulp-mocha error messages

For some reason, I just can't seem to get gulp-mocha to properly catch errors in my code. This issue is causing my gulp watch task to abruptly end whenever a test fails. My setup is incredibly basic: gulp.task("watch", ["build"], function () { gul ...

Query using knexJS to retrieve a buffer on a DATE field in SQL

Currently, I am running a SQL query with knexJS and encountered an issue with the following line: this.knex.raw("CONCAT(DATE_FORMAT(xalog2.date, '%Y-%m-%d'),' ', SEC_TO_TIME(xalog2.time)) AS EMISSAO") The query is simple - it retrieve ...

Can React JSX and non-JSX components be combined in a single project?

I'm currently faced with a question: If I have a parent component in JSX but need to include an HTML tag like <i class="fa fa-window-maximize" aria-hidden="true"></i>, which is not supported by React JSX (correct me if I'm wrong), can ...

How can I use JavaScript to display every line individually in a textarea?

I am trying to display the content of a textarea in my div with the ID #result. I want to maintain the line breaks from the textarea and append 1 at the end of each line. Here's my current attempt, but it only adds 1 to the last line. <!DOCTY ...

Error encountered while attempting to invoke endpoint function

Recently, I was handed a Node.js API documented with swagger for debugging purposes. My task also involves implementing some new features, however, I've encountered some difficulty when it comes to calling the functions that are executed upon hitting ...