如何在CodeSandbox等在线平台运行指定three.js实例化性能演示

可搜索的解决关键词 #

你可以通过以下关键词找到同类问题的参考方案：

• three.js ESM import CDN online editor
• three.js examples jsm CDN path
• three.js 在线平台 模块导入报错

核心问题原因 #

官方示例采用相对路径导入ES模块的开发模式，你需要将所有相对路径的导入统一替换为同版本的CDN路径，同时保证在线编辑器开启ES模块支持即可正常运行。

具体修改步骤 #

1. 统一资源版本
   所有three.js核心库、控制器、加载器等附加组件必须使用相同版本的CDN资源，避免跨版本API不兼容报错，推荐使用unpkg的官方同步资源。
2. 替换核心库导入
   将示例中原本的相对路径核心库导入：
   import * as THREE from './build/three.module.js'
   替换为对应版本的CDN路径，示例如下：
   import * as THREE from 'https://unpkg.com/three@0.158.0/build/three.module.js'
3. 替换附加组件导入
   将示例中所有./jsm/开头的相对路径导入，统一替换为CDN前缀，例如原本的：
   import { OrbitControls } from './jsm/controls/OrbitControls.js'
   替换为：
   import { OrbitControls } from 'https://unpkg.com/three@0.158.0/examples/jsm/controls/OrbitControls.js'
4. 在线编辑器配置

• CodeSandbox：直接将js文件作为ES模块引入即可，无需额外配置
• CodePen/JSFiddle：在JS设置中开启type="module"属性，或选择ES模块模式

最小可运行参考代码 #

import * as THREE from 'https://unpkg.com/three@0.158.0/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three@0.158.0/examples/jsm/controls/OrbitControls.js';

// 下方直接粘贴官方示例的业务逻辑代码即可
let camera, scene, renderer, controls;
const amount = parseInt( window.location.search.slice( 1 ) ) || 10;
const count = Math.pow( amount, 3 );
// ... 其余官方示例代码

内容的提问来源于stack exchange，提问作者StephD