如何在HTML中调用外部JavaScript文件中的three.js函数

你遇到的核心问题是：模块化脚本里的函数无法被内联onclick调用。因为使用<script type="module">引入的JS文件会运行在独立的模块作用域中，里面的函数默认不会暴露到全局window对象上，所以HTML里的onclick="selectPlanet('Mercury')"找不到这个函数。另外你的代码还存在重复引入index.js的问题，需要清理。

解决方法 #

方法1：将函数暴露到全局（快速修复） #

在你的index.js中，把selectPlanet函数挂载到window对象上，让全局作用域能访问到：

// index.js中的代码
function selectPlanet(planetName) {
  // 你的原有逻辑
  console.log(`选中了${planetName}`);
}

// 添加这行，把函数暴露到全局
window.selectPlanet = selectPlanet;

方法2：使用事件监听（更规范的模块化写法） #

不使用内联onclick，而是在模块化脚本中通过代码绑定点击事件，这是更符合现代JS开发规范的方式：

1. 修改HTML，去掉所有onclick属性：

<div id="planet-menu">
  <ul>
    <li>Mercury</li>
    <li>Venus</li>
    <li>Earth</li>
    <li>Mars</li>
    <li>Jupiter</li>
    <li>Saturn</li>
    <li>Uranus</li>
    <li>Neptune</li>
  </ul>
</div>

2. 在index.js中添加事件监听逻辑：

// index.js中的代码
function selectPlanet(planetName) {
  // 你的原有逻辑
  console.log(`选中了${planetName}`);
}

// 绑定点击事件
document.addEventListener('DOMContentLoaded', () => {
  const planetItems = document.querySelectorAll('#planet-menu li');
  planetItems.forEach(item => {
    item.addEventListener('click', () => {
      selectPlanet(item.textContent.trim());
    });
  });
});

额外需要调整的点 #

1. 移除重复的脚本引入：你的HTML里两次引入了index.js，删掉其中一个。
2. 调整脚本加载顺序：确保依赖脚本先加载，比如three.module.js要在依赖它的threex.domevents.js、threex.linkify.js之前加载，避免依赖未定义的错误。
3. 检查模块兼容性：如果threex系列脚本不是模块化的，可能需要调整引入方式，或者使用import语句在模块中导入它们（如果支持的话）。

修改后的完整HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title> Solar System </title>
  <style>
    body {
      margin: 0;
    }
    canvas {
      width: 100%;
      height: 100%
    }
  </style>
  <link href="./styles.css" rel="stylesheet" />
</head>
<body>
  <!-- 先加载three.js模块 -->
  <script type="module" src="./js/three.module.js"></script>
  <!-- 再加载依赖three的脚本 -->
  <script src="js/threex.domevents.js"></script>
  <script src="./js/threex.linkify.js"></script>
  <!-- 最后加载你的业务脚本 -->
  <script type="module" src="./index.js"></script>

  <div id="planet-menu">
    <ul>
      <li>Mercury</li>
      <li>Venus</li>
      <li>Earth</li>
      <li>Mars</li>
      <li>Jupiter</li>
      <li>Saturn</li>
      <li>Uranus</li>
      <li>Neptune</li>
    </ul>
  </div>
</body>
</html>

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