Error in ThreeJS: Unexpected data type for Orbit Controls - b[c].call is not a valid function

I have been working on a three.js project and have successfully implemented orbit controls. However, I am encountering an error where for every single pixel I move my mouse over, the following error is thrown:

Uncaught TypeError: b[c].call is not a function
    at THREE.OrbitControls.dispatchEvent (three.min.js:343)
    at THREE.OrbitControls.update (OrbitControls.js:230)
    at handleMouseMoveRotate (OrbitControls.js:493)
    at HTMLDocument.onMouseMove (OrbitControls.js:901)

Below is the snippet of my code:

        function initial() {
            // Code here
        }


        function animate() {
            renderer.render(scene,camera);
            requestAnimationFrame(animate);
          }
        initial();

I have tried searching online for a solution to this error without success. Can anyone provide guidance on how to resolve this issue?

javascriptthree.js

Answer №1

Instead of using 

controls.addEventListener('change', renderer);
, you can just use controls.update().

I encountered a similar issue, but it was resolved when I switched from three.min.js to three.js.

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

Utilize React-markdown to interpret subscript text in markdown format

I tried to create subscript text in an .md file using the following syntax: x_i x~i~ Unfortunately, react-markdown did not interpret this as subscript. After some research, I discovered the package remark-sub-super and implemented it with the plugin ...

javascriptnode.jsreactjsnext.jsreact-markdown

Using AngularJS to create a form and showcase JSON information

My code is below: PizzaStore.html: <!DOCTYPE html> <html ng-app="PizzaApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Delicious pizza for all!</title> ...

javascripthtmljsonangularjs

Using jQuery to display a div after a 2-second delay on my website, ensuring it only appears once and does not reappear when the page is refreshed or when navigating to a

I manage a website that includes a blog section. Every time someone visits the site, I want a popup window to appear. (To achieve this, follow these steps - Utilize jQuery for showing a div in 5 seconds) I would like this popup to only be displayed once ...

javascriptjquery

Significant issue identified with ajax functionality, requiring immediate attention

After executing the code in the console, I expected to see the ajax object with a readyState of 0 (as I aborted the ajax call). However, Chrome is displaying the number 4 in the console instead of 0. This discrepancy is surprising. http://jsfiddle.net/8yC ...

javascriptajax

How can you trigger a 'hashchange' event regardless of whether the hash is the same or different?

Having a challenge with my event listener setup: window.addEventListener('hashchange', () => setTimeout(() => this.handleHashChange(), 0)); Within the handleHashChange function, I implemented logic for scrolling to an on-page element whil ...

javascriptjqueryhtmltypescript

Tips for displaying or concealing data in table cells in Google Charts

Using a Google charts table to display server exceptions, but the errors are too long for cells. How can I show only an excerpt of error messages in each cell with a + expansion sign for full details in a modal box on click? I have successfully implement ...

javascriptjqueryhtmlgoogle-visualization

Class-based React components are able to correctly update their state by referencing the previous state

In my React application, I am utilizing class based components. There is a checkbox that passes a string and a number value when it is checked. Currently, the state in my application looks like this: state = { checked: [], checkedWeight: 0, }; ...

javascriptreactjsreact-class-based-component

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

javascriptcssangulartypescript

Substitute the division

Can I make the old div change its position and move to the side when I add a new div? And can all the old divs be hidden when adding four new divs? This is for my full news website and I want this applied to all four pages. First page: https://i.sstatic. ...

javascripthtmljquerycss

Ionic 2: Image source not being updated

When working with Ionic 2, I encountered an issue where the src attribute of an <img> element was not updating inside the callback function of a plugin. Here is the template code: <img [src]="avatar_path" id="myimg" /> After using the Came ...

javascriptangularjscordovaionic-frameworkionic2

Creating a Form Input Field Based on a Selection List

I'm in the process of developing a small app to boost my productivity at work. Currently, I have some html/js code that includes a ul with a search filter. When I select an option, it opens a new tab with relevant text. Ideally, I want the outcome to ...

javascripthtmltextfilter

Discovering how to identify words separated by spaces within a full-text search query using regex in both PHP and JavaScript

When working with text, I need to detect words that are separated by spaces. For example, if my text is: some parent +kid -control "human right" world I want to only detect some, parent, and world. This means words without any special characters like +, ...

phpjavascriptregex

What is the best way to reset local state after triggering a success action in Redux Saga?

I'm looking to reset my component state after a successful call in redux saga. Is there a way to achieve this? Currently, I am using the component state to track my input value. this.state = { department: '', }; The solution I have im ...

javascriptreactjsredux-saga

Transform numbers into elements of an array and replace undefined with an empty array

Check out this Plunker example where a filter is implemented to allow select box options to be selected only once: http://plnkr.co/edit/BBqnTlxobUpiYxfhyJuj?p=preview .filter('arrayDiff', function() { return function(array, diff) { console.log ...

javascriptangularjsarrays

What is the best way to change the date format of a JSON string to a custom format?

Hello, I am seeking advice on how to convert a JSON string date from a response into the format of "8/24/2016". I attempted to use a dateFilter.js file, but encountered errors. Here is my attempted code: Below is the dateFilter.js code that resulted in an ...

javascripthtmlangularjsjsonng-filter

`Custom transitions between sections using fullpage.js`

Has anyone used the fullpage.js extension to achieve an animation similar to this one, where sections are destroyed on scroll? ...

javascriptcssvue.jswebglfullpage.js

Tips for incorporating local storage into Angular applications

After successfully creating a table using Angular, I decided to incorporate a local storage feature. Despite my efforts, I'm struggling with implementing gsklee/ngStorage and gregory/angular-local-storage libraries into my existing code. Could someon ...

javascriptangularjs

What is the best way to incorporate an immediately invoked function expression (IIFE) within the return statement of a React

I currently have a modal that pops up when the user clicks a button on my page and it's functioning perfectly: render() { return ( <div> <section> <button onClick={() => this.refs.simpleDialog.show()}> ...

javascriptreactjs

The Role of Polling in Redux Actions

I've been working on implementing polling in one of my Redux actions. Below is the action function I've written. It seems to be functioning correctly, but I'm facing an issue where even after the status changes from "updating" to the data be ...

javascriptreactjsreact-nativereduxpolling

Error: The reduce function cannot be applied to $scope.array as it is not a

I am currently facing an issue with a section of my code that involves loading attributes related to a page using drop-down lists. These attributes, namely instruments, style, and scoring, are fetched through a service call. For instance, when retrieving ...

javascriptangularjsarraysreduce