使用 THREE.js TransformControls答案

【问题标题】：Using THREE.js TransformControls使用 THREE.js TransformControls
【发布时间】：2020-10-22 02:15:59
【问题描述】：

我正在尝试在我正在创建的 JSBin 项目中使用三个 TransformControls 类。不幸的是，我不能分享我的整个代码。但是，我的 JS 代码在 <script type="text/javascript"></script> HTML 标签内。我所有的导入都由<script src=""> </script> HTML 标签处理。我尝试了 TransformControls 类的各种源 URL，但均无济于事。

我已使用：<script src="https://threejs.org/examples/js/controls/TransformControls.js"></script> 导入了模块，但在创建新的 TransformControls 对象后，我不断收到“脚本错误。（第 0 行）”。

这是我的 TransformControls 代码：

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 );

我做错了什么？

免责声明：我是非常 JavaScript 和三个方面的新手

【问题讨论】：

标签： javascript three.js jsbin

【解决方案1】：

在脚本标签中添加跨域

代码（将在 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>

其他有用的文章：

只是为了知识：

runner-4.1.8.min.js:1 THREE.TransformControls：作为向 ES6 模块过渡的一部分，“examples/js”中的文件已于 2020 年 5 月 (r117) 弃用，并将于 2020 年 12 月删除(r124)。您可以在https://threejs.org/docs/#manual/en/introduction/Installation 中找到有关使用 ES6 模块进行开发的更多信息。

使用

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

【讨论】：

嘿@EP 我建议的解决方案仅适用于“脚本错误。（第 0 行）”错误，您的其他错误与此无关。这似乎是版本不匹配。你可以查看stackoverflow.com/questions/59158103/…和stackoverflow.com/questions/39099720/…
谢谢@Dolly - 如果有时间我会再试一次