Leveraging the power of THREE.js TransformControls

I am currently working on a project in JSBin and attempting to incorporate the THREE TransformControls class. Due to constraints, I am unable to share my full code, but my JavaScript is contained within 

<script type="text/javascript"></script>
HTML tags. All imports are managed by 
<script src=""> </script>
HTML tags. Despite trying different source URLs for the TransformControls class, I have been unsuccessful.

The module has been imported using: 

<script src="https://threejs.org/examples/js/controls/TransformControls.js"></script>
but upon creating a new TransformControls object, I consistently encounter a "Script error. (line 0)" message.

Below is a snippet of my TransformControls code:

var tC = new THREE.TransformControls(camera, renderer.domElement); // this line triggers the error
var cC = new THREE.OrbitControls(camera, renderer.domElement); // camera controls functioning properly
tC.addEventListener( 'mousemove', render );

Where might I be going wrong?

Disclaimer: My knowledge of JavaScript and THREE is extremely limited

javascriptthree.jsjsbin

Answer №1

Make sure to include the crossorigin attribute in your script tag

Sample code snippet (Works on jsbin):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js" crossorigin="anonymous"></script> //<----add crossorigin here

  <script type="text/javascript" src="https://threejs.org/examples/js/controls/TransformControls.js" crossorigin></script> //<----and here

</head>
<body>
    <canvas id="myCanvas"></canvas>
  <script>
    //import {TransformControls} from "https://threejs.org/examples/jsm/controls/TransformControls.js";
    var tC= new THREE.TransformControls(); //<-- this is just a partial code for illustrative purposes
  </script>
</body>
</html>

Additional resources:

Just to keep in mind:

runner-4.1.8.min.js:1 THREE.TransformControls: In line with the shift towards ES6 Modules, the files located in 'examples/js' were marked obsolete in May 2020 (r117) and will be removed by December 2020 (r124). For more information on working with ES6 Modules, visit .

Use

https://threejs.org/examples/jsm/controls/TransformControls.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

Printing reports in Angular 9

I have a requirement in my Angular 9 application to generate and print reports. 1. I am looking for suggestions on how to handle printing reports where a user triggers the action by clicking a button, and the report data needs to be fetched from the datab ...

javascriptangulartypescriptreportangular9

"Troubleshooting: Issues with jQuery Counter Functionality

Hey there, I'm new to JavaScript and jQuery! I've got this form set up with Bootstrap's disabled class: Note: the 'disabled' class in bootstrap properly disables and enables the button based on conditions. <form action="" met ...

javascriptjqueryhtmltwitter-bootstrap

Connecting subscribe functions in Meteor React Native

I've been working on a react native app using meteor and the library react-native-meteor. I've run into an issue where I need to make a series of calls one after the other, such as signing in, subscribing to data, and so on. In my actual code, i ...

javascriptmeteorreactjsreact-native

Finding the distance between two points in JavaScript requires a simple formula

Here is a code snippet that generates two TRACER points and displays them on a map, as well as shows the union between the two points. <?php $latitudInicio = $_GET['latitudInicio']; $longitudInicio = $_GET['longitudInicio']; $latit ...

javascriptgoogle-maps

Retrieve the $http data from a function that is external to it

Apologies if the title is confusing, it's hard to explain in a different way. The situation I have is... app.controller('viewProductController', ['$scope', 'dataFactory', '$routeParams', function($scope, dat ...

javascriptjqueryangularjs

Mongoose throwing an UnhandledPromiseRejectionWarning due to an undefined issue

I am encountering a warning in my console while attempting to authenticate users using Mongoose: (node:20114) UnhandledPromiseRejectionWarning: undefined (node:20114) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated ei ...

javascriptnode.jsmongoosepromise

What is the best way to list the choices associated with a specific category?

The Node.js package I'm currently working with requires an argument of a specific type, which I can see is defined through a TypeScript declaration as follows: export declare type ArgType = 'A' | 'B' | 'C'; I am interes ...

javascriptnode.jstypescripttypes

The inability to read property 0 of undefined persists despite implementing conditional rendering

