Using THREE.js TransformControls

Question

I am trying to use the THREE TransformControls class in a JSBin project that I am creating. Unfortunately, I cannot share my entire code. However, my JS code is within <script type="text/javascript"></script> HTML tags. All my imports are handled by <script src=""> </script> HTML tags. I have tried various source URLs for the TransformControls class to no avail.

I have imported the module using: <script src="https://threejs.org/examples/js/controls/TransformControls.js"></script> but I keep getting a "Script error. (line 0)" as soon as I create a new TransformControls object.

Here is my TransformControls code:

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

What am I doing wrong?

Disclaimer: I am very new to JavaScript and to THREE

score 0 · Accepted Answer · edited Apr 06 '23 at 16:23

Add crossorigin in your script tag

Code(Will work in 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> //<----here

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

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

Other helpful articles:

Just for knowledge:

runner-4.1.8.min.js:1 THREE.TransformControls: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/#manual/en/introduction/Installation.

Use

https://threejs.org/examples/jsm/controls/TransformControls.js

Hey @EP the solution I suggested is only for "Script error. (line 0)" error, Your other errors are not related. This seems to be a versioning mismatch. You can check https://stackoverflow.com/questions/59158103/starsgeometry0-setattribute-is-not-a-function and https://stackoverflow.com/questions/39099720/three-js-typeerror-three-scene-is-not-a-constructor — Dolly, Oct 22 '20 at 05:47

Using THREE.js TransformControls

1 Answers1