タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
概要 Three.jsの勉強を始めて半年くらいが経過しました。 現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について 私は主に、React Three Fiber（Three.jsをReact用にラッパーしたライブラリ｜以下、R3F）を使用して開発してます。 バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。 とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。 ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじ
エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。 株式会社ゆめみ所属・新人フロントエンドエンジニア 佐々木祥晶氏：それでは発表いたします。題目は、「Three.js の魅力を語る」です。 目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや？」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥
We create beautiful expressions through programming and deliver the best possible experiences.
はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはこちら サンプルコードはこちら 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・加工等して利用する場合の記載例）「新宿駅周辺屋内地図データ」（国土交通省）（https://www.geospatial.jp/ckan/dataset/mlit-i
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
はじめに かけだしバックエンドエンジニアのhiです。 最近、JavaScriptで簡単に3D描画ができるライブラリ「Three.js」に興味を持って触っていました。どうせならなんか作ろうと思い簡単なゲームを作成してみました。よかったら見てやってください。 ゲーム↓ ソース↓ 作成環境 React：18.2.0 TypeScript：4.7.4 Three.js：0.143.0 作り方 0.前提 作り方を理解するには、React、TypeScript、Three.jsがある程度わかるぐらいの知識が必要となります。 特にReact、TypeScriptの知識がないと「???」ってなるので事前に他の記事などで勉強することをおすすめします。 Three.jsについては、↓のサイトに詳しい情報を載せてくださっている神様がいらっしゃいますので恭しく(うやうやしく)確認していただければと思います。 ht
「React Three Fiber」は、Three.jsをReactで扱うためのライブラリです。Reactの特徴である再利用可能なコンポーネントを活かしながら、宣言的に3Dシーンを構築できるのが大きな魅力です。 通常のThree.jsでは、メッシュの作成、マテリアルの適用、シーンへの追加などひとつひとつの処理を命令的に記述する必要があります。しかしReact Three Fiberを使えば、裏側の複雑な処理をライブラリ側が担ってくれるため、作りたいシーンをコンポーネントとして宣言でき、処理の流れがわかりやすいコードが書けます。 ▼ 通常のThree.jsで立方体メッシュを記述する例 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const box = n
はじめに この記事ではこんな表現の実装方法を解説します。 ▼ GIF ▼ CodePen （0.5x を押すと見やすいです） ▼ 2021/7/26 追記 CodePen（ 慣性スクロールありバージョン） 海外のデザインアワードを受賞するようなリッチなサイトで良く見る演出（個人的主観）です。WebGLの汎用的な表現な気がしますが、その実装方法を解説する記事は（少なくとも日本語では）ほとんど見つけられなかったので、自分の勉強も兼ねて書くことにしました。ちなみに技術記事を書くのは初めてに近いので暖かい目と心で読んでいただけます幸いです。実装はThree.jsを用いています。 注意事項 想定する読者 Three.jsを触ってみたが、サイト制作に活かす術が分からない、同様の表現を良く見るけどどうやって実装しているか分からない、といった方を対象としています。従って本記事では、Three.jsの基本的
WebGPUは、ウェブ上で動作する新世代のグラフィックスAPIです。従来のWebGLに代わるものとして設計されており、より低レベルで効率的にGPUへアクセスできるようになっています。たとえば記事『WebGPUがついに利用可能に』で紹介したように、WebGLより高いパフォーマンスが期待できます。 Three.jsはウェブで3D表現を作るためのJavaScriptライブラリです。2010年代のWebGL黎明期からThree.jsが多くのウェブサイトで使われており、3Dの代表的なライブラリとも言えます。 Three.jsでは、WebGPU対応が進んでいます。WebGPU対応のレンダラー「WebGPURenderer」が存在し、従来のWebGLRendererとほぼ同じ使い勝手で利用できます。Three.js利用者は低レベルコードを書くことなく、WebGPUの利点を活かせるようになっています。We
はじめに 先日、Blenderで作った3DモデルをThree.jsで動かすようなWebサイトを初めてしっかりめに作ったので、その過程でぶつかった問題について書き残しておきます。主にBlender側の話です。 実際に作ったサイトはこちらです。 自分のサイトを宣伝するわけではないですが、実際に見てもらった方が記事の内容がより把握しやすいかもしれないので載せておきます。 この記事はタイトルの通り、Blenderで作成した3DモデルをThree.jsで扱う際にハマったポイントについてまとめたものであり、上記のサイトの作り方を解説する記事ではありませんのでご了承ください。 主要技術のバージョン Blender: 3.0.0 Three.js: r132 react-three-fiber: 7.0.17 Blenderで親子関係を作ると、座標変換により意図しない見た目になることがある Blender
新卒ブログとは？ 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。 こんにちは、新米エンジニアのにっしーです。 Webサイトでの表現の幅を広げたいと思い、Webブラウザ上で3DCGを制作することができるJavaScriptのライブラリ「Three.js」を勉強しています。 今回の連載では、Three.jsを使った制作物を紹介していきたいと思います（サボり癖があるので、サボらないようにという自戒の意味合いも込めて……）。 同じようにThree.jsの勉強をされている、みなさんの参考になれば幸いです！ ※導入方法などは端折らせていただきますので、あらかじめご了承ください。 完成系 さっそくですが、今回作成したものがこちらです！ 実装方法 1. シーン、カメラ等もろもろを準備 これは、Three
この記事はWebXR Tech Tokyo #1の発表で使用いたしました。 イベントを企画いただいた運営の皆様、会場を盛り上げていただいた参加者の皆様、ありがとうございました！ 2020/7/12追記 こちらのテンプレートがGatsby公式に追加されました。引き続きご利用いただけると幸いです。 https://www.gatsbyjs.org/starters/shunp/gatsby-three-ts-plus/ この記事でできるようになること Three.jsを使った3Dウェブページをモダンな技術スタックを使って簡単に開発・公開できるようになります。オリジナルテンプレートを使うことでスムーズに始められ、またGatsbyを用いることで自分好みのカスタマイズを簡単に加えることが可能です。 以下のサンプルシーンは予めテンプレートに組み込まれております。本記事での解説に加え、必要に応じてテンプ
WebXR Tech Tokyo #2 https://vrtokyo.connpass.com/event/181759/
【Three.js入門】初心者がまず見るべきサイト・書籍まとめ 公開日 : 2021.09.03 最終更新日 : 2022.10.05 コーディング Three.jsを勉強しようと思っても簡単なやり方や概念を説明してくれているサイトはたくさんあるけど、実際案件で使用するためにはどうやって勉強していけばよいのか分からない人は多いと思います。 今回はThree.js初級者が中級者になるために見るべきサイトや書籍をまとめました！ これら全てを行えば、初心者を脱出出来るでしょう！ 【サイト】Three.js入門サイト WebGLやThree.jsのことを調べるまず最初に出てくる池田 泰延:twitterさんが初心者にも分かりやすくThree.jsのことを説明してくれています。 まずはこちらのサイトから勉強を進めてみるのが良いかと思います。 https://ics.media/tutorial-th
Everything you need in one place: 93 hours of video to go from absolute beginner to advanced Three.js developer.
こんにちは。フロントエンドエンジニアになりたてのぼこです。 最近プライベートでBlenderを始めまして、作った3DモデルをWeb上で扱う練習をしたりしています。 ブラウザ上で3Dモデルを表示するためには、まず作成した3Dモデルのデータをgltf（glb）という形式で書き出し、それをWebGL（Three.js）で読み込んでcanvasに表示することになると思いますが、やってみると「あれ、Blenderで作ったときとなんか色味が違う……」っていう現象に陥ることが少なくないように思います。 せっかくBlenderでいい感じに調整したのに、いざThree.jsに持ってきたときに表示が変だと悲しいですよね。 今回はその問題を解決するための備忘録的な記事を書こうと思います。 使用ツールのバージョン Blender： 2.93.0 Three.js： r135 とりあえず結論 Three.jsに持っ
クリエイティブ開発者のブルーノ・シモンズさんが、3DCGモデリングソフトの「Blender」を使って自身の部屋の3Dモデルを作成し、WebGLとThree.jsを使ってウェブブラウザ上で表現した「My Room in 3D」を公開しています。 My Room in 3D https://my-room-in-3d.vercel.app/ これが「My Room in 3D」。画面右上には部屋の見た目を変更することができる各種パラメーターが用意されています。 「baked」では部屋全体の見た目を変更するオプションが並んでおり、「uNightMix」は部屋の明るさ、「uNaturalMix」は部屋の色味(白基調か木目調か)、「uLightTvStrength」は部屋に配置されているテレビの後ろのライトの強度、「uLightDeskStrength」はデスク周りのライトの強度、「uLightPc
はじめに JavaScriptで3DといえばThree.jsが有名だと思いますが、今日はChatGPTへ質問して得た回答でThree.jsを使ったアニメーションプログラミングをしてみたいと思います。 まずは全部お任せでアニメーション 質問 HTMLとJSでThree.jsを使って3D画像を動かすコードを教えてください。 すると手順及びコードで分かりやすく教えてくれました。 回答 Three.jsを使って3D画像を動かす基本的なコードを以下に示します。このコードは、HTMLとJavaScriptで構成されており、Three.jsのCDNリンクを含めています。 まず、HTMLファイルを作成してください。以下のコードをindex.htmlという名前で保存してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <
Three.jsを使った2Dアニメーションの実装 公開日 : 2022.01.04 最終更新日 : 2022.10.06 コーディング Three.jsのWebサイトと聞くと3Dサイトがぱっと思ってしまうことが多いかと思いますが、2Dアニメーションをゴリゴリに動かしているサイトでもThree.jsが多様されています。 Three.jsを使用した2Dアニメーションのサイト例とどんな感じで作られているのかをざっとまとめてみましたので、 参考にしてみてください！ 【サイト】みさとと。 超有名制作プロダクションの株式会社SHIFTBRAINに制作されたサイトです。 FWA、Awwwards、CSS Design Awardsなど数々の賞を受賞しており、Web界隈ではかなり話題になりました。 Three.jsをうまく使って、サイトを構築しています。 https://www.town.shimane-
はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはこちら サンプルコードはこちら 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・加工等して利用する場合の記載例）「新宿駅周辺屋内地図データ」（国土交通省）（https://www.geospatial.jp/ckan/dataset/mlit-i
ここでは、ReactからThree.jsを利用して、PLATEAUの3D都市モデルを宣言的に扱う方法を紹介します。フロントエンドフレームワークにはNext.js（https://nextjs.org/）、プログラミング言語にはTypeScript（https://www.typescriptlang.org/）を使います。そしてThree.jsを宣言的に扱うため、React Three Fiber（https://github.com/pmndrs/react-three-fiber）を使います。 ここで利用するライブラリやフレームワークのバージョンは、執筆時最新となる下記のバージョンです。Three.jsやReact Three Fiberは新機能の開発が活発に行われていることや、その他の技術も流動性が高いため、ここで紹介する内容は短期間で変化することに留意ください。
こんにちは、くりちゃんです。 LIGではフロントエンドエンジニアとして、グラフィカルなWebサイトの実装を担当することや、デザイナーさんから通常のWebサイトにはない、特殊な実装を依頼されることが多いです！ つい先日担当させていただいた「けたくま」オフィシャルサイトの実装では、ある箇所をクリックしたら700以上の画像が上から降ってくるような変わった実装をしました。こういった実装はhtmlとcssでは、パフォーマンスや実装コストを考えるとカバーしきれません。 「けたくま」オフィシャルサイト https://ketakuma.com そのためcanvasタグでcanvas2DやWebGLを使用して実装していますが、WebGLは高度な専門知識が求められ、WebGLのみで3DCGを表現するのは難しいので、いつもThreejsなどのライブラリを使っています。 今回はThreejsのユーティリティクラ
青い長方形が表示されているだけですが、テクスチャ画像に表示を切り替えたり頂点の数を変えたり(四角を三角にしたり)する場所にコメントを入れてコネコネできるようにしています(リサイズ対応済み...のはず) 埋め込みcodepenの下に連ねている引用元の素晴らしい入門サイトから、バラバラとコードを繋ぎ合わせているため、コードの整合性や効率に言及できていません。「動いた〜〜やった〜〜」程度の実験場です。「ちょっとこのfragmentShaderの挙動試したいな〜」という時にすぐ動かせる場所がほしくて書いています。 webGL入門サイト webglfundamentals wgld.org ICSメディア オススメwebGL学習教材(動画) codemafiaさん shin-codeさん
WebGL（Three.js）参考サイト10選【日本・海外に分けて紹介】 公開日 : 2022.01.24 最終更新日 : 2022.10.05 コーディング webGLの参考サイトを「日本サイト」「海外サイト」に分けご紹介させて頂きます！ 少しでもwebGLサイトを作る上で助けになってもらえると嬉しいです。 【日本サイト】HOMUNCULUS web業界では知らない人はいないであろう有名な制作会社のホモンクルス。 webGLを使用した美しい流線型のデザインが実装されています。 紹介されている制作実績もwebGLを使用したものが多いので合わせてチェックしてみるのもいいかも。 https://homunculus.jp/ KIRIFUDA こちらも有名企業の切札。 細部までこだわった動き、スクロール時の気持ち良さ。どれを取ってもピカイチです。 こちらの会社さんの制作実績もwebGL満載ですの
Unity WebGLとThree.jsに連動して踊っていただく ごぶさたしてます。@fnobiです。こちらは面白法人グループ Advent Calendar 2022の20日目の記事になります。 確認してみたら前に記事を書いたのは2019年のようですねー。3年の間にディレクター転向したり子会社に転籍したりなんかいろんなことが起きてました。げんきです。現在はカヤックアキバスタジオにてファンコミュニティ事業というチームを率いて頑張っています。 akiba.kayac.studio さてそんなわけで、今回はせっかくなので、今年のプロジェクトでよく使ったUnity WebGL書き出しの話題です。 まずはこちらのサンプルをご覧ください。 youtu.be デモ github レンガ的ななにかが、右と左でおんなじ動きをしてますね。つまんねえなと思ったあなたもうちょっと待ってね。こちら実は、どちらもW
こんにちは、くりちゃんです！ 最近のWebサイトを見ていると、画面遷移が高速でシームレスに遷移するサイトが当たり前のようになってきています。これは非同期遷移と呼ばれる技術で、同一のページ上でHTMLをJavaScriptによって書き換えることで不要なHTTPのリクエストが減り、高速に遷移できことができます。 また非同期遷移を採用することでページ遷移のアニメーションも凝った演出を入れられるので、メリットが多いです。 デメリットとしては、やはり通常の遷移と比べて、HTMLをJavaScriptによって書き換えるので実装難易度が上がること、非同期遷移特有のケアをしないといけない点が出てくるため工数が増える点です。昨今のWeb制作ではNuxt.jsやNext.jsなどのJavaScriptフレームワークの普及によって、非同期遷移を簡単に実現することができます。 しかし、JavaScriptフレーム
新卒ブログとは？ 2024年4月に新卒入社したLIGメンバーが、日々の学びや気づきを綴るブログです。彼らがふだんどんなことを学んでいるのか、気軽にのぞいてみてください。 こんにちは、新米エンジニアのにっしーです。最近Three.jsを使っている際にパソコンのスペックが足りず少し重いので、上司にお願いしてPCのスペックを上げてもらおうかと考えています。 そんなことはさておき、Webサイトでの表現の幅を広げたいと思い、Webブラウザ上で3DCGを制作することができるJavaScriptのライブラリ「Three.js」を勉強しています。 この連載では、Three.jsを使った制作物を紹介していきますので、同じようにThree.jsの勉強をされているみなさんの参考になれば幸いです！ 前回は、スフィアジオメトリとテクスチャを用いた惑星とパーティクルを使用し星を作成し、宇宙空間を作成しました。まだの方
ただ地図を表示するだけでも面白いのに、それが立体になるとさらにワクワクします。これはGoogleアースなどで立体的な地図を見た時、誰もが感じた感情でしょう。立体化されることで、より体験がリアルに感じられます。 今回紹介するmap33.jsはWeb上で地図を立体的に表示してくれます。建物などではなく、等高線に基づいた立体化になります。 map33.jsの使い方 例です。位置情報は自分で指定します。3Dでぐりぐり動かせます。 位置情報を富士山に指定すればこの通り。 map33.jsは指定した位置情報に基づいて、その周囲の標高を取得して3Dマップに展開します。最初は位置情報を中心とした4×4のタイルですが、ダブルクリックするとその部分のタイルも追加されます。徐々に空間が埋められていく様子は面白いです。 map33.jsはJavaScript製のオープンソース・ソフトウェア（MIT License
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今勤めている会社で『MetaLife』という バーチャルオフィスツール を開発しました。読み方は「メタライフ」です。 「バーチャルオフィス...？なんじゃそれ...？」 っていう方向けに一言で説明すると「リモートワーカーが集まって仕事をするバーチャル空間」です！ コロナ禍以降、「リモートワークで勤務しているよ〜」というエンジニアの方は多いと思います。 MetaLifeはリモートワークで働いているエンジニアとのコミュニケーションを円滑にし、現実のオフィスでありがちな「〇〇さん、今ちょっといいですか？」をオンラインでも実現できる、
Recreating Real-World Terrain With React, Three.js & WebGL Shaders Flight Simulator, Heard Of It? You might know about Microsoft's Flight Simulator release in August last year and like me, if you're interested in flight simulators or photorealistic recreations of real life places, you might have spent a lot of time staring in awe at the amazing detail crammed into the latest iteration of the serie
はじめに Webに3Dモデルを表示したい場合、やはり少しでも容量を軽くしたいですよね。 手元の3Dモデルの形式が何であるかによりますが、 基本的には.glb形式がWebで使う一般的なデータ形式となります。 例えばもし.objでモデルを持っているならobj2gltf、.fbxならFBX2glTFあたりで変換すると便利です。 gltfをglbに変換する場合はmakeglbを使うといいと思います。 実はglb（gltf）に変換するだけで結構容量が圧縮されます。 でも問題はここからです。 ここまで変換してもまだ重い、もしくはBlenderから直接glb出力したけどめっちゃ重い！！ ということも結構ありますよね〜 そういう場合の対処法が、 DRACO圧縮とBasis圧縮です。 本記事では、上記の圧縮を行い、three.jsを使用してWebに表示するまでを解説します。 ちなみに今回使用する圧縮なのです
Welcome to Discover three.js! Hello and welcome to Discover three.js! In this book, we’ll show you how to harness the power of the third dimension to create websites that really stand out from the crowd, using the three.js JavaScript graphics library. Whether you want to create product displays, landing pages, data visualization, music videos, advertising, games, CAD, CAM, or BIM software, or any
Introduction Three.js は言わずと知れた JavaScript 製の WebGL グラフィックスライブラリだ 公式ドキュメントは充実しているし、何といつの日からか日本語でも読めるようになっている 私は Three.js を勉強していく上で、これを React ( Next.js ) 上で動かせたら随分楽だろうになあと思っている 理由は、最近の React app ( Next app ) の create コマンドがなかなか行き届いていて、すぐにローカルの Web アプリ環境を立ち上げることができるのと、 VSCode の拡張機能の充実から、 Three.js もそうだが、オブジェクトのプロパティ等の補完をいい感じに出してくれること、 TypeScript ・・などなどがある ( Three.js も @types のパッケージがあるので有り難い ) あとは React
こんにちは、くりちゃんです。 今回はThree.jsを使って画像からパーティクルアニメーションを実装したいと思います。パーティクルアニメーションを実装するうえでパーティクル一個一個の位置情報は絶対必要になりますよね。前回の記事ではジオメトリーを元に位置情報を設定していましたが、今回は画像から位置情報を抜き取ります。 そこでCanvasAPIのgetImageDataというメソッドを使用してcanvas要素からピクセル情報をImageDataオブジェクトの形式で取り出します。 試しにLIGのロゴ画像を用意してピクセル情報を取得してみます。 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const width = 868; const height = 464; can
~ この記事はTech KAYAC Advent Calendar 2020の18日目の記事になります ~ こんにちは！クライアントワークチーム・フロントエンドエンジニアの深澤です。web や unity の実装を担当しています。 今日は three.js で soft particle （ソフトパーティクル）を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴 実装方針 three.jsでの実装 JavaScript GLSL 改善点 霧の表現 最後に ソフトパーティクルについて ソフトパーティクルとは おおまかに一言でまとめると「深度値の比較をして透過率
Hello. I'm Takuya Matsuyama from Osaka, Japan, an indie developer making a Markdown note-taking app called Inkdrop. In this video, I share how I built my portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js. I hope you enjoy it! ▶ Check out my product: Inkdrop - Markdown note-taking app https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_conte
ラインを生成します。 始点と終点の頂点座標を設定し、頂点座標の配列からsetFromPointsを使用して、BufferGeometryを生成してラインを生成します。 //頂点座標の配列 const points = []; points.push(new THREE.Vector3(0,3,0)); points.push(new THREE.Vector3(5,3,0)); //頂点座標の配列からBufferGeometryを生成 const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineBasicMaterial(); const line = new THREE.Line(geometry,material); scene.add(line);
Blenderで作成した3Dモデルを、Three.jsでWEBブラウザに表示する方法をご紹介。 blenderで作ったモデルをthree.jsでブラウザに表示してみました!https://t.co/YCZO2y4Aec pic.twitter.com/YVpIT702YL — くまミックス@blender (@artKumamix) December 6, 2021 Blenderで作成した3Dモデルを、Three.jsでWEBブラウザに表示する方法 下記のような手順となります。 Blenderで3Dモデルを用意する 3DモデルをglTFファイルとしてエクスポートする Three.jsをダウンロード ファイルを作成 ①Blenderで3Dモデルを用意する まずは、Blenderで表示したい3Dモデルを作成してください。 モデルが作成後、下記のことに注意してください。 （WEBブラウザで表示
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く