タグ「three.js」 - はてブログ

タグ three.js

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 47件)

Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita

2023/12/25 217 users Qiita SvelteKit Demo 操作コチラ

これは MIERUNE AdventCalendar 2023 24日目の記事です! 昨日は@northprintさんによるSvelteKitでURLクエリパラメーターの操作をするでした。はじめにこの記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはコチラ使用するデータ今回は、G空間情報センターで公開されている「新... 続きを読む

頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

2023/05/19 102 users WebGL ウェブデザイン ICS MEDIA 別ウィンドウ

ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。サンプルを別ウインドウで開くコ... 続きを読む

必要なのはJavaScriptの基本的な知識だけ　3Dアニメーション制作をお手軽にする「Three.js」の魅力

2023/03/04 284 users JavaScript コーダー知識魅力ナレッジ

エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、... 続きを読む

Three.jsの勉強の仕方 - Qiita

2022/04/04 301 users Qiita ラッパ React用アプリケーション過程

概要 Three.jsの勉強を始めて半年くらいが経過しました。現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について私は主に、React Three Fiber（Three.jsをReact用にラッパ... 続きを読む

three.jsで流体シミュレーション(stable fluids) | mofu-dev

2022/01/04 233 users 流体シミュレーション

WebGL/shader/3DCGについてのブログ続きを読む

Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介

2021/12/05 130 users WebGL ライブラリ成果クラスカメラ

こんにちは、うえむーです。今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な... 続きを読む

生 WebGL と TypeScript で Vercel のロゴを作る

2021/02/08 16 users WebGL TypeScript Vercel ロゴ関係

はじめに完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソ... 続きを読む

プログラミング初心者からthree.jsに慣れるまで｜misaki nakano｜note

2019/04/07 528 users Note アムステルダムかんじプログラミング初心者仕事

こんにちは。私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのも... 続きを読む

three.js超入門第0回 3Dコンピュータグラフィックスの基礎 - Qiita

2018/12/20 73 users シェーダー Qiita 構文ターゲット執筆時点

概要この記事では「three.js超入門」と題して、three.jsの基礎からシェーダーの利用までをやっていきます。ターゲットは主に「canvas表現を触ったことがないフロントエンドエンジニア」を想定しているので、jsの構文などの説明は省略しています。 three.jsのバージョンは執筆時点で最新のr98を使用します。 three.js超... 続きを読む

WebGL開発に役立つベクトルの足し算・引き算 (Three.js編) - ICS MEDIA

2017/02/27 34 users ベクトル座標 ICS MEDIA プログラム基礎

みなさんベクトルをプログラムで活用していますか？学校で学んで以来、縁が無くなってしまった人も多いかと思いますが、実は 3Dコンテンツの制作においてベクトルは非常に役に立つ概念なんです。本記事では Three.js とベクトルの基礎である足し算・引き算を使った座標の計算方法を紹介します。ベクトルと聞くだけで拒絶してしまう人もいるかと思いますが、心配することはありません。Three.jsが煩わし... 続きを読む

three.js / editor

2017/01/02 57 users Editor

ステラのまほうのエンディングで始めるThree.js

2016/12/09 14 users まほう目次はじめステラエンディング

この記事は、 Three.js Advent Calendar 2016 9日目の記事です。たまたま空いていたので、まんがタイムきらら Advent Calendar 2016 9日目の記事でもありますが、きらら成分はステラのまほうのアニメ(しかもエンディングだけ)となっていますので気をつけてください。 ✗目次何でThree.js? はじめの一歩四角を表示する四角を増やすランダムにいっ... 続きを読む

超簡単に3DCGできるJavaScriptライブラリ作った - aikeの日記

2015/01/29 378 users WebGL aike 敷居四角い箱違和感

ブラウザでWebGLが使えるようになって3DCG作成はずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。　three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表... 続きを読む

WebGLでかっちょいいシンセできたよー - aikeの日記

2015/01/24 45 users WebGL aike github.com ウェブブラウザ

ちょうど3年前に当時出始めのWeb Audio APIを使ってウェブブラウザで動くシンセを作りました。その後ブラウザのAPIもいろいろと進化したので、それに合わせてバージョンアップをしてみました。　　http://aikelab.net/websynthv2/https://github.com/aike/webaudiosynthv2　■新バージョンの特徴・WebGL(three.js、Thre... 続きを読む

Three.js を拡張して簡単にボクセル風なレンダリングができるようになる PixelBox - WebGL 総本山

2015/01/06 31 users WebGL example レンダリング総本山ライブラリ

