"The rotation speed of the CameraHelper in three.js surpasses that of the Perspective

I have a THREE.PerspectiveCamera equipped with a THREE.CameraHelper.

cameraLocal = new THREE.PerspectiveCamera(70, 1, 20, 120);
scene.add(cameraLocal);
cameraLocalHelper = new THREE.CameraHelper(cameraLocal);
cameraLocal.add(cameraLocalHelper);

However, after I rotate the camera,

cameraLocal.rotateX(0.1);

The CameraHelper ends up rotating more than the camera itself. I've created a demo illustrating this. Initially, the help lines drawn by the CameraHelper are not visible to cameraLocal. Yet, upon any x-axis rotation of cameraLocal, the help lines become visible, presumably due to the CameraHelper rotating differently.

Could someone please identify what mistake I'm making here?

This issue is observed on the three.js build from August 5th, 2019.

Answer №1

CameraHelper must be inserted into the scene directly.

Avoid attempting to insert it as a child of the camera object.

Version: three.js r.107

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

React Native: Picker value remains static

I'm encountering an issue where the value of the picker does not change when I select a new value from it. This problem started occurring after I added the onValueChange function. If anyone has any insights or suggestions on how to resolve this, I wou ...

Searching for matching strings in jQuery and eliminating the parent div element

Here's an HTML snippet: <div id="keywords"> <div id="container0"> <span id="term010"> this</span> <span id="term111"> is</span> <span id="term212"> a</span> <span ...

ASP.NET MVC controller encountering internal server error 500 during Ajax request

I have a scenario where I need to populate two dropdowns in a view: <select class="input-sm form-control input-s-sm inline" onchange="loadCities()" id="comboState"> ... </select> <select class="input-sm form-control input-s-sm inline" ...

Can the default position of the scrollbar be set to remain at the bottom?

I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown. jquery code $('document').ready(func ...

The div structure generated through JavaScript appears distinct from its representation in the live DOM

Currently, I am facing a challenge with creating a complex nested Div structure within a JavaScript loop that iterates over JSON response objects from the Instagram API. The main goal is to set the URL for each image within a specific Bootstrap div layout. ...

Combining two elements in Angular 2

I am looking to find the intersection of two objects. My goal is to compare these objects and if they have matching values on corresponding keys, then I want to add them to a new object. obj1 = { "Projects": [ "test" ], "Companies": [ "facebook", "google ...

ways to instantly showcase the input's value within a DIV element

For example, I have a div with the ID of "someDiv" and an input text field with the ID of "someInput". How can I make it so that the value entered into the input field displays in the DIV in real time? For instance, if I type the letter "a" in the input fi ...

Tips for resolving the issue of invalid functions as a child component in React

When I call a function that returns HTML code, everything works fine until I try to pass a parameter in. At that point, I receive an error saying "Functions are not valid as a React child." The issue is that I need to access the props from this function. T ...

I seem to be having issues with the downloaded files for Bootstrap 4. Is there something I am

After creating a site with Bootstrap 4 and downloading all the necessary files, I encountered an issue where Bootstrap was not functioning properly. Strangely, when using the CDN version of Bootstrap, everything worked perfectly. Could I be overlooking som ...

Angular.js and D3 - The Perfect Combination for Dynamic Data Visualization!

Having some trouble creating a chart with angular.js. The chart is not appearing on the page when using rout.js, but it works fine without it. Here's my code: var myapp = angular.module('myapp', ['angularCharts']); function D3 ...

Determine the number of properties present in two arrays by comparing them

Looking to compare two arrays and determine the count of items in the master list. A sample master list could be: { name: 'Emily', age: 29 }, { name: 'Jack', age: 31 }, { name: 'Lily', age: 28 }, { name: 'Emily', a ...

What is the best way to create an array within an object during the parsing process

When working with a JSON object, I need to assign a value stored in the session against an ID. The JSON data is as follows: [ { "id": "a", "text": "a", "icon": true, "li_attr": { "id": "a" }, "a_attr": { "href": "#" ...

Navigating to the default landing page using basic authentication middleware in Express

I'm currently working on implementing basic authorization for an entire website using Express. The goal is to have users enter their credentials, and if correct, they will be directed to the standard landing page. If the credentials are incorrect, the ...

Steps to sending a parameter to an AngularJS $http success callback

In my AngularJS application, I have implemented the following code: $http.get('/plugin/' + key + '/js').success(function (data) { if (data.length > 0) { console.log(data); // Here, I also need to retrieve the val ...

Animation displayed on page load before running

Is there a way to ensure that my animation runs smoothly without any lag or jankiness, either while the page is loading or immediately after loading? I have attempted to preload the images using a preload tag in the header of my HTML, but unfortunately, t ...

Using jQuery to fetch and read the source code of a specified URL

I'm facing an issue with extracting the source code of a website URL into a variable. Here is my current approach: <script type="text/javascript"> debugger; $(documnet).ready(function () { var timer = $.ajax({ type: ...

Which Client-Side JavaScript Frameworks Pair Seamlessly With Node.js, Express.js, and socket.io.js?

Currently, I am in the process of developing a web application utilizing Node.js, Express.js, and socket.io.js on the server side. Are there any front-end frameworks (such as Agility, Angular, Backbone, Closure, Dojo, Ember, GWT, jQuery, Knockback, Knocko ...

Using Three.js allows for the addition of multiple geometries simulataneously

Hey there, I'm new to Three.js and I'm facing an issue where my second geometry is not showing up. I've added the first geometry with all its materials to the scene successfully, but the second one seems to be missing. Any assistance would b ...

The functionality of scrolling ceases to work once the bootstrap modal is closed

I am utilizing Bootstrap v3.1.1 to showcase a modal popup on one of my web pages. The following code shows how I have implemented it. <!--Start show add student popup here --> <div class="modal fade" id="add-student" tabindex="-1" role="dialog" a ...

Ways to trigger an alert once a div is fully loaded with content

I have a webpage with a search feature. When the user clicks the search button, the results are fetched via ajax from the database and displayed in a div. After the results are displayed, I want to perform an action as soon as the total count of records i ...