首頁 > ThreeJs教程 > Three.js安裝方法
此章節介紹:

    Three.js安裝方法

    你可以使用npm以及現代構建工具來安裝 three.js ,也可以只需靜態主機或是 CDN 來快速上手。對于大多數用戶來說,從 npm 安裝是最佳選擇。

    無論你選擇哪種方式,請始終保持一致,并注意從相同版本的庫中導入所有文件?;旌喜煌瑏碓吹奈募赡軙е掳貜痛a,甚至會以意料之外的方式破壞應用程序,

    所有安裝 three.js 的方式都依賴于 ES modules(參見 Eloquent JavaScript: ECMAScript Modules)。ES modules使你能夠在最終項目中包含所需庫的一小部分。


    安裝自 npm

    要安裝three 的 npm 模塊,請在你的項目文件夾里打開終端窗口,并運行:

    npm?install?--save?three


    // 方式 1: 導入整個 three.js核心庫

    import?*?as?THREE?from?'three';
    const?scene?=?new?THREE.Scene();

    // 方式 2: 僅導入你所需要的部分

    import?{?Scene?}?from?'three';
    const?scene?=?new?Scene();


    從npm上進行安裝的時候,幾乎總是使用某種構建工具(bundling tool)來將你項目中需要的所有包組合到一個獨立的JavaScript軟件中。雖然任何現代的 JavaScript 打包器都可以和 three.js 一起使用,但最流行的選擇是 webpack 。

    并非所有功能都可以通過 three 模塊來直接訪問(也稱為“裸導入”)。three.js 中其它較為流行的部分 —— 如控制器(control)、加載器(loader)以及后期處理效果(post-processing effect) —— 必須從 examples/jsm 子目錄下導入。了解更多信息,請參閱下方的示例。

    你可以從 Eloquent JavaScript: Installing with npm 來了解更多有關 npm 模塊的信息。


    從CDN或靜態主機安裝

    通過將文件上傳到你自己的服務器,或是使用一個已存在的CDN,three.js 便可以不借助任何構建系統來進行使用。由于 three.js 依賴于ES module,因此任何引用它的script標簽必須使用type="module"。如下所示:


    <script?type="module">??
    //?通過訪問?https://cdn.skypack.dev/three?來查找最新版本。??
    import?*?as?THREE?from?'https://cdn.skypack.dev/three@<version>';??
    const?scene?=?new?THREE.Scene();
    </script>


    并非所有功能都可以通過 build/three.module.js 模塊來直接訪問。three.js 中其它較為流行的部分 —— 如控制器(control)、加載器(loader)以及后期處理效果(post-processing effect) —— 必須從 examples/jsm 子目錄下導入。了解更多信息,請參閱下方的示例。


    示例

    three.js的核心專注于3D引擎最重要的組件。其它很多有用的組件 —— 如控制器(control)、加載器(loader)以及后期處理效果(post-processing effect) —— 是 examples/jsm 目錄的一部分。它們被稱為“示例”,雖然你可以直接將它們拿來使用,但它們也需要重新混合以及定制。這些組件和 three.js 的核心保持同步,而 npm 上類似的第三方包則由不同的作者進行維護,可能不是最新的。


    示例無需被單獨地安裝,但需要被單獨地導入。如果 three.js 是使用 npm 來安裝的,你可以使用如下代碼來加載軌道控制器(OrbitControls):


    import?{?OrbitControls?}?from?'three/examples/jsm/controls/OrbitControls.js';
    
    const?controls?=?new?OrbitControls();


    如果 three.js 安裝自一個 CDN ,請使用相同的 CDN 來安裝其他組件:


    <script?type="module">
    ??//?通過訪問?https://cdn.skypack.dev/three?來查找最新版本。
    ??import?{?OrbitControls?}?from?'https://cdn.skypack.dev/three@<version>/examples/jsm/controls/OrbitControls.js';
    ??const?controls?=?new?OrbitControls();
    </script>

    所有文件使用相同版本是十分重要的。請勿從不同版本導入不同的示例,也不要使用與 three.js 本身版本不一致的示例。


    兼容性

    CommonJS 導入

    雖然現代的 JavaScript 打包器已經默認支持ES module,然而也有一些較舊的構建工具并不支持。對于這些情況,你或許可以對這些打包器進行配置,讓它們能夠理解 ES module 。例如,Browserify 僅需 babelify 插件。


    Import maps

    和從靜態主機或CDN來進行安裝的方式相比,從npm安裝時,導入的路徑有所不同。我們意識到,對于使用兩種不同方式的用戶群體來說,這是一個人體工程學問題。使用構建工具與打包器的開發者更喜歡僅使用單獨的包說明符(如'three')而非相對路徑,而examples/目錄中的文件使用相對于 three.module.js 的引用并不符合這一期望。對于不使用構建工具的人(用于快速原型、學習或個人參考)來說,或許也會很反感這些相對導入。這些相對導入需要確定目錄結構,并且比全局 THREE.* 命名空間更不寬容。


    我們希望在 import maps 廣泛可用時,能夠移除這些相對路徑,將它們替換為單獨的包說明符,'three'。這更加符合構建工具對npm包的期望,且使得兩種用戶群體在導入文件時能夠編寫完全相同的代碼。對于更偏向于避免使用構建工具的用戶來說,一個簡單的 JSON 映射即可將所有的導入都定向到一個 CDN 或是靜態文件夾。通過實驗,目前你可以通過一個 import map 的 polyfill,來嘗試更簡潔的導入,如 import map example 示例中所示。

    Node.js

    在 Node.js 下使用 three.js 較為困難,原因有2條:


    首先, three.js 是為 web 而構建的,其依賴于瀏覽器,以及并不總是存在于 Node.js 中的 DOM API。其中的一些問題可使用類似 headless-gl 的 shim ,或使用定制的替代品來替換掉一些組件(例如 TextureLoader )來進行解決。其他的 DOM API 或許和使用它們的代碼緊密相連在一起,并且很難解決。我們歡迎簡單且可維護的 pull request,以改善對 Node.js 的支持。但建議您首先提出一個 issue 來討論您的改進。


    第二,Node.js 對于 ES module 的支持可以說……很復雜。在 Node.js v12 中, three.js 的核心庫可使用 require('three') 來作為 CommonJS module 進行導入。然而,大多數在 examples/jsm 中的示例組件并不能夠這樣。未來版本的 Node.js 或許可以解決這個問題,但同時你可能需要一些類似 esm 的解決方案,來使得你的 Node.js 應用程序識別 ES module。


    日本一卡2卡3卡四卡精品网站,欧美一卡2卡3卡4卡国色天香在线,精品一卡二卡≡卡四卡精品,欧美一卡2卡3卡4卡国色天香在线,小小视频在线观看