独特な雰囲気が面白いボクセル風レンダリング今回ご紹介するのは、three.js に組み込んで利用することを前提に作られたライブラリである PixelBox です。 Example を見ると実際に動いている様子も確認できます。なかなか面白い独特な雰囲気になっていますので、表現方法のひとつとして参考にしてみてはいかがでしょうか。独特な雰囲気が面白いボクセル風レンダリング今回ご紹介するのは、th... 続きを読む

WebGLで伝わる立体地図コンテンツ。御嶽山噴火時の証言を集めた『NHK 御嶽山「噴火の証言」』開発秘話 - WebGL 総本山

2014/12/16 42 users WebGL DOM 噴火本稿証言

御嶽山噴火時、その場にいた人たちの証言を集めたコンテンツ『NHK 御嶽山「噴火の証言」』。 Three.jsの利用やDOMとの連携など、製作者の立場から、WebGLでコンテンツを作る利点や注意すべき点について語ります。 ※本稿は実際にサイト作成に関わった面白法人カヤックのフロントエンドエンジニアのごんさんからご寄稿いただきました！　ありがとうございます！御嶽山噴火時、その場にいた人たちの証言を集め... 続きを読む

【忙しい人向け】JavaScriptで3D物理エンジン動かしてみる (three.js + ammo.js) - Qiita

2014/11/12 58 users WebGL Qiita Blender MMD Unity

きっかけ Blenderでアペンドミクさん表示したい。Blenderにpmxを読み込みレンダリングまで ↓ Unityでアペンドミクさん動かしたい。MMD4Mecanimを使用してMMDモデルにUnityで踊って頂いてみた。 ↓ WEBブラウザ上でMMD動くの！？MMD on three.js / three.jsで遊んでみる（29） ↓ とりあえずWEBGLと物理エンジン試してみよう　←イマココ... 続きを読む

openFrameworks, Three.js, Processing のGLSL バージョン対応状況調査 - 自習室

2014/10/15 27 users GLSL Processing Shader 合宿自習室

2014-10-14 openFrameworks, Three.js, Processing のGLSL バージョン対応状況調査 .JavaScript .openFrameworks .OpenGL .Processing .Shader .Android はじめに openFrameworksのセミナーでShaderに触れたこの週末、合宿で行われた openFrameworks のセミナー... 続きを読む

Oculus Riftの仮想空間でプログラミングしてリアルタイムで3Dアニメーションを作成 - GIGAZINE

2014/10/06 47 users GIGAZINE YouTube Oculus Rift

没入型3Dヘッドアップディスプレイの「Oculus Rift」向けに、JavaScriptライブラリーのthree.jsを使い仮想空間内で3Dアニメーションをリアルタイムで作成可能なライブコーディングWebアプリが開発されました。開発者のBrian Peirisさんは、実際にアプリを使って仮想空間内で3Dアニメーションを作成している様子をYouTubeに公開しています。 Live coding i... 続きを読む

Three.jsに挫折した人のための、ブラウザでグリグリ動く3Dゲームを秒速で作る! gl.enchant.jsの使い方:電脳ヒッチハイクガイド:電脳空間カウボーイズZZ(電脳空間カウボーイズ) - ニコニコチャン

2014/06/29 29 users 秒速ちゃん enchant.js 電脳ヒッチハイクガイド

新しいMacOS、そしてiOSで、ついにWebGLが正式サポートされました。これは地味に夢が広がりんぐです! WebGLといえばThree.jsが有名ですが、Three.jsはガチの3Dライブラリのため、ゲームをつくるにはかなり沢山のことを勉強しなければなりません。そこで世界で最も簡単に(当社比)3Dゲームが作れるgl.enchant.jsの使い方を紹介したいと思います ■WebGLってなん... 続きを読む

デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG

2014/06/24 127 users 株式会社LIG

こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。今回は実際にWebGLを使った3D表現にチャレンジしてみます。 Javascrip... 続きを読む

Tokyo WebGL meetup行った #webgl_tokyo - pirosikick's diary

2014/06/13 13 users WebGL meetup 品川 http 意見

2014-06-14 Tokyo WebGL meetup行った #webgl_tokyo 勉強会 javascript webgl http://tokyowebglmeetup.github.io/ 行ってきた。半年間仕事でThree.js使ってたし、WebGL自体もすごく注目してたので楽しみに品川へ。個人の意見だけどWebGLってとっつきにくいし（Three.js使えば楽だけど）、他のH... 続きを読む

How to convert MMD files to JSON for three.js

2014/02/19 53 users

I published a video, which is explaining the way to convert MMD files ( PMX and VMD ) to a JSON file for three.js. Here is it. The convert was operated on Blender. Preparation Check the language setti... 続きを読む