I am curious about the significance behind 'this.object.position' within the trackball feature of Three.JS

After spending quite some time delving into the code of this Trackball control, I am puzzled by what exactly this.object.position represents. You can find the code here: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js

The author not only stores the original value of position (for resetting purposes) but also keeps track of the lastPosition whenever any changes are made to the position after each frame.

... // initialization code

var lastPosition = new THREE.Vector3();

... // more setup


// for reset
this.position0 = this.object.position.clone();

Initially, I presumed that it refers to the camera's position, but there's also a 'this.eye' variable which could cause confusion. Then I considered if it relates to the drawing surface's position on the DOM, but since it's a size 3 vector, this theory doesn't seem plausible either.

Admittedly, this may sound like a simple question, but I would genuinely appreciate any guidance in the right direction.

Thank you for taking the time to read this.

Answer №1

This.object.position represents the current position of the camera. (refer to the note below)

This.eye signifies the vector from this.target to this.object.position. The target serves as the central point around which the camera rotates.

_eye.subVectors( _this.object.position, _this.target );

Note: Please be aware that this explanation assumes the camera is not a child element of another object with translations or rotations. Otherwise, the control functionality may become distorted.

three.js revision 58

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

Tips for maintaining selected text while a modal window is active

So I'm currently working on a document writer and I'm utilizing document.execCommand to insert links. What I aim for is the ability for a user to select/highlight text, click a button to add a link to that specific text (via a modal), and then ha ...

I tried running the sample program from the website in mongoose, but I encountered a persistent error: "TypeError: fluffy.speak is not a function."

const mongoose = require('mongoose'); main().catch(err => console.log(err)); async function main() { await mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true }); console.log("Connection successfu ...

Rendering regions with a blur effect in THREE.js post-processing

I am looking to achieve a unique blur effect on specific fragments of a render. I want frozen "glass" shapes to flow over the WebGl animation, created using animated transparent SVG shapes. The challenge lies in achieving a localized frozen effect. I am ...

What is the best way to align grid elements vertically instead of horizontally on mobile devices using JQuery Mobile?

I've created a basic JQuery Mobile website with a grid containing four horizontally aligned blocks, each with text and a button. While it displays well on desktop browsers, the blocks appear cramped when viewed on my Android Galaxy phone in landscape ...

The Express application encounters a 500 Internal Server Error due to a TypeError where the Object #<EventEmitter> does not contain the method 'hr

The staging instance of my webapp is encountering an issue: Express 500 TypeError: Object #<EventEmitter> has no method 'hrtime' at Object.logger [as handle] (F:\approot\node_modules\express\node_modules\connect ...

Utilizing JQuery UI autocomplete for dynamically loaded textbox using AJAX

<div id='toolbox'> <div class='placeholder'></div> </div> In my project, I am using a click event to dynamically load a text box into the placeholder. $('#toolbox .placeholder').load('http:// ...

How to customize the button color in a Next.js application

Help Needed: Issue with Changing Default Button Color in Next.JS Web Application. The button text color appears as grey on Desktop Google Chrome, but shows up as blue on Mobile Chrome browser. I want to unify the color to be grey on both platforms. Custo ...

The Ajax request returned a status of 200, yet an error message was displayed

Even though the status is 200, why does it print the error message inside alert("error...");? function makeSelect() { var blouseoption = document.querySelector('input[name="blouseoption"]:checked').value; var url = "http://dukano.co/sakh ...

Tips for creating a sophisticated state transition diagram using Typescript

If you have a creative idea for a new title, feel free to make changes! I have two enums set up like this: enum State { A = "A", B = "B", C = "C" } enum Event { X = "X", Y = "Y", Z ...

Enhance the jQueryUI progress bar by dynamically updating it with inner HTML data

I am working on implementing a jQueryUI progress bar and facing some challenges. Here is the basic code for the progress bar: <script> $(function() { $("#progressbar").progressbar({ value: 50, }); }); </script& ...

Retrieve information from both the client and server sides within NextJS

Looking to integrate a third-party API for data fetching in certain components within my NextJS project. The goal is to have the server pre-render these components with the API for optimal SEO benefits, but also enable client-side fetching of component pro ...

Leveraging the useEffect hook in conjunction with the "async" keyword

Looking for a way to clean up react request in react hooks. I've heard about using AbortController in my hook, but I'm not sure how to implement it. I am currently working with next.js. What are some effective approaches to solve this issue? Also ...

Ways to detach event listener in Vue Component

One of my Vue2 components has a custom eventListener that I added in the mounted lifecycle hook. I am now trying to figure out the correct way to remove this listener when the component is destroyed. <template> <div> ... </di ...

"Encountering a Type Error while attempting to destructure elements within ReactJS

Issue Upon querying objects from the GraphQl server and logging data, I can see the objects in the console. However, when attempting to destructure it as data: { getPosts : posts }, a type error is returned. Furthermore, trying to use map directly on data ...

Implementing the jquery mobile data-native-menu feature in a select element dynamically generated from jeditable

Greetings! I have encountered an issue where the data-native-menu="false" instruction works correctly when directly placed in a select element, but doesn't work when added to a select generated by JavaScript (using the Jeditable plugin). You can view ...

display upcoming schedule and time

How can I display the future date and time in the respective field components? See below for a sample code snippet: require([ "dojo/_base/lang", "dijit/registry", "dojo/ready", "dijit/form/TimeTextBox", "dojo/parser" ], function(lang, registry, ready ...

Having trouble transforming my JSON file into a JavaScript object

I have a JSON file with the following structure: { "branding": { "body": { "header_text_color": "#224466", "body_text_color": "##224466", "background_color": &quo ...

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...

When using a Kendo Grid with a Checkbox as a column, the focus automatically shifts to the first

Whenever I select a checkbox in my Kendo grid, the focus automatically shifts to the first cell of the first row. How can I prevent this from happening? Here is the code I am currently using when a checkbox is checked: $('#approvaltranslistview' ...

Execute a multer request to upload an image (using javascript and express)

I am utilizing the Express server as an API gateway for my microservices, specifically to process and store images in a database. The issue at hand is that within the Express server, I need to forward an image received through a POST request from the clien ...