コーディング17件

Three.jsの基本3要素｜Scene・Camera・Rendererを図で理解する
2026年8月1日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。前回のThree.jsの環境構築｜Vite + npmで最速セットアップで、色のついた箱がくるくる回るところまでやりました。コ …
Three.jsの環境構築｜Vite + npmで最速セットアップ
2026年7月25日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。 Three.js入門ガイドで「Three.jsって手軽に3Dが作れて面白い」という話をしました。この記事はその続きで、実際に手 …
GLSL入門｜Three.jsのShaderMaterialで自作シェーダーを書く
2026年7月18日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。僕はXでThree.jsのシェーダー作品をちょこちょこ投稿しているんですが、その多くの土台になっているのが「GLSL」です。 …
Three.jsでWebGPUを使う｜WebGPURendererへの移行ガイド
2026年7月11日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。前回、TSLとは？WebGPU時代の新しいシェーダーの書き方という記事で「これからはWebGPUの時代だよ」という話をしました …
TSLとは？WebGPU時代の新しいシェーダーの書き方
2026年7月5日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。最近、僕はXでThree.jsのシェーダー作品をちょこちょこ投稿しているんですが、その多くを「TSL」というもので書いています …
Three.js入門｜ブラウザで動く3D表現を作る完全ガイド
2026年6月27日
みなさんこんにちは。フロントエンドエンジニアのしゅん（@shun_webdesign）です。僕は普段、Three.jsを使ってブラウザで動く3D表現を作っていて、その作品をXでも発信しています。最初は「3Dってなんか難 …
ブログをリニューアル。Astro + WordPress headlessに移行した理由と技術スタック紹介
2026年5月7日
はじめにこのたびブログ「ShunNote」をリニューアルしました。見た目のデザインを一新しただけでなく、裏側のシステム構成も大きく変えています。以前はWordPressをそのまま使っていましたが、今回は Astro …
Lottieでグラデーションを使ってアニメーションを作る裏技2つ
2024年1月2日
みなさんこんにちは。しゅん（@shun_webdesign）です。皆さんはLottieをご存知でしょうか？なめらかなアニメーションをサイトに実装でき、手軽にリッチな表現を取り入れることができます。 LottieはAft …
Next.jsとReact Three Fiberのポートフォリオを公開するまでの裏側
2023年2月11日
みなさんこんにちは。しゅん（@shun_webdesign）です。先日、作成したポートフォリオサイトをSNSで公開しました。今回は僕が公開したポートフォリオについて紹介していきたいと思います。 ※コードなどの内容の説 …
Lottieの作成からコーディングまで実装方法をまるっと解説
2022年8月26日
こんにちは。Webデザイナーのしゅん（@shun_webdesign）です。軽量のWebアニメーションが作れる「Lottie」をご存知でしょうか？近年、Adobe XDでも使用できるようになりリッチなアニメーションを …

← 記事一覧に戻る