みかづきブログ・カスタム

基本的にはちょちょいのほいです。

jQueryを使わずにoffset().topを実装する 📄

ページの上部を起点としたときのDOMのY座標を知りたいとき、jQueryを使うのであれば、 const targetTop = $('#target').offset().top; と書けますが、それだけのためにjQueryを導入するのは勿体ない気がしてしまいます。そんなときは、 const targetTop = do…

Nuxt.js + microCMS + NetrifyでJAMstackを実装しつつAPIキーを隠す 🔑

micoCMSを使った実装 基本的には公式のブログの通りに実装すればOKです。microcms.io .env API_KEY=XXXXXXXXXXXX nuxt.config.js require('dotenv').config(); const { API_KEY } = process.env; const isDevelop = process.env.NODE_ENV !== 'production'; …

A-Frameでアニメーションを複数設定する 🎬

傷口から痛いのが飛んでいくAR絆創膏を作りました。 pic.twitter.com/j67S3y4dOl— 君塚史高 (@ki_230) 2020年12月8日 ふと思い出したのですが、こちらを作成したとき、「痛いのオブジェクト」の「position」「scale」「rotation」をアニメーションさせていま…

音声認識 + WebAR で頭の上に吹き出しを表示する 💬

直近のツイートを頭の上に表示する帽子を作りました。 pic.twitter.com/RwyY0JiFWi— 君塚史高 (@ki_230) 2020年11月13日 先日、帽子にARマーカーをつけてみたのですが、なかなか可能性を感じまして、思い切ってARマーカー付きの帽子を作ってみることにしまし…

Blender 2.8でテキスト(日本語)を立体にしてA-Frameで表示する 🩹

4つのポイント Blenerでテキスト入力モード切り替えはTab 日本語フォントを設定すれば日本語の入力も可能 何故か入力できないときはテキストエディタからコピペで入力 objファイルであれば楽々A-Frameで表示できた 傷口から痛いのが飛んでいくAR絆創膏を作り…

Blender 2.8でstlファイルを作って3Dプリンタ(UP Plus2)でプリントする 📦

以前Three.js上で作ったこちらのモデルをBlenderでモデリングして3Dプリンタでプリントしてみました。 See the Pen CubeMan by kimmy (@kimmy) on CodePen. Blender 2.8でモデリング 設定の変更 まずは、単位をmmにするために、LengthをMillimetersに、Unit …

Expressを使ってスタティックなサーバを立ててSocket.IOを使って通信を行う ⚡️

server.js const express = require('express'); const app = express(); const http = require('http').Server(app); const io = require('socket.io')(http); const path = require('path'); app.use('/', express.static(path.join(__dirname, 'public'))…

image-renderingをつかってCanvasをニアレストネイバー法で拡大してドット絵のような見た目にする

Three.jsでレンダリングした3Dモデルを、セガサターンのような見た目にしたいなと思い、ポストプロセスやシェーダーを書いていたんですが、CSSにimage-renderingたるものがあることを知り、早速試してみました。 developer.mozilla.org 使い方はものすごく簡…

Blenderで作ったglbファイルをThree.jsで読み込んでマテリアルを変更する 📦

以前、Blenderで作ったモデルをThree.jsで読み込んでOculus QuestのブラウザのVRモードで鑑賞するという検証をした際に、Blenderからglbファイルを書き出して、Three.jsに読みました。blog.kimizuka.org今回は、Three.js側で読み込んだglbファイルのマテリア…

CanvasRenderingContext2D.filterでCanvasをグレースケールにする 🖼

以前、ピクセルデータを編集することでCanvasをグレースケールにしました。blog.kimizuka.org今回は CanvasRenderingContext2D.filter をつかってグレースケール化を試します。 const canvas = document.createElement('canvas'); const ctx = canvas.getCon…

A-FrameでCanvasをテクスチャーに設定して動的に更新する 🎥

以前、Three.jsでCanvasをテクスチャーに設定した場合、material.map.needsUpdateをtrueに設定すれば動的に更新できることを調べました。blog.kimizuka.org今回は、それのA-Frame版です。 A-Frameも内部はThree.jsを使っているので、material.map.needsUpdat…

サーバにインストールしたGitLabとNetlifyを連携させる 🦊

いつもはGitHubやBitbucketと連携して使うことの多いNetlifyですが、初めてGitLabと連携させてみました。GitHub、Bitbucketと並列にGitLabボタンもあるので、いつもと同じように連携できるのかと思いきや、リポジトリがひとつも見つかりません。 どうやらサ…