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

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

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ボタンもあるので、いつもと同じように連携できるのかと思いきや、リポジトリがひとつも見つかりません。 どうやらサ…

Nuxt.jsがローカルではビルドできるのにCIだとビルドがコケる(There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.)😱

結論から書くと、ものすごく単純な話なんですが、大文字小文字はしっかり区別しようという話です。 Nuxt.jsで作ったプロジェクトがローカルだとビルドが通るのに、CIだとコケていて「なんでだろう」と思いログを確認してみました。 [fatal] Nuxt build error…

Nuxt.jsの静的書き出しではてなブログのRSSを表示するウェブサイトを作る 📝

はじめに はてなブログのRSS取得 Nuxtプロジェクトの作成 Nuxtプロジェクト内でAPIを取得し、静的なHTMLとして書き出す準備 静的なHTMLとして書き出す準備 はじめに はてなブログの最近記事30件と、JSONに記載されているモックを取得して羅列するウェブサイ…

Jestを使ってwindow.locationやwindow.navigatorなどのwindow直下の変数(グローバル変数)にアクセスする関数のテストをする 💯

locationのテストの例 JavaScript Jest 変数を受け取る例 navigatorのテストの例 JavaScript Jest 変数を受け取る例 locationのテストの例 JavaScript const isProduction = () => { return location.hostname === 'kimizuka.fm'; }; export default isProdu…

A-FrameでARマーカーが回転したことを検知する 🔁

ARマーカーの回転検知。 pic.twitter.com/W6ukDJorN8— 君塚史高 (@ki_230) 2020年11月19日 以前は、マーカーのpositionを取得する方法を使ったデモを作りましたが、今回はマーカーの回転を検知してみます。blog.kimizuka.org JavaScript let timer; let last…

VoxelでThree.jsに読み込み可能な3Dモデルをつくってアニメーションさせる 🏃‍♂️

https://blog.kimizuka.org/entry/2020/11/05/145418blog.kimizuka.orgこちらの記事 の応用版です。 1フレームずつポーズを作りアニメーションさせてみました。作り始めた時は、1フレームあたり10x10x10の1000個のcubeで想定していましたが、途中でどうして…

A-FrameでARマーカーが動いたことを検知する 🚗

A-Frameを色々試していたところ、marker.getAttribute('position')でマーカーの座標が取得できることがわかったので、 Webカメラを定点で固定 0.1秒間隔でマーカーの座標を取得 1個前の座標と現在の座標を結んだでベクトル化 ベクトルの大きさが一定以上であ…

iOS12以前のmobile Safariではwindow、document、bodyにclickイベントを設定しても発火しない 🖱

mobile Safariのclcikイベントについて DEMO HTML 対策 その1 対策 その2 HTML DEMO mobile Safariのclcikイベントについて その昔、iOSのmobile Safariに置いて、widnow、document、bodyにはclickイベントが設定できない記憶があったのですが、最近はどうな…