I'm struggling to understand what mistake I'm making in the current situation: There's an array named arrayOfChildren that gets initialized like this: const [arrayOfChildren, setArrayOfChildren] = React.useState([]) With a handler function ...

javascriptreactjs

Steps to generate a fresh array from a given array of objects in JavaScript

Looking to transform an existing array into a new array of objects in Vue.js. Here's the initial array : import { ref } from 'vue'; const base_array = ref([ {id: 1, name: Pill, timing: [morning, noon, evening, night]}, {id: 2, name: Ta ...

javascriptarraysvue.js

The partial sphere geometry in THREE.js unexpectedly yields two segments when only one segment was anticipated

Exploring the creation of partial sphere shapes using the additional features of the THREE.SphereGeometry constructor. // material var dish_material = new THREE.MeshLambertMaterial( { color: 0x00ffff, side: THREE.DoubleSide, ...

three.jsgeometry

Exploring the creation of a dynamic graph with d3.js

I'm new to d3 and attempting to create a graph layout. var w = 1000; var h = 500; var dataset = { nodes: [{ name: 'Alice' }, { name: 'David' ...

javascriptd3.jsforce-layoutdirected-graph

How to initiate a click event with JavaScript through C# in a WebBrowser control

Can the click function be triggered from a C# application? Below is the code that defines the function: $('#connectbtn').unbind('click').attr('disabled', false); $('#connectbtn').bind('click', ...

c#javascriptclickwebbrowser-control

What are the steps to effectively utilize <ul> for showcasing scrolling content?

I stumbled upon and found it to be a great inspiration for my project. I tried replicating the layout of the listed items on the site: .wrap { display: block; list-style: none; position: relative; padding: 0; margin: 0; border: ...

javascripthtmlcss

Why is the header image not appearing on mobile devices on the website?

I recently finished creating my own website with a header image that successfully expands to the width of the screen during testing on Google Chrome for mobile responsiveness. However, upon deploying and viewing the site on actual mobile devices, the heade ...

javascripthtmlcss

What is the correct way to set up the Suspense position within a Canvas?

Looking to adjust the position of a 3D model within a Canvas based on the x, y, and z axes? <div> <Canvas shadows dpr={[1, 2]} camera={{position: [5, 50, 5], fov: 10}}> <Suspense fallback={null}> <Model/> < ...

javascriptreactjscanvasthree.jsreact-three-fiber

What is the best way to start the server when the files are located in separate directories?

I have organized my project into two separate folders, one for the client and one for the server Is there a way to use npm start to simultaneously run both the frontend and backend scripts? Check out the screenshot below: View of Two Folders in my Projec ...

javascriptnode.jsnpmnpm-install

The getSession provided by the getSession function is accessible within getServerSideProps but appears as undefined within the component

Whenever I try to log the session variable inside the Dashboard component, it comes back as undefined. However, when I log it inside the getServerSideProps function, it returns the correct details. Am I missing something here? Objective: My goal is to fet ...

javascriptreactjsauthenticationnext.jsnext-auth

guide on updating JQuery string with JavaScript to incorporate new parameters

Similar Question: How to replace only one parameter or fast with Jquery on Jquery String The website has a query string as follows: http://www.nonloso.html/?nome1=pollo&cognome1=chicken&nome2=a&cognome2=b&nome3=c&cognome3=d This ...

javascriptjqueryajaxhtml

Utilizing inline JavaScript to automatically refresh a webpage at specified intervals and monitor for updates within a specific div element

I am currently working on creating an inline script that will automatically refresh a webpage at regular intervals and check for changes in a specific element. If the element meets certain criteria, then the script should proceed to click on a designated b ...

javascripthtmlreloadintervals

What is the method to prevent the Submit Button from being active in CSS specifically on Firefox?

When I click this CSS in webpages on Chrome (OS: Windows), it works fine. However, Firefox (OS: CentOS7) does not seem to apply this CSS on webpages. How can I resolve this issue? Should I make adjustments in the CSS code below? #submit .btn.btn-primary ...

javascripthtmlcss