2020-12-01から1ヶ月間の記事一覧
はじめに A-Frameとは A-FrameでARコンテンツをつくる マーカーをつくる ミニマルなWebARの例 DEMO ソースコード マーカーが認識されたことを検知する DEMO ソースコード マーカーの認識が切れたことを検知する DEMO ソースコード 思ったこと マーカーの…
結論 HTML <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet"> もしくは、 CSS @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); という感じで、普通に読み込むだけでOK。 blog.kimizuka.org以前、頭の上…</link></link>
HubSpotとは ことの発端 dealとは APIを調べる @hubspot/api-client - npmを調べる メソッドを見つける メソッドを叩いてみる ものすごくニッチな記事になりますが、未来の自分のためにも書き残しておきます。 HubSpotとは www.hubspot.jp一言で言うと、「EC…
ページの上部を起点としたときのDOMのY座標を知りたいとき、jQueryを使うのであれば、 const targetTop = $('#target').offset().top; と書けますが、それだけのためにjQueryを導入するのは勿体ない気がしてしまいます。そんなときは、 const targetTop = do…
micoCMSを使った実装 基本的には公式のブログの通りに実装すればOKです。https://microcms.io/blog/nuxt-secure-api-key/microcms.io .env API_KEY=XXXXXXXXXXXX nuxt.config.js require('dotenv').config(); const { API_KEY } = process.env; const isDeve…
傷口から痛いのが飛んでいくAR絆創膏を作りました。 pic.twitter.com/j67S3y4dOl— 君塚史高 (@ki_230) 2020年12月8日 ふと思い出したのですが、こちらを作成したとき、「痛いのオブジェクト」の「position」「scale」「rotation」をアニメーションさせていま…
直近のツイートを頭の上に表示する帽子を作りました。 pic.twitter.com/RwyY0JiFWi— 君塚史高 (@ki_230) 2020年11月13日 先日、帽子にARマーカーをつけてみたのですが、なかなか可能性を感じまして、思い切ってARマーカー付きの帽子を作ってみることにしまし…
4つのポイント Blenerでテキスト入力モード切り替えはTab 日本語フォントを設定すれば日本語の入力も可能 何故か入力できないときはテキストエディタからコピペで入力 objファイルであれば楽々A-Frameで表示できた 傷口から痛いのが飛んでいくAR絆創膏を作り…
以前Three.js上で作ったこちらのモデルをBlenderでモデリングして3Dプリンタでプリントしてみました。 See the Pen CubeMan by kimmy (@kimmy) on CodePen. Blender 2.8でモデリング 設定の変更 まずは、単位をmmにするために、LengthをMillimetersに、Unit …
Three.jsでレンダリングした3Dモデルを、セガサターンのような見た目にしたいなと思い、ポストプロセスやシェーダーを書いていたんですが、CSSにimage-renderingたるものがあることを知り、早速試してみました。 developer.mozilla.org 使い方はものすごく簡…
以前、Blenderで作ったモデルをThree.jsで読み込んでOculus QuestのブラウザのVRモードで鑑賞するという検証をした際に、Blenderからglbファイルを書き出して、Three.jsに読みました。blog.kimizuka.org今回は、Three.js側で読み込んだglbファイルのマテリア…
以前、ピクセルデータを編集することでCanvasをグレースケールにしました。blog.kimizuka.org今回は CanvasRenderingContext2D.filter をつかってグレースケール化を試します。 const canvas = document.createElement('canvas'); const ctx = canvas.getCon…
