Error: Unable to instantiate THREE.OrbitControls as a constructor

As I delve into the world of three.js, I've encountered an issue that has me stumped. Despite declaring the use of OrbitControls.js (CODE1) and seeing it in the THREE tree in the DOM (Figure 1), I keep running into the error: "TypeError: THREE.OrbitControls is not a constructor" (Figure 2). It's a seemingly simple problem, but I can't seem to find a satisfactory solution.

CODE1 :***index.html***
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>

       <script src="js/libs/three.min.js"></script>
       <script src="js/cena.js"></script>
       <script src="js/libs/AxisHelper.js"></script>
       <script src="js/libs/GridHelper.js"></script>
       <script src="js/libs/OrbitControls.js"></script> 

    </script>
    </body>
</html>

https://i.sstatic.net/qPBdj.png

CODE2***:cena.js***

var cena = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderizador = new THREE.WebGLRenderer({antialias:true});

renderizador.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderizador.domElement );
//----------------------------


var geometry = new THREE.BoxGeometry( 3, 1, 2 );

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

var cube = new THREE.Mesh( geometry, material );

var axisHelper = new THREE.AxisHelper( 5 );
cena.add( axisHelper )
var tamanho = 10;
var elementos = 10;
var grid = new THREE.GridHelper(tamanho,elementos);
cena.add(grid);

cena.add( cube );

camera.position.z = 10;
camera.position.y = 10;
camera.position.x = 5;

var lookat_vector = new THREE.Vector3(0,0,0);
camera.lookAt(lookat_vector);
//++++++++++++++++++++++++++++++++++++++++++++++++++++++

var controle = new THREE.OrbitControls(camera, renderizador.domElement);

var render = function () {
        requestAnimationFrame( render );
        controle.update();
        cube.rotation.x += 0.01;
        cube.rotation.y +=0.01;
        cube.rotation.z +=0.03;

        renderizador.render(cena, camera);
        //controle.update();
    };

render();

https://i.sstatic.net/5LbGO.png

Answer №1

It is important to remember to include the necessary libraries and place your cena.js script at the end of your code. This will ensure that the script tags are loaded synchronously.

   <script src="js/libs/three.min.js"></script>
   <script src="js/libs/AxisHelper.js"></script>
   <script src="js/libs/GridHelper.js"></script>
   <script src="js/libs/OrbitControls.js"></script>
   <script src="js/cena.js"></script>

Answer №2

Make sure to add OBJLoader.js within the script tags before setting up THREE.OrbitalControls.

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

three.js: Determining the right time to translate or rotate geometry versus mesh transformations

When working on creating multiple STLs for 3D printing or milling, I also incorporate CSG and utilize raytracing to detect features of the models. My scene remains mostly static, with the need to only rearrange the models by moving them around. However, I ...

Making Node.js Wait Until a Function Completes its Execution

Currently, I am using a for-loop in Node.js to run the x() function from the xray package. This function scrapes data from webpages and then writes that data to files. The program works well when scraping around 100 pages, but I need it to handle around 10 ...

Navigating React: Learn the ins and outs of accessing and modifying state/attributes from a different component

Looking to update the attribute values of ComponentB from ComponentA (currently using an index). I attempted to call lower component functions to modify their state/values. import React from 'react' class TaskComp extends React.Component{ ...

Error: The gulp-cssmin plugin encountered a TypeError because it attempted to read the property '0' of a null

I am attempting to condense my code, but I am encountering this error: D:\gulp-compiler\node_modules\gulp-cssmin\node_modules\clean-css\lib\selectors\extractor.js:66 return name.replace(/^\-\w+\-/, ...

Fixing the Angular2 glitch: 'Uncaught TypeError: Cannot read property 'apply' of undefined'

Seeking solutions: How can I fix the "Uncaught TypeError: Cannot read property 'apply' of undefined" error that keeps showing up in the console of my Angular2 application? Any helpful insights are appreciated! ...

React JS issue with SVG linearGradient not displaying accurate values

Within my component, I am working with SVG paths and a linearGradient value passed down from the parent component through static data. The properties 'startColor' and 'stopColor' are used to define the gradient colors for each element. ...

What is causing the recurring failure of file input changes to take effect?

Here is the code snippet I'm working with: <input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" /> Along with the handler function: public onFileSelected(e: Fi ...

Discovering the summation of chosen options multiplied by input fields with the assistance of jQuery

I am attempting to calculate the average for different subjects and print it immediately whenever the user modifies a value. To input the marks, I am using input fields and corresponding select options for the hours allotted to each subject. I can accura ...

What is the process for implementing a title search filter in Vue.js?

Hey there, hoping you're having a good night! I've been trying to set up a bookstore using Vue.js with code retrieved from a Json api. However, I'm encountering some issues with the "computed" property. Here's the code snippet: new Vue ...

Offering fields for modules, main, and browser that meet the needs of ESM, CommonJS, and bundlers

I have upgraded a number of my published npm packages to include both commonjs and esm builds. Some of these packages are meant for use in both node and the browser, and they are all compiled using webpack or rollup. Additionally, all of them are written i ...

Guide to modify target blank setting in Internet Explorer 8

<a href="brochure.pdf" target="_blank" >Click here to download the brochure as a PDF file</a> Unfortunately, using 'target blank' to open links in a new tab is not supported in Internet Explorer 8. Are there any alternative solutio ...

Exploring Vue Slots: A guide to parsing and rendering slot components

Currently facing a challenge while developing a web page using Vue, specifically with parsing and rendering the child components inside the <slot>. I need to extract the slot content, convert it into an array of components, and display these compo ...

Tips for entering multiple values in an input field

I am attempting to implement a feature where multiple names can be added from an autocomplete drop-down menu to an input field, similar to the example shown below: https://i.sstatic.net/D4hGA.jpg Here is what I aim to create: Upon selecting an item from ...

Test fails in Jest - component creation test result is undefined

I am currently working on writing a Jest test to verify the creation of a component in Angular. However, when I execute the test, it returns undefined with the following message: OrderDetailsDeliveryTabComponent › should create expect(received).toBeTru ...

Determine whether a directive possesses a specific attribute

Here is my current code snippet: <my-directive></my-directive> I am trying to include a ternary operation within it like this: {{ $scope.my-option ? 'YES' : 'NO' }} Is it possible to achieve the desired result by adding ...

Missing ghost image appears when you drag and drop the file

New to JavaScript... As a rookie in coding, I often get interesting requests from my partner who is a kindergarten teacher. Recently, she asked me to create a "Function Machine" for her classroom activities. With some trial and error, I managed to put tog ...

Is there a method to programmatically clear cache in an Angular 7 application?

I am facing an issue with my component that lazy loads images. The first time the page loads, the images are displayed using lazy loading. However, if I refresh, reload, or close and reopen the tab, the images are pre-loaded from the cache. Is there a wa ...

Uh oh! You haven't set a QueryClient yet. Make sure to use QueryClientProvider to set

My first experience with React Query didn't go as planned when I encountered this error at the beginning of my React app: Even though I added QueryClientProvider to the top of my component tree, I kept getting: Error: No QueryClient set, use QueryCli ...

The functionality of WrapAll is not functioning properly in React JS

$('p').wrapAll($('<div class="wrapper"></div>')); .wrapper { background: #EEE; margin: 10px; padding: 5px; border: 1px solid black; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery. ...

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...