How can I make Requirejs and Threejs OrbitControls work together?

Having trouble implementing OrbitControls with requirejs.

Here's my configuration:

I attempted to follow guidance from this post on Stack Overflow RequireJS and THREE.js Orbit Controls, but it's not working.

requirejs.config({
    baseUrl: './js',
    deps: ['main'],
    paths: {
        threejs: 'three/three.min',
        orbitControls: 'three/controls/OrbitControls',
    },
    shim: {
       'threejs': {
            exports: 'THREE'
        },
        'orbitControls': {
            deps: ['threejs']
        }
    }
});

Next, I define THREE in main.js I also referenced a GitHub post at https://github.com/mrdoob/three.js/issues/9602

define('threejs', function ( THREE ) {
    window.THREE = THREE;
    return THREE;
});

Then I'm trying to use OrbitControls in my scene

var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);

But I'm encountering an error:

Uncaught TypeError: THREE.OrbitControls is not a constructor

I'm uncertain if I need to include orbitControls in the define section of my class

define(['orbitControls'], function() {
    var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
})

However, attempting this results in an error:

Uncaught ReferenceError: THREE is not defined

Despite the rest of the scene rendering correctly with THREE defined.

If anyone has successfully configured this and could offer some guidance, I would greatly appreciate it.

Answer №1

Discovered the solution to making it work and eager to share with others.

Initially, I had to enclose the OrbitControls.js with a simple require define function

define(['threejs'], function(THREE) {
    /* OrbitControls.js */
});

Next, the class using the controls must specify 'orbitControls'

define(['orbitControls'], function() {
    var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
});

Finally, the addEventListener needs to be adjusted as follows:

controls.addEventListener('change', function() {
                render();
                return false;
            });

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

Why does this switch case statement fail to effectively replace the elements of the text in order to unravel this JavaScript problem?

Question I need help converting special characters to HTML entities in a string: &, <, >, " (double quote), and ' (apostrophe). My Code function convertHTML(str) { let tempArr = ['a']; let newArr = []; let regex ...

Can the details of a package be retrieved from a Nuget private store using a REST API?

Currently working on an Angular 8 project that involves displaying the details of Nuget packages from a custom store. I am wondering if it is possible to retrieve package details from an NPM custom store using a REST API? Something similar to: https://lea ...

Material-UI's JSS does not adhere to the justify content property

Having trouble aligning elements in my React app using material-ui 1.0 and its JSS solutions. The code I've written below should center justify, but it's not working no matter how I configure it. I suspect there might be a naming issue since mat ...

How to Safeguard an AJAX Service Request using jQuery and PHP (with a Session Token)

Currently, I am developing a framework where form submissions are handled through jQuery ajax calls to a .php service file. Here is a snippet of the jQuery code for reference: var dataSerialized = $(form).serialize(); var service = $(form).attr("action") ...

Does Vue3 support importing an HTML file containing components into a single file component (SFC)?

I am working on a Form-Component (SFC) that is supposed to import an HTML file containing Vue components. Form-Component <template src="../../../views/form-settings.html"></template> <script setup> import Button from "./. ...

The function array.push() is not achieving the intended outcome that I had in mind

Currently facing a rather frustrating issue. I'm attempting to utilize D3.js for dynamically plotting data (specifically, scores of individuals). Retrieving record data from a firebase database whenever changes occur - this is represented by an obje ...

Are there JavaScript counterparts to the constant strings in Python?

In my search for a Javascript equivalent to the constant string ascii_lowercase 'abcdefghijklmnopqrstuvwxyz', I have come up empty-handed. However, I am more than willing to create it myself. Having found this feature useful in Python, I am curi ...

Nodemon failing to trigger auto-refresh

My journey with learning node.js using nodemon has hit a roadblock. Despite following tutorials and installing everything exactly as shown, I'm facing an issue. Whenever I enter 'nodemon index.js' in the terminal, it hosts properly but any c ...

How can I use lodash to iterate through and remove whitespace from array elements?

I am currently working on a project involving demo lodash functionality, and I have encountered some unexpected behavior. Within an array of cars, there are various non-string elements mixed in. My goal is to iterate through each element of the array, rem ...

Adding a context menu to a Leaflet map

Could someone provide guidance on how to add a custom context menu to a Leaflet map in Vue 3? I am currently utilizing [email protected], @vue-leaflet/[email protected], and experimenting with [email protected]. Here is a snippet of my code: ...

Fetching JSON data using Javascript/JQuery

My goal is to access JSON data from an online web service that queries a MySQL database for a specific string and use Javascript to present it on an HTML page. My challenge lies in effectively displaying the retrieved information. The relevant part of my ...

Header-driven redirection

I am using node js and express js. My goal is to ensure that if app.get does not have a token parameter, then an html file with js will be uploaded to pass the token. If the token is passed, then another html file should be displayed. However, I am unsure ...

Deliver varied asset routes depending on express js

I have a situation where I am working with express routes for different brands. My goal is to serve two separate asset directories for each brand route. One directory will be common for all brand routes, located at public/static, and the other will be spec ...

Updating DOM elements in AngularJS based on search results and user clicks

I have a query regarding my angular web app, which includes an ajax call for json-formatted dates to display them in a table. The app features a search input, two sorting buttons (for age or name), and a profile sidebar element. I have successfully update ...

Sending a variable using the onchange function in jQuery

I have written a script to toggle the visibility of different divs based on selection var folder; $(function() { $('#teamleag').change(function() { if ($('#teamleag').val() == 'footballal') { $('# ...

Controlling multiple bx-sliders with a single pager using only JavaScript

Is there a way to control 3 sliders using the same pager? I attempted to use the following code but it did not work: <script language="javascript"> $('.mobile_left_mble,.mobile_right_mble,.text_btn').bxSlider({ //pagerCustom: '#bx- ...

Tips for creating a blur effect on all options except for the selected 2 out of 4 using jQuery

My goal is to choose 3 options from a list and once 3 options are selected, all other options will be blurred to prevent further selection. Please review the code snippet I have provided below. Link to File <!DOCTYPE html> <html> <head> ...

Adjust the appearance of "FAQS" to show as "FAQs" in Lodash

I've integrated the lodash library - a powerful JavaScript utility tool - into my AngularJS project. <div ng-repeat="question in questions"> <label>{{question | startCase}}</label> </div> If you want to learn more about th ...

Exploring the possibilities: Establishing a Connection between Node.js and MySQL

I encountered an issue while attempting to connect node.js to MySQL. Despite having installed MySQL and the necessary libraries, I am unable to establish a connection. How can I troubleshoot this error? Additionally, what is the best approach for retrievin ...

Add a unique identifier to a table row in a jQuery/AJAX function without the need for a looping structure

My PHP query retrieves client data and generates a table with rows for each client. Each row contains a link with a unique ID attached to it. Clicking on this link triggers an AJAX function based on the client's ID, which opens a modal displaying info ...