好奇心の赴くままに。気になったことを、気ままに深掘り

タグ: threejs

  • Three.jsシェーダー・(3Dジオメトリ・モデル)

    Three.jsシェーダー・(3Dジオメトリ・モデル)

    はじめに 備考:Three.jsシェーダーで使用される主要な変数( uniform変数、attribute 変数、組み込み変数) 主なuniform変数(シェー…

  • Three.jsシェーダー・(パーティクル・平面GeometryとBufferGeometry)

    Three.jsシェーダー・(パーティクル・平面GeometryとBufferGeometry)

    THREE.Pointsを対象にシェーダーを適用する*各パーティクルはカメラに面した平面で構成されている*パーティクルではRaycasterは機能しない &#x…

  • Three.jsシェーダー・(平面ジオメトリでの実装・3D)

    Three.jsシェーダー・(平面ジオメトリでの実装・3D)

    🚀 実際のデモ画面を見る カメラ 3Dの情報を2Dに変換して描画するにはカメラが必要ro( カメラ(レイの原点))とrd(レイの方向)を定義する…

  • Three.jsシェーダー・チートシート(平面ジオメトリでの実装・2D)

    Three.jsシェーダー・チートシート(平面ジオメトリでの実装・2D)

    🚀 実際のデモ画面を見る セットアップ THREE.PlaneGeometry(平面)を利用してスクリーンスペースに描画(カメラやモデルの位置に…

  • Three.jsシェーダー・窓越しの雨を実装

    Three.jsシェーダー・窓越しの雨を実装

    🚀 実際のデモ画面を見る こちらのYoutubu動画(Unity)を見ながらThree.jsで実装しましたhttps://www.youtube…

  • Three.js/シェーダー(GLSL)その3

    Three.js/シェーダー(GLSL)その3

    座標系について オブジェクトにテクスチャやパターンをどのように適用するか? 今までは、平面にUV座標を利用して描画していました 平面上にさまざまなパターンを描く…

  • Three.jsパフォーマンス最適化についてのまとめ

    Three.jsパフォーマンス最適化についてのまとめ

    はじめに インタラクティブなウェブサイトのパフォーマンス最適化について スムーズな体験とデバイスの負担のバランスユーザーにスムーズで快適な体験を提供することデバ…

  • Three.js/シェーダー(GLSL)その2

    Three.js/シェーダー(GLSL)その2

    ポストプロセッシング ポストプロセッシングは最終的な画像(レンダリング)にエフェクトを加えることです。 Three.jsでは、これらの「エフェクト」を「パス」と…

  • Three.js/シェーダー(GLSL)その1

    Three.js/シェーダー(GLSL)その1

    シェーダーの概要 シェーダーはGPU上で実行されるGLSL(プログラミング言語)で記述されます 頂点シェーダーとフラグメントシェーダージオメトリの各頂点を配置し…

  • Three.js アニメーション システム(Mixamoアニメーションの統合)

    Three.js アニメーション システム(Mixamoアニメーションの統合)

    Three.jsのアニメーションシステムの概要 Three.jsのアニメーションシステムは、「キーフレーム」を使ってオブジェクトの動きを定義します 以下の主要な…

  • Three.js備忘録(6)

    Three.js備忘録(6)

    物理演算を追加する 物体が現実世界のように動く(物理法則に基づいた挙動)と、ユーザー体験が向上します。 基本的なステップ three.jsと一緒によく使われる物…

  • Three.js備忘録(5)

    Three.js備忘録(5)

    レスポンシブ ビューポートの設定、カメラのFOV(Field of View: 視野角)とアスペクト比は、Three.jsで3Dコンテンツを表示する際に、特にス…

  • Three.js備忘録(4)

    Three.js備忘録(4)

    環境マップ 環境マップは3D空間において環境の光や影響を表現するために使用されるテクスチャです*周囲の光や物体の反射、屈折、散乱などの影響を反映できる 環境マッ…

  • Three.js備忘録(3)

    Three.js備忘録(3)

    ピッキング ピッキングとはユーザーがどのオブジェクトをクリックしたか、またはタッチしたかを把握するプロセスの事で、最も一般的なピッキングは「Raycaster」…

  • Three.js備忘録(2)

    Three.js備忘録(2)

    setAnimationLoop 「setAnimationLoop」についてアニメーションのループを簡単に設定するためのものです。このメソッドは、通常のJav…

  • Three.jsこと始め

    Three.jsこと始め

    Three.jsは、JavaScriptを使った3DグラフィックスライブラリですWebGLを使ってブラウザ上で3Dグラフィックスを実現することができますThre…