The OrbitControls feature in Three.js seems to be malfunctioning

When I try to execute the script, an error message appears in the console saying "THREE.OrbitControls is not a constructor".

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

What am I doing wrong? The code I used was taken from a manual.

var controls;
    controls = new THREE.OrbitControls( camera );
    controls.addEventListener( 'change', render );

var render = function () {
    requestAnimationFrame( render );
    renderer.render(scene, camera);
                //Window size manipulated here!
    renderer.setSize(window.innerWidth - 20, window.innerHeight - 20);                  

};

    var animate = function () {
        requestAnimationFrame( animate );
        controls.update();                  
    };


var geometry1 = new THREE.BoxGeometry( 10, 10, 10);
var material = new THREE.MeshPhongMaterial( {specular: "#fdfb57", color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide} );
var box = new THREE.Mesh(geometry1, material);


scene.add(box);   

camera.position.z = 50;


render();   
animate();

Answer №1

To ensure proper functionality, be sure to incorporate OrbitControls into your application. Here's an example of how to do so:

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09583dd9d9f94859c95">[email protected]</a>/dist/es-module-shims.js"></script>
    
<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three/build/three.module.js",
            "three/addons/": "https://unpkg.com/three/examples/jsm/"
        }
    }
</script>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

Additionally, make sure to review the comments in the three.js OrbitControls example thoroughly to understand its usage.

controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)

and remember to use

controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true

https://github.com/mrdoob/three.js/blob/dev/examples/misc_controls_orbit.html

Version: three.js r.147

Answer №2

Encountered a similar issue with my webpack build involving the three library

var THREE = require('three')
THREE.OrbitControls === undefined  // true

To resolve, I decided to install a third-party orbit control plugin

npm install three-orbit-controls

More information can be found here: https://github.com/mattdesl/three-orbit-controls

After installing, I made the following adjustments to the code snippet above

var THREE = require('three')
var OrbitControls = require('three-orbit-controls')(THREE)
OrbitControls === undefined  // false

It may not be the perfect solution, but replacing THREE.OrbitControls with this method proved effective ;)

Answer №3

Click here to access the GitHub repository for three-orbitcontrols-ts.

To install, run:
npm install --save three-orbitcontrols-ts
import { OrbitControls } from 'three-orbitcontrols-ts'

If you are using Angular, remember that orbitcontrols should be installed separately. This issue has been causing frustration for me over the past few days.

Answer №4

I encountered the same issue, which was likely due to placing it on the wrong line. You should insert it below this line:

document.body.appendChild( renderer.domElement );

Next, you will need to add orbit controls:

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', posUpdate );
controls.update();

If this does not resolve the problem, download the script file from this link

<script src="OrbitControls.js"></script>

Answer №5

Dealing with a similar issue led me to conduct extensive research, and I found that the following solution was effective:

The sequence in which you include OrbitControls in your HTML is crucial as it relies on specific dependencies from Three.js.

Ensure that the order is as follows:

<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>

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

Confused between Javascript and PHP? Here's what you should consider!

Looking for a solution to transfer a string from JavaScript, obtained from the content of a div, to PHP in order to create a text file with this information. What would be the most effective approach to accomplish this task? Edit[1]: Using the Post ...

Creating visuals from written content

