npm安装three.js运行官方示例仅显示空白无旋转立方体如何解决

• 核心问题1：HTML中引入JS的标签未声明模块类型，你在index.js中使用了ES模块import语法，浏览器默认按普通脚本处理会直接报错阻断执行。
• 核心问题2：script标签放在head节点内，执行DOM操作时body还未渲染完成，渲染节点无法插入到页面中。
• 核心问题3：原生浏览器的ES模块导入无法直接识别from 'three'的裸模块名，需要配置路径映射。

具体修改步骤 #

修改index.html代码 #

调整script标签位置，添加模块声明和路径映射，修改后代码如下：

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "index.css">
<title>Title</title>
<script type="importmap">
{
  "imports": {
    "three": "./node_modules/three/build/three.module.js"
  }
}
</script>
</head>
<body style = "margin: 0px;">
<script type="module" src = "index.js"></script>
</body>
</html>

验证index.js代码 #

现有index.js逻辑无错误，无需修改。

修改完成后重启本地Live Server即可正常显示旋转的绿色立方体。

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