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

タグ three.js

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

(1 - 25 / 25件)

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のコンテンツを表示するライブラリです。ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な... 続きを読む

プログラミング初心者から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超... 続きを読む

three.js / editor

2017/01/02 57 users Editor

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

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

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

【忙しい人向け】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と物理エンジン試してみよう　←イマココ... 続きを読む

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

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

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

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... 続きを読む

HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ | ClockMaker Blog

2014/01/01 210 users Away3D TypeScript WebGL HTML5

HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ HTML5で3Dを実現するWebGL対応のフレームワークAway3D TypeScriptが10月に発表されました。WebGLで3Dを実現する類似ライブラリとしてMr.doob氏らが開発しているThree.jsが名前が知られていますが、Away3D TypeScriptは同等以上に高機能であり高... 続きを読む

WebGL無しiOSでも簡単軽快3D。three.jsとCSS3DRendererでDOMを3D化

2013/08/27 67 users DOM periodic table HTML 実装近年

three.js CSS3D sample – periodic table 近年、各プログラミング言語による3Dライブラリの充実によりウェブの世界でも簡単に3D制作ができるようになってきましたが、肝心なコンテンツがまだ少ない印象を受けます。その原因の１つになっている（と思われる）のが、実装の難しさや手間だったりするわけですが、今回はhtmlのDOMを使って手軽に本格3D表現ができる方法をご紹介し... 続きを読む

ラノベを本屋の売り場っぽく自分好みに積み上げることができる「ブクスタ」 - GIGAZINE

2013/04/08 50 users GIGAZINE WebGL ウェブサービスライトノベル

「私なら本をこうやって積むのになあ」や「積まれている本を見ているだけで楽しい」といった思いを抱く人々の夢が叶えられるかもしれないウェブサービスが「ブクスタ」です。WebGLによる3D(three.js)で立体的に表示され、ちゃんとページ数によって分厚さも反映されるというこだわりがなされており、Amazonで販売されているライトノベルを選択し、売り場となるスペースに自由に配置することが可能。「SF」... 続きを読む

3D ゲームも簡単に作れる! tmlib.js x three.js(WebGL) で 3D プログラミング出来るようにしてみた!! | TM Life

2013/01/21 67 users WebGL tmlib.js 自前 TM Life ゲーム

私の方でずっと作っている JavaScript ライブラリ『tmlib.js(ティーエムリブジェイエス)』ですが, この度, 晴れて『three.js』と結ばれることとなりました. っとはいっても一方的にですけどねw tmlib.js は, 2Dゲームだったりツールを作る機能は揃っていましたが 3D に関する機能は今までありませんでした. WebGL をラップして自前で作ったりもしていたのですが... 続きを読む

Web ブラウザで動くとは思えない、凄い WebGL デモ・アプリ 65 個 - WebOS Goodies

2013/01/15 179 users WebGL ハンズオン WebOS Goodies 物体告知

今月の 22 日に GTUG Girls のイベントで WebGL (Three.js) のハンズオンをやります。内容は初心者向けで、簡単な物体を表示してみたりして Three.js の基礎を学ぼうというものです。女性限定ですが、興味のある方はぜひご参加ください。【告知】第10回GTUG Girls Meetup 「キラリとひかるモノ作り！WebGL(Three.js)入門編」　募集開始！で、... 続きを読む

Three.jsとBlenderによるWebGL｜1 pixel｜サイバーエージェント公式クリエイターズブログ

2012/05/23 99 users Pixel WebGL Blender サイバーエージェント

1 pixel｜サイバーエージェント公式クリエイターズブログサイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 Entries スマートフォン版ブ･･･ » Three.jsとBlenderによるWebGL Wed, May 23, 2012NEW ! Theme: ... 続きを読む

踊るJavaScriptがPerfume - 音の鳴るブログ

2012/03/31 64 users Perfume GitHub Flash http ヤツ

http://mohayonao.herokuapp.com/perfume http://www.perfume-global.com で、Perfumeのモーションデータが配られているので、とりあえずJavaScriptで踊らせてみた。 3Dの処理は Three.js でやっているし、GitHubのFLASHのやつをベースにJavaScriptにするだけなので、よく分かっていなくてもできる。 ... 続きを読む

JavaScript 3DレンダリングエンジンのThree.jsを試す | KRAY Inc

2012/02/03 353 users KRAY Inc github.com 半信半疑ボックス

こんにちは。 KRAYアルバイトの浅海です。今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。半信半疑で使ってみたところ、たしかに... 続きを読む

[JS]Canvas, SVGを使用した軽量のJavaScriptの3Dエンジン -three.js | コリス

2011/04/14 97 users スクリプトデモ記述 canvas コリス

通常、複雑な記述をより簡単にできるようにした、3Dを描画する軽量のスクリプトを紹介します。サイトでは下記のように数多くのデモが楽しめます。 three.js -Javascript 3D Engine three.js [...] 続きを読む

MOONGIFT : JavaScriptの3Dエンジン「Three.js」オープンソース・ソフトウェア/フリーウェアを毎日紹介

2010/10/02 210 users テキストエディタ MOONGIFT SBS フリーウェア性能

オープンソース・フリーウェアを毎日紹介するブログ。日々の業務の効率化、新しいサービスのネタ探しにどうぞ。SNS、SBS、CMS、オフィス、画像編集、ユーティリティ、Firefoxアドオン、テキストエディタ、ゲーム…ジャンルは様々。 Three.jsはJavaScriptのオープンソース・ソフトウェア。Webブラウザが高機能化していく中で競われているのがJavaScriptエンジンの性能だ。実行速度... 続きを読む