うちのいぬ Tech Blog

Tech Blog of Uchinoinu/My dog

Three.js入門 2 - 開発環境を整える

github.com

👆をcloneして動かします。

とはいえ、yarnを入れる必要があったので、入れます。

yarnpkg.com

yarnって何かいまいち言葉にできないので、それはこれから勉強します。

qiita.com

uraway.hatenablog.com

これでとりあえず、大枠は出来ました。

http://localhost:3355

にアクセスして、画面が表示されたら動いたということで。

階層を自分仕様に

いじるコードをsrcの中に入れる

  • src -> src/js
  • styles -> src/styles

.postcssrc.jsonを一部修正

"input": "src/styles/main.css",

webpack.config.jsを一部修正

module.exports = {
  entry: "./src/js/main.js",

テスト

$ yarn start

jade(pug)を使う

インストール

$ yarn add pug pug-cli -D

src/html/index.jade(pug)を作成

npm scriptを修正

    "build:html": "pug --hierarchy -o public/ src/html/",
    "watch:html": "pug -w --hierarchy -o public/ src/html/",