THREE.js中TransformControls导入失败问题求助

核心原因 #

TransformControls 不属于 THREE.js 核心库，是官方示例提供的扩展控件，直接通过 THREE.TransformControls 调用必然找不到构造函数，得用正确的导入方式。

不同场景的解决步骤 #

1. CDN 加载场景

先加载 THREE.js 核心库，再额外引入同版本的 TransformControls 脚本：

<!-- 替换[你的版本]为实际使用的THREE.js版本，比如0.160.0 -->
<script src="https://cdn.jsdelivr.net/npm/three@[你的版本]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@[你的版本]/examples/jsm/controls/TransformControls.js"></script>

使用时直接调用全局的 TransformControls，或者用模块导入：

// ES模块方式（需在script标签加type="module"）
import { TransformControls } from 'three/addons/controls/TransformControls.js';

// 实例化控件
const transformControls = new TransformControls( camera, renderer.domElement );
scene.add( transformControls );

2. npm 项目场景

从 three/addons/controls/TransformControls.js 路径导入（r147及以后版本用这个路径，旧版本换成 three/examples/jsm/controls/TransformControls.js）：

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

// 实例化并添加到场景
const transformControls = new TransformControls( camera, renderer.domElement );
scene.add( transformControls );

3. 本地文件引入场景

从 THREE.js 压缩包的 examples/jsm/controls 目录下复制 TransformControls.js 到你的项目目录，再按顺序引入：

<script src="./path/to/three.min.js"></script>
<script src="./path/to/TransformControls.js"></script>

之后直接用 TransformControls 构造函数实例化即可。

排查要点 #

• 版本匹配：TransformControls 的版本必须和 THREE.js 核心版本完全一致，版本不兼容会直接报错。
• 路径检查：不管是CDN还是本地文件，路径写错会导致控件脚本加载失败，进而找不到构造函数。
• 模块支持：用 import 方式时，要确保项目支持ES模块（比如HTML的script标签添加 type="module" 属性）。

内容的提问来源于stack exchange，提问作者秦时微雨