練習：Three.js

npaka氏の記事から色々学んだ成果 https://note.com/npaka/n/n477c15fedaef

Node.js

JavaScriptのパッケージマネージャ． 一般的に外部のライブラリを導入したほうが高度なプログラムを構築しやすい． 外部のライブラリをgitに含めると肥大化するので依存情報だけ宣言したほうが良い．

Node.jsは外部ライブラリ（パッケージ）の導入および更新につかえるnpmコマンドを提供する，

npm コマンドの例

• パッケージの作成
  • npm init
  • npm init -y
  • package.jsonに依存宣言，node_modules/に依存実態が収まる，これらはnpmコマンド以外で編集してはいけないしgitにnode_modules/はレポジトリに含めてはいけない．
• パッケージのインストール
  • npm install / i
    • package.json に従って依存を全てインストール
  • npm install / i パッケージ名
    • カレントディレクトリのnode_modules/にインストール
  • npm install / i –save / -save / -S パッケージ名
    • 上記に加えpackage.jsonのdependencies欄に追加
    • 公開時，npm installで共にインストールされる
  • npm install / i –save-dev / -D パッケージ名
    • 上記に加えpackage.jsonのdevDependencies欄に追加
    • 公開時，npm installで共にインストールされない
    • 開発者は使用するが利用者は使用しないライブラリに使われる．
  • npm install –global / -g
    • グローバルにインストールされる，パスを指定しなくてもどのディレクトリでも動くようになる．汚れる
• パッケージのアンインストール
  • npm uninstall / un / unlink / remove / rm / r パッケージ名
  • npm uninstall –save / -S パッケージ名
    • アンインストールと同時にdependencies欄の記述も削除
  • npm uninstall –save-dev / -D パッケージ名
    • アンインストールと同時にdevDependencies欄の記述も削除
• パッケージのリスト
  • npm list
  • npm list -g
  • npm list –save / -S
  • npm list –save-dev / -D
• 依存を全部インストールしなおす
  • rm -rf node_modules package-lock.json yarn.lock && npm install
  • vim package.json
    • コマンドの追加
      • “scripts”: {“start”: “live-server dist”, “build”: “webpack”, “watch”: “webpack -w” },
  • Install Node.js
    • https://nodejs.org/en/ 12.18.4 LTS Recommended For Most Users

Three.js

webglを扱うライブラリ https://github.com/mrdoob/three.js

npmによる導入

• npm init
• npm install –save three @pixiv/three-vrm
  • three.jsとvrm拡張をインストール
• npm install –save-dev typescript ts-loader webpack webpack-cli live-server
  • typescriptはts2js変換を行う，変換後のjsのrequireは処理しない
  • webpackは.js ファイル群をrequireに従いバンドルする
  • live-serverはlive-serverコマンドで表示する
  • ts-loaderはwebpackからtypescriptへの中継，気持ち悪い
  • webpack-cli はwebpackから参照される，気持ち悪い
• download dist/alicia.vrm
  • https://3d.nicovideo.jp/works/td32797
• 各種ファイルを書く完成品
  • vim package.js
    • コマンドを追加 start/build/watch
    • node_modules/.bin/にパスが通っている
  • vim webpack.config.js
    • src/index.tsからdist/main.jsを生成するようwebpackを設定する
  • vim src/index.ts
    • sourcefile
  • vim dist/index.html
    • 表示用html
• 起動
  • npm run build
  • npm run start
  • アリシアちゃん可愛い