ホームページ > 記事 > ウェブフロントエンド > モジュールインポートによるthree.js共有の例

モジュールインポートによるthree.js共有の例

小云云オリジナル: 2018-01-18 09:34:302204ブラウズ

この記事では主に、three.js のモジュールによる中国語ドキュメントの学習とインポートに関する関連情報をサンプルコードを通じて詳しく紹介します。必要な人は以下のエディタで学習しましょう。

前書き

この記事では主に、モジュールを介してインポートされたthree.jsに関する関連コンテンツを紹介します。スクリプトタグを介してthree.jsをインポートすることは、長期的に更新されるプロジェクトを開始して実行するための良い方法です。例:

プロジェクトのソースコードの一部としてライブラリのコピーを手動で呼び出してインポートする必要があります。
ライブラリのバージョンの更新は手動プロセスです
ライブラリの新しいバージョンを導入すると、バージョン管理の違いがソースファイルとめちゃくちゃになります

NPMのような依存関係マネージャーを使用すると、これらのバージョン管理の問題による不備を回避します。

NPM によるインストール

three.js は npm モジュールとしてリリースされました。詳細については、npm を参照してください。 npm のアンインストールとインストールについては、次の記事を参照してください: http://www.jb51.net/article/90518.htm インストールが成功したら、ここでは詳しく説明しません。 npm install three を実行する必要があります。three.js がプロジェクトに含まれます。

モジュールのインポート

Webpack または Browserify のパッケージ化ツールを使用すると、コード内で require('modules') を使用して、パッケージ化されたすべての依存関係を参照できるようになります。

これで、ソースコードにモジュールをインポートし、通常どおり続行できるようになります。

var THREE = require('three');
var scene = new THREE.Scene();

ES6 インポート構文を使用することもできます

import * as THREE from 'three';

const scene = new THREE.Scene();

、または、Scene のインポートなど、three.js ライブラリの一部をインポートすることもできます:

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

警告

現在、「例」にあるすべてをインポートすることはできません/js」ディレクトリのドキュメント。これは、一部のファイルがグローバル名前空間 THREE に依存しており、汚染を引き起こしていることが原因です。詳細については、モジュール #9562 をサポートするためのサンプル/js の変換を参照してください。

モジュールインポートによるthree.js共有の例

関連記事