I am attempting to transform Y[0] into an image rather than text. Currently, it is only displayed as a plain text link and not as an image. <html> <head> <script type="text/javascript"> function modifyContent(){ var rows=document.g ...

Attempting to integrate the Angular2 module text-mask-addon into the project

Currently, I am in the process of integrating text-mask-addons into my Angular application. You can find more information at https://github.com/text-mask/text-mask/tree/master/addons Despite attempting to follow the npm links suggestion, I am encountering ...

TypeScript is unable to recognize files with the extension *.vue

Can someone assist me with an issue I'm facing in Vue where it's not detecting my Single File Components? Error message: ERROR in ./src/App.vue (./node_modules/ts-loader!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Ap ...

Is it limited to using url routes for clients to communicate with servers in a node.js web application?

Utilizing the Rest API allows the client to interact with the backend through URL routes. When the page loads, the route can be used directly, and ajax requests can be made without reloading the page. Both methods use URL routes to send a request to the se ...

Having trouble with the react event handler for the renderedValue component in Material UI?

I am facing an issue while trying to utilize the onDelete event handler within the chip component using Material UI in the code snippet below. Upon clicking on the chip, it triggers the Select behavior which opens a dropdown menu. Is there a way to modif ...

Error: The 'data' property cannot be found in the Redux action due to type 'void' restrictions

While attempting to carry out this action, I am encountering an issue where the data variable is returning as undefined, even though the backend is providing the correct data in response. Additionally, a TypeScript error is displayed stating Property &apos ...

Is there a way to assign a unique scrollTop value for a specific scrollspy location?

I have a custom script that tracks the current position within a menu and applies an active class to it. However, I require specific rules for the ID contact_form. Specifically, I need to add 1000px to the scrollTop value for that particular ID location. ...

Changing the style.backgroundImage property overrides any image transition effects

I am currently working on creating a button for a player. You can check out the video (here) The button works, but in order to give it a "pressed" effect, I have to change its background-image on click. However, this action seems to override the transitio ...

Utilize HTML5 and Javascript to easily upload files from your desktop through the drag and drop feature

I have created a drag and drop functionality for uploading images from the desktop to the browser. When I drop the image inside the designated box, I can view the image details in the browser console: File { name: "deam230mthumb.jpg", lastModified: 119464 ...

When a block is clicked, jQuery will reveal that block while hiding the others sequentially, starting with the second block, then the third, and finally the fourth

Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...

When it comes to using jQuery, I find that it only functions properly when I manually input the code into the Google Chrome console. Otherwise

Below is the HTML snippet: <textarea cols="5" disabled id="textareRSAKeypair"> @Model["keypair"] </textarea> <a href="#" class="btn btn-primary" id="downloadKeypair">Download Key</a> Here is the jQuery code: <script src="ht ...

Ensure that the nested div maintains its height consistently across all three columns

In my layout, I am trying to achieve uniform height for three columns, each containing the same sections like title and address. Not only do I want the cards to have the same height, but also the nested sections should maintain equal heights. For instance, ...

Discovering the pixel value of scrolled distance (scroll delta) using jQuery scroll event

Here's the issue I'm facing: $(window).scroll(function(e){ console.log(e); }) I'm trying to figure out how much I've scrolled in pixels. It seems like the scroll value may be influenced by the window size and screen resolution ...

What is the best way to extract all ID, Name values, and locations from my JSON object and store them in an

I am working with a JSON object named 'tabledata' array. Let's say I want to iterate through all the objects inside it and extract the ID values, so the output would be 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. I also need to access other key-value pai ...

Ways to alter the div post user authentication

I'm in the process of developing a website with a single-page application setup. I'm utilizing Node.js for the backend and Angular for the frontend. The challenge I'm facing is displaying a specific div when a user is not logged in, and swit ...

Issue related to conflicting jQuery references and receiving multiple versions of jQuery simultaneously

Despite having only a reference to jQuery version 1.9.1 in the scripts, version 1.8.2 is somehow being added to the solution. The script used to add it is: bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); Althou ...

Can JavaScript/JQuery be used to dynamically alter the color of a dropdown menu or change the color of list items when a radio option is selected?

Is it possible to enhance the functionality of my code that currently selects a radio option and automatically changes the dropdown box? Can I also make the selected dropdown item change color, such as blue for 'Work', green for 'Grocery&apo ...

Locate elements within an array based on certain internal characteristics

I have an array of objects that contain a property called "distributionChannel". I need to find objects within the array that have a value of "sellChannel" for the key in the "distributionChannel" property. Here is my array: [ { "lineItems": [ ...

Leveraging jQuery to implement onclick functionality within a Jinja2 loop

I'm currently working with Python, Flask, and Jinja2. When using a for loop, I want to be able to click on the {{ place.place_photo }} element to toggle its details. Initially, I had it functioning correctly but ran into an issue where clicking on on ...