Threejs 導入 OrbitControl.js

Question

所以我只是使用沒有其他庫的普通html..如reactjs、vitejs、vuejs等......我希望它只是作為普通html導入並放入script標簽。

所以問題是我不知道為什么我一直收到錯誤的導入給我這樣的東西

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
這個問題只發生在我的 OrbitControls.js 中，我不明白這是什么意思。

這就是它在我的腳本終端和文件位置中的外觀。

我試圖復制軌道控制的 unpkg 鏈接，但它也不起作用..我也嘗試傳遞原始文件但仍然不起作用..有人可以幫我解決這個問題嗎？

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js" integrity="sha512-WoO4Ih0CDOSLYafy22wZD/mcJ7k0ESLqtQsFa6zFKnEUrbtuGU+GkLtVhgt93xa2qewG5gKEC6CWlN8OaCTSVg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="OrbitControls.js" type="module"></script>

  <script type="module">
        import * as THREE from 'https://unpkg.com/three@0.141.0/build/three.module.js';
        import * as dat from './dat.gui.module.js'

        import { OrbitControls }  from 'OrbitControls.js'
        // console.log(dat)
        // const orbit = new OrbitControls()
        console.log(OrbitControls)
  </src> 

我也試圖通過做這樣的事情來獲取 OrbitControls 的鏈接

import { OrbitControls } from 'https://unpkg.com/browse/three@0.141.0/examples/jsm/controls/OrbitControls.js'
console.log(OrbitControls)

Answer 1

如果不使用捆綁器，則必須在使用three.js的 ES6 模塊時定義導入映射。 將以下代碼放入您的 HTML 中：

<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.141.0/build/three.module.js"
        }
    }
</script>

在您的 JS 代碼中，執行以下操作：

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

您還必須刪除<script src="OrbitControls.js" type="module"></script>行。