【WebGL】GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいるところだけ解説
WebGLにおいてGLSLを書く時、どうしても数学がでてきます。
ここでは数学(三角関数、ベクトル)を文系エンジニアのために、まず最初に抑えておきたいポイントだけ解説します。
難しいことは私もわかり ...
【WebGL】GLSLで定数を定義する方法(define, constとその違いと注意点)
WebGL(GLSL)で定数を定義する方法を紹介します。
定数を定義するのは、2通りあります。
defineconst
この2つの使い方、その違いからくる注意点をみてみましょう ...
【WebGL】GLSLで円や三角形、四角形、その他多角形の図形を描写する方法
WebGL(GLSL)で円や三角形、四角形、八角形、十角形といった多角形の図形を描写する方法を紹介します。
基本的なGLSLの計算方法については、GLSLで使う数学(三角関数、ベクトル)を文系エンジニア ...
【GLSL】Three.jsのShaderMaterialを使って画像や動画を出力する方法(デモ付き)
Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。
WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。
デモ ...
【Three.js】マテリアルのテスクチャーに画像や動画を設定する方法(デモ付き)
Three.jsでマテリアルのテスクチャーに画像や動画を設定する方法を紹介します。
さっそくデモを確認してみましょう。
3Dモデルを表示
Three.jsのShaderMateria ...
【Three.js】物体(メッシュ)を複数ランダムに生成して散りばめる方法(デモあり)
Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。
またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。
大きさ ...
【Three.js】物体を回転、並行移動、スケールする方法(デモあり)
Three.jsを使って物体を回転、並行移動、スケールする方法を紹介します。
デモもあるので、一度確認してみてください。
【Three.js】基本のライト:AmbientLight, DirectionalLight, PointLightの使い方とサンプルデモ
Three.jsの最も基本的でよく使うライトであるAmbientLight, DirectionalLight, PointLightの使い方を紹介します。
ライトがない状態のデモがあるとわかりやすいので ...
【Three.js】ライトで影を落とす方法と影の調整のやり方(デモつき)
Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。
また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。
まずはサンプルデモがある ...
【Three.js】物体を複製(クローン)する方法clone()と注意点(デモあり)
Three.jsで物体を複製する方法を紹介します。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモ ...
【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説
WebGL&Three.jsの入門としてThree.jsのチュートリアルに記載されているサンプルコードの基本を解説します。
とっつきにくそうではなりますが、ちょっと中身がわかれば全然そんなことがな ...
【Three.js】OrbitControlsを使って視点の操作する簡単な方法(デモあり)
Three.jsでOrbitControlsを使って簡単にマウスで視点の操作する方法を紹介します。
まずはデモを確認してみましょう。
OrbitControlsとは？OrbitControl ...
【Three.js】Material(マテリアル)の色の設定方法一覧
Three.jsでMaterial(マテリアル)の色を設定するとき、いろいろな方法があります。
知らないと混乱したり、便利な使い方もあるので、色の設定方法を一覧できるように紹介します。
もしTh ...
【Three.js】Material(マテリアル)の種類と変更方法-3Dモデルのデモ付きで紹介
Three.jsのMaterial(マテリアル)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three. ...
【Three.js】Geometry(ジオメトリ)の種類と変更方法-3Dモデルのデモ付きで紹介
Three.jsのGeometry(ジオメトリ)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three. ...
【Three.js】Three.jsの基本的な操作の一連の流れを解説
Three.jsは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。
Three.jsやWebGLが何？という場合は、WebGLとThree.jsの違いって何？押さえておき ...
Firebase+Vue.js(Vue3 Composition API)でチャット機能を作成する
Quasar frameworkの始め方(Vueフレームワーク)
【Apache】Rewriteで別のフォルダの同じファイル名へリダイレクトさせる方法
【PHP】配列の繰り返し処理と動的に配列の長さを取得する方法
【PHP】JavaScript学習経験がある人のためのPHP基礎知識まとめ
【React】useContextをいつ使う？別ファイルとデータ共有や再レンダリングについて
ReactのuseContextについて、使い方や、いつ使うのかといった情報を共有します。
また、useContextを使って別ファイルとデータ共有の仕方や再レンダリングについても紹介します。
【React】propsのchildrenの基本的な使い方と実例(再利用性の高い部品作成方法)
Reactでコンポーネントを他のコンポーネントに渡せるpropsのchildrenの使い方を紹介します。
childrenを上手に使うことで、再利用性の高いコンポーネントを作成することができます。
【React】Redux toolkitの使い方(Slice作成、Redux Dev Toolsでstateを確認)
ReactでReduxを使う方法を紹介します。
ReactでReduxを使う方法公式の手順は以下にあります。
実際はReactを作成してからReduxをいれることが多いと思うので、
【React】SVGアイコンを使用する方法
Reactで独自で作成したSVGアイコンや無料のアイコンサービスなど使用する方法を紹介します。
ReactでSVGアイコンを使用する方法他にも以下のように手軽に使えるやり方を紹介しています。
【 ...
【React】Reduxが意味不明、、、そもそも何？なんで使う必要があるの？Redux不要論について
Reactを使うとほぼ必ず出くわすReduxについて、所見では意味不明で学習したくなくなる場合も少なくないです。
Reduxってそもそも何？なんで使う必要があるの？という点について理解して、
Red ...
【React】Reduxの仕組みを1分で理解する
Reduxを理解するために、まずは仕組みを理解しましょう。
Reduxの仕組みを３分で理解する引用:
上の図は、Reduxの公式サイトより引用しているものです。
上の図にで
【wordpress】自作ブロックの背景色と文字色をクラスのある場合とインラインの場合で切り替える方法
wordpressでReactを使ってブロックエディタ「Gutenberg」の自作ブロックを作成したときに、
背景色と文字色をクラスのある場合とインラインの場合で切り替える方法を紹介します。
カラー ...
【wordpress】ブロックサイドバーのカスタマイズ方法(自作ブロック)
wordpressのブロックエディタ「Gutenberg」でReactを使って自作したブロックのサイドバーをカスタマイズする方法を紹介します。
wordpressでReactを使って自作したブロックのサイドバ ...【wordpress】ブロックツールバーのカスタマイズ方法(自作ブロック)
wordpressのブロックエディタ「Gutenberg」でカスタムブロックを作成した際のブロックツールバーのカスタマイズ方法を紹介します。
ブロックツールバーのカスタマイズ方法(自作ブロック)edit ...