Vueで無料の範囲でFont Awesomeを使う
無料の範囲でFont Awesomeを利用する方法です。 理解に地味に時間がかかったのでメモしておきます。
インストール
$ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/free-brands-svg-icons $ npm i --save @fortawesome/free-regular-svg-icons $ npm i --save @fortawesome/vue-fontawesome
Vueの設定
vue-cliで作ったプロジェクトの場合の設定です。 グローバルコンポーネントとして登録する例です。
src/main.js
apple-altを利用する場合です。
import Vue from 'vue'
import App from './App'
/* ここから */
import { library } from '@fortawesome/fontawesome-svg-core'
//apple-alt アイコンをimport
import { faAppleAlt } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
//利用するアイコンを設定
library.add(faAppleAlt)
Vue.component('font-awesome-icon', FontAwesomeIcon)
/* ここまで */
Vue.config.productionTip = false
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
コンポーネントで利用する
<template>
<div id="app">
<font-awesome-icon icon="user-secret" />
</div>
</template>
アイコンを全部読み込む
特定のアイコンだけ読み込むのではなく全部読み込む場合です。
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
library.add(fas,fab,far)
solid(fas)以外を利用する
solid以外の、brands、regularを利用する場合は少し書き方が変わるようでした。
<font-awesome-icon :icon="['fab', 'android']" /> <font-awesome-icon :icon="['far', 'address-book']" />
モデリングメモ
辺を選択して面を作成
辺を複数選択後、Command + Fで面を作成することができる。
選択した頂点を結合
Command + Vで「 頂点マージ > 最後(最初)に選択した頂点に」で頂点を
結合することができる。
重複頂点の結合(重複頂点の削除)
重複頂点はCommand + Vもしくはメニューの「頂点 > 距離でマージ」で結合(削除)できます。
重複頂点の自動マージ
プロパティのコンテクスト>オプションの「自動マージ」で設定できる。
もしくは、サイドバー(Nで表示される)のツール>オプションから設定できる。
隣接した面を選択
option(alt)を押しながら、辺を選択すると選択中の面に隣接する面が一括で選択できる。
バウンディングボックスの位置を変更
Shift + S で表示。
オブジェクトを複製
Shift + D
プロポーショナル編集
以下の箇所をONにすることでプロポーショナル編集が利用できるようになります。
Blender2.8
手順
1. 草束のモデリング
平面を追加
まずは草1本ようのメッシュを作成。
草の束になるので厚みがなくてもきにならないため、平面メッシュで作成する。
shift + aでメッシュ> 平面で追加。- x軸に90度回転する。
- 編集モード(tab)でメッシュを縦に細長くする。
平面を曲げて草の形状を作成
まずは、平面をCtrl + rで分割する。
分割数は適当。
草の先を作る為に一番上のポリゴンの頂点を削除して三角形にする。
次に草のように形を整える。
プロポーショナル編集モードを利用すると簡単。
草を複製
作成した草をShift + Dでコピーします。
その際に、ピポットポイントを草の根本に設定すると、ピポットポイントを原点に回転縮小ができるので便利です。
ここでは3Dカーソルの位置をピポットポイントにします。
複製して、回転と縮小で調整していくとこんな感じになります。
2. 地面の設置
地面のベースを作成する
平面メッシュを作成して、コンテクストメニューから「細分化」を何回か実行する。
コンテクストメニューから「頂点をランダム化」を実行し頂点の位置をランダムに配置する。
コンテクストメニューから「頂点をスムーズに」を実行し頂点をスムーズにする。
さらにオブジェクトモードに切り替えて「オブジェクト > スムーズシェード」を実行します。
編集モードのスムーズは頂点情報を変更していますが、オブジェクトモードのスムーズは見た目だけを変更して頂点情報は変更していません。
3. パーティクルの設定
地面に草を生やす為ににパーティクル設定をしていきます。
まずは、以下の手順でパーティクルを追加します。
前手順で作成した草のオブジェクトをコレクションに設定します。
次に、「レンダリング方法 > コレクション」を設定し、「コレクション > 草のコレクション」を選択します。
草の生え具合を調整していくのですが、一旦草の数を0にします。
次にパーティクル編集モードに切り替えます。
草の生やすのはメニューの「追加」を選択して生やしたい箇所をドラックします。 プロパティの「ツール」を選択して、半径、数で生やす本数を調整します。
あとは地面にテクスチャを設定して終わりです。
Vueとvue-i18nとstorybookでCannot read property '_t' of undefined
vue-i18nを利用して多言語化しているコンポーネントを、storybookに登録した際に以下のエラーが発生しました。
Cannot read property '_t' of undefined
こちらの記事を参考に、修正しました。
config.jsに以下を追加します。
import { addDecorator } from '@storybook/vue'
import i18n from '@/i18n'
addDecorator(() => ({
template: '<story/>',
i18n
}))
こちらで解消しました。
