Getting the ThreeJs OrbitControl import version directly from the CDN

Using threejs from CDN and requiring OrbitControl as well, I encountered an issue with importing both Three and OrbitControl using the latest version 0.148.0:

import * as THREE from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f1b071d0a0a2f5f415e5b57415f">[email protected]</a>/build/three.module.js'
import {OrbitControls} from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdb9a5bfa8a88dfde3fcf9f5e3fd">[email protected]</a>/examples/jsm/controls/OrbitControls.js'

To resolve the issue, it was necessary to use version 0.126.1 for OrbitControl only:

import * as THREE from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b5f43594e4e6b1b051a1f13051b">[email protected]</a>/build/three.module.js'
import {OrbitControls} from 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5c1ddc7d0d0f5859b8487839b84">[email protected]</a>/examples/jsm/controls/OrbitControls.js'

Why is this the case? Thank you for your help as I am a beginner in this.

javascriptthree.jscdnorbitcontrols

Answer №1

If you're looking to import the latest versions of three.js, you'll need an import map. Update your imports as shown below:

import * as THREE from 'three';
{ OrbitControls } from 'three/addons/controls/OrbitControls.js';

Add this snippet to your HTML header:

<script type="importmap">
    {
        "imports": {
                "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc88948e9999bcccd2cdc8c4d2cc">[email protected]</a>/build/three.module.js",
                "three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f0ecf6e1e1c4b4aab5b0bcaab4">[email protected]</a>/examples/jsm/"
        }
    }
</script>

By following these steps, your imports will closely resemble those in the official examples.

The import map is essential for instructing the browser on how to resolve the bare module specifier three. For further details, refer to the official Installation guide.

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

What is the best way to position a tooltip near an element for optimal visibility?

One div is located on the page as follows: <div id="tip"> Text for tip goes here... </div> And another one can be found below: <div class="element"> Text for element goes here... </div> There is also a piece of JavaScript ...

javascriptjqueryhtmlcsshover

Retrieve information from an external JSON API using jQuery

I need help with reading JSON data using jQuery. I have tried the code below but it doesn't seem to be working. This is the link to my JSON file: and here is my code snippet: $.getJSON("http://goo.gl/PCy2th", function(data){ $.each(data.PlayList ...

javascriptjqueryjsonparsing

Unable to iterate through array using jQuery promise (when > then) due to issues with $.each and $.ajax

I have been experimenting with different approaches and searching for solutions without success. Currently, I am working with an array of users: var arr = ['tom', 'sally', 'jill', 'sam', 'john']; My goal ...

javascriptjqueryarraysajaxasynchronous

Unable to Delete Attribute in JavaScript

When I test the code snippet below in the Chrome console, it works perfectly fine. However, the code fails to work when I incorporate it into my JavaScript extension in Chrome. var region = document.getElementById("physicalDeliveryOfficeName"); region.rem ...

javascriptgoogle-chrome-extension

Tips for validating a string in a URL with Selenium IDE

When I click on a tab on my website, it triggers an AJAX service call where the URL contains parameters related to the data being loaded after the tab is clicked. The data is displayed as horizontal tiles one below the other, with 4 tiles being loaded pe ...

javascriptajaxseleniumintegration-testingselenium-ide

Stay dry - Invoke the class method if there is no instance available, otherwise execute the instance method

Situation When the input is identified as a "start", the program will automatically calculate the corresponding "end" value and update the page with it. If the input is an "end", simply display this value on the page without any modifications. I am in th ...

javascriptclassinstancedry

Tips for transferring the ID from one element to another using JavaScript

I'm attempting to create a slideshow using icons all within one class. The "active" style class will have an ID and represent the current picture. By clicking either the left or right button, I aim to change the style of the active class. const l ...

javascripthtmlcss

Execute a function once all images have finished loading

My current approach involves utilizing a function to load images from an array: for (var i = 0; i < images_list.length; i++) { var img = new Image(); img.onload = function() { images_objects.push(this); ...

javascriptjqueryhtml

What is the best way to horizontally align two React components?

I'm facing an issue with aligning two React components horizontally next to each other. I've been using Material-UI's Grid for alignment, but the components InputVariables and Chart are currently stacking on top of each other in two rows ins ...

javascriptreactjsmaterial-ui

When a parameter is passed into a React-Query function with an undefined value, it can lead to the API returning a 404 error

Two parameters are sent from the frontend to trigger a GET request in another TypeScript file. It seems that one of the parameters is not successfully passed due to unknown rerenders, resulting in a 404 Error being returned by the API call in the console. ...

javascriptreactjstypescriptreact-querytanstackreact-query

Getting the full referrer URL can be achieved by using various methods depending

I am currently working with ASP.Net. My goal is to retrieve the complete referrer URL when visitors arrive at my website from: https://www.google.co.il/webhp?sourceid=chrome-instant&rlz=1C1CHEU_iwIL457IL457&ion=1&espv=2&ie=UTF-8#q=%D7%90 ...

javascriptjquerycssasp.nethtml

Assigning an object to a field within an array using Vega-lite

I am currently working on an interactive data dashboard with a dataset stored in an array of objects. I want to enhance the functionality by displaying data from one object at a time instead of all objects collectively, which is already functioning well. T ...

javascriptarraysdata-visualizationvega-lite

Transforming user-entered date/time information across timezones into a UTC timezone using Moment JS

When working on my Node.js application, I encounter a scenario where a user inputs a date, time, and timezone separately. To ensure the date is saved without any offset adjustments (making it timezone-independent), I am utilizing Moment Timezone library. ...

javascriptnode.jsdatetimemomentjs

The shadows in Three Js are functioning correctly, although there are a few shadow lines visible below my model

I am currently in the process of modifying a three.js scene, despite having little experience with javascript and three.js. After successfully adding a shadow to my GLTF model, I noticed some yellow and red lines beneath the model that I cannot identify or ...

javascriptthree.jsgltf

Leveraging the $broadcast method within a $interval function in AngularJS

After extensively searching this site and using Google, I have been unable to find a solution. I have one module dedicated to services and another for the app itself. In the services module, I have the following code snippet: $interval(function(){ $ro ...

javascriptangularjs

The hidden attribute of UIWebView and its interplay with JavaScript

In the webViewDidStartLoad method, I hide the webview. Then a request is made. In the webViewDidFinishLoad method, I use stringByEvaluatingJavaScriptFromString. Finally, the webview is shown again. However, when I run the app, I can still see how the Java ...

javascriptiosuiwebviewuiwebviewdelegate

What is the process for sending a request to a static resource along with parameters?

I currently have a node.js restify server running, along with a folder containing static resources. const restify = require('restify') let server = restify.createServer() server.listen(8080, function () { console.log('%s listening at ...

javascriptnode.jsrestifystaticresource

Retrieve a dynamic value from an object

Is it possible to dynamically pass a context from the server to the client so that the client can retrieve a value from an object more efficiently? For example, the server sends an object with a key-value pair like this: "booking__validating_carrier_ ...

javascriptarraysjsonfor-loopobject

Utilizing cheerio to set outerHTML in HTML

Could someone kindly assist me with setting the outerHTML of an element using cheerio? I seem to be encountering some issues with this process. For example, let's consider the following HTML structure: <div class="page-info"> <s ...

javascripthtmlnode.jsnpmcheerio

Step-by-step guide on integrating Bulma page loader extension as a Vue component

Is there a way to integrate the Bulma-extension page-loader element as a Vue component in my project? I attempted to import page-loader.min.js and use it, but unfortunately, it didn't work as expected. <template> <div class="steps"> ...

javascriptvue.jsbulma