数行のコード猫、と私はすぐにはるかに良い感じ

または退屈か興味深い技術的な学習は、あなたのWebページ上に横たわっナイーブ孟猫を防ぐことはできません

第二の妹の要素やそっとはあなたと対話するように彼の頭や点滅の目を横に振ったときの表示のブログは頻繁に見るには、下記のように、非常にかわいいです

知りたいと思っ達成する方法で、それ自体が正面を理解していない残念です、そして2番目の要素は冷えていない上、それは猫に遭遇するまで、毎日、彼のブログに彼女を保持するために決定し、誘惑をすることができます抵抗することができませんでした、下に置きます彼女を見て、そのようなペットを持って、私は今、私のような読者があるかもしれないと思う、良い気分を持つことになりますここに滞在するのに十分な孟は多くの楽しみを追加

この効果は、技術のよりLive2D使用され、Live2Dは、日本企業のCybernoidsによって開発されたビデオゲームグラフィックスのレンダリング技術は、連続した画像や文字のモデリングの一連の類似した2次元画像を生成することで適用されます三次元モデルは、換言すれば、2次元材料は、3D効果をある程度達成します

Live2Dは、このようなブラウザ、アンドロイド、IOS、ユニティなど多くのプラットフォーム上で表示されるというように、Live2DプロジェクトはGitHubの上で実装されている多くは、私は猫もから来て上げがあることができlive2DModel、この倉庫、この倉庫は、他の数を収集しましたLive2Dモデル

彼らのウェブサイト上の猫は、実際には、単に次の2つの手順は非常に簡単ですlive2DModelデモ内部の倉庫が、前の何もまだ少し激しい見えません知っている人のために、私はちょうどより多くの中に整理するためにここにいます理解しやすく使いやすいバージョン、原作者へのオマージュ：

自分のプロジェクトを下げるために、コードのリポジトリをダウンロードして、次のアドレスの倉庫：

https://github.com/ops-coffee/demo/tree/master/live2d

前記index.hmtlサンプルコード、プロジェクト全体が効果nginxの上で直接見ることができます

フォルダ猫のモデルと同様に2つのJSファイルを使用する必要性にlive2d

あなたは自分の猫のサイトを維持することができ、プロジェクトにindex.htmlをlive2d層に挟まれたコピーを持つファイル、その後、JSはあなた以下の手順に従っ追加する必要があります

猫のページ上に表示される、次のJSのコードを追加します。

<script src="/live2d/L2Dwidget.min.js"></script>
<script type="text/javascript">
  L2Dwidget.init({
    model: {
      jsonPath: '/live2d/tororo/assets/tororo.model.json',
    },
    display: {
      superSample: 2,
      width: 150,
      height: 150,
      position: 'right',
      hOffset: 0,
      vOffset: 0,
    },
    mobile: {
      show: true,
      scale: 1,
      motion: true,
    },
    react: {
      opacityDefault: 0.8,
      opacityOnHover: 0.2,
    }
  })
</script>

model： 指定model.json位置，如果你不喜欢猫也可以在live2DModel这个仓库下查找自己喜欢的模型，然后将模型目录拷贝到live2d文件夹下，然后修改model路径参数以及display显示参数即可

display： 控制live2d模型在页面上显示的位置

mobile： 控制手机上是否显示

react： 控制显示的透明度

至此完成，再访问网页就会发现一只猫静静的卧在那里，看风云变幻，自云淡风轻~

扫码关注公众号查看更多实用文章

数行のコード猫、と私はすぐにはるかに良い感じ

おすすめ