交互方式
鼠标交互
Three.js 提供了丰富的鼠标交互功能，使用户可以通过鼠标事件对3D模型进行多种操作，通过鼠标拖拽可以改变模型的位置或角度，实现模型的旋转、缩放等操作，这种交互方式非常直观，用户只需点击并拖动鼠标即可完成复杂的操作，Three.js 还支持鼠标滚轮操作，用户可以通过滚动鼠标滚轮来放大或缩小模型，提供更加细致的观察视角。
触摸交互
对于支持触摸屏的设备，Three.js 也提供了触摸交互功能，通过触摸事件，用户可以在触摸屏上实现类似鼠标的操作，如手指滑动、捏合等，这些操作可以控制模型的移动、旋转和缩放，使得在移动设备上的用户体验同样流畅和自然，触摸交互的引入极大地扩展了 Three.js 的应用场景，使其在移动端也能发挥出色的作用。
键盘交互
Three.js 还支持通过键盘事件控制模型的各种操作，用户可以通过按下方向键来控制模型的移动方向，或者使用其他按键来实现旋转和缩放操作，键盘交互为用户提供了另一种便捷的操作方式，特别是在需要精确控制模型位置和角度时，键盘操作往往比鼠标更加高效和准确。
点击交互
通过点击模型或场景中的其他元素，用户可以触发特定的操作，点击按钮可以改变模型的颜色或材质，或者触发动画效果，点击交互使得用户能够与场景中的元素进行直接互动，增加了应用的趣味性和互动性。
交互控制器
Three.js 提供了一些预定义的交互控制器，如 OrbitControls 和 TrackballControls，这些控制器可以方便地实现模型的旋转、缩放和平移等操作，用户只需简单的配置和使用这些控制器，即可为模型添加复杂的交互功能，OrbitControls 允许用户以第一人称视角的方式查看模型，提供了更加沉浸的体验。
拾取（Picking）
通过射线拾取技术，Three.js 可以实现对模型的选择和交互，当用户点击某个模型时，Three.js 会通过射线与模型进行交点计算，确定用户点击的具体位置，从而触发相应的操作，这种技术广泛应用于需要精确选择的场景，如3D编辑器或游戏开发中。
动画交互
Three.js 支持通过动画系统创建交互式的动画效果，用户可以通过点击按钮来触发模型的动画效果，如旋转、展开等，动画交互不仅增强了视觉效果，还为用户提供了更多的互动方式，通过组合不同的动画效果，开发者可以创造出丰富多彩的用户体验。
物理交互
Three.js 可以通过集成物理引擎来实现模型的真实物理行为和交互效果，给模型添加碰撞体和约束，使其能够与其他对象进行交互和碰撞，这种物理交互使得模型的运动更加真实，提升了用户的沉浸感，物理引擎的应用不仅限于游戏开发，还可以用于模拟现实世界中的物理现象。
文件后缀对比
| 文件类型 | 描述 | 适用场景 | 示例 |
.js | 传统的JavaScript文件后缀，用于Web页面中的JavaScript代码嵌入或引用。 | Web页面中的脚本执行。 | |
.mjs | ES模块的文件后缀，支持模块化编程，适用于现代前端框架。 | 现代前端框架和库，如React、Vue等。 | |
.cjs | CommonJS模块的文件后缀，主要用于Node.js环境。 | Node.js环境中的模块化开发。 | const myModule = require('myModule.cjs'); |
FAQs
Q: 如何在Three.js中实现鼠标拖拽模型的功能？
A: 在Three.js中，可以通过监听鼠标事件并修改模型的位置和旋转角度来实现鼠标拖拽功能，具体实现可以参考Three.js的官方文档和示例代码。
Q: 如何将ES模块转换为CommonJS模块？
A: 可以使用Babel等工具来进行转换，通过Babel配置文件设置预设为@babel/preset-env，可以将ES模块转换为CommonJS模块，具体配置可以参考Babel官方文档。
以上内容就是解答有关“cjs交互”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
