Three.js - 如何将导入方法转换成常规js文件

Question

在这个小提琴https://jsfiddle.net/k2c5upfo/1/ 上，外部模块是使用导入方法调用的。我不在我的项目中使用节点。我想将所有这些导入文件转换为常规的 javascript 文件。如何在不使用 node.js 的情况下构建它们？

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.118.2/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.118.2/examples/jsm/controls/OrbitControls.js";
import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/three@0.118.2/examples/jsm/postprocessing/EffectComposer.js';
import { ShaderPass } from 'https://cdn.jsdelivr.net/npm/three@0.118.2/examples/jsm/postprocessing/ShaderPass.js';
import { RenderPass } from 'https://cdn.jsdelivr.net/npm/three@0.118.2/examples/jsm/postprocessing/RenderPass.js';
import { ClearPass } from 'https://cdn.jsdelivr.net/npm/three@0.118.2/examples/jsm/postprocessing/ClearPass.js';
import { MaskPass, ClearMaskPass } from 'https://cdn.jsdelivr.net/npm/three@0.118.2/examples/jsm/postprocessing/MaskPass.js';
import { CopyShader } from 'https://cdn.jsdelivr.net/npm/three@0.118.2/examples/jsm/shaders/CopyShader.js';

例如，我只需添加另一个文件即可在旧版本的 three.js 上调用“OrbitControls.js”。我还能用这个方法吗？谢谢

编辑：

我设法使用 es6 模块转换了我的工作流程。我一直想知道是否有办法只导入特定的模块。我生成的输出文件与这两条不同的行具有相同的权重。

import {Scene, PerspectiveCamera, WebGLRenderer, CylinderBufferGeometry, MeshNormalMaterial, Mesh} from "../node_modules/three/build/three.module.js";

import * THREE from "../node_modules/three/build/three.module.js";

有没有办法在我的最终输出中只包含我需要的部分代码？谢谢。

Answer 1

自r117 以来，实际上已弃用全局脚本。年底了，使用 ES6 模块是导入示例文件的唯一途径。

我没有在我的项目中使用节点。

不确定我是否理解这句话。上述小提琴与node.js 无关。您可以直接在 HTML 文件中导入 ES6 模块，只要将导入语句放入如下所示的脚本标记中：

<script type="module">
</script>

官方示例也使用了这种方法。