簡単な Three.js のサンプルを試そう - ICS MEDIA
Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 ライブラリのセットアップから3D画面への表示および直方体の回転までを紹介します。手順通りに進めば、20分くらいで作業が完了できると思います。 サンプルを再生する サンプルのソースコードを確認する まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。 <html> <head> <meta charset="utf-8" /> <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js" } } </script> <script t
three.js でMMDを使う
○ この記事で書くこと MMDLoaderを使ったMMDモデルの読み込み アニメーションの付け方 アニメーションの発火・切り替え three.jsの基礎はこちら：Hello three.js World 準備 この記事で使うmmdモデルとvmdのモーションファイルをダウンロードします：GoogleDrive モデルはLat様のものを拝借しており、無改変で使用させて頂いております。 モデルの使用、再配布、モーションの利用、再配布についてもそれぞれファイル内に同包されているRedeMeに従ってください。 〇 MMDLoaderを使ったMMDモデルの読み込み 細かい説明は基礎の記事を読んでください。 ここでは読み込み部分のみを中心に書きます。 ファイル構成 - index.html - js - main.js - three.min.js - TGALoader.js - mmdparser.
逆引き風！Three.jsでゲームを作る時に役立ちそうなTips
まずはじめに お前は誰だ Jey-enと申します。業務でC#を、JavaScriptは業務と趣味で合わせて1年という、素人と知ったかぶりの狭間を生きております。 こんなん作った Three.jsでゲームっぽいのが作れるかなと思い、このくらいまでやってみました。 大体ね、「３DぐらふぃっくがWebで出来るようになった！おっしゃゲーム作ったろ！」なんて、脳筋すぎると思いませんかね そのゲームっぽいものを作りながら思いついた、使えそうな小技をお伝えできればと思います。 他の方がやっているように、一つのテーマで完結まで行くという形ではなく、タイトルにもあるように【逆引き辞典風】な何かです。 対象としている人： Three.jsを使って、【何かモデルを表示する】とかできて、次は何をしようかと考えてる人 よせばいいのにUn●tyじゃなくてThree.jsでゲームっぽいのを作ろうとしてる人 せめて「Sc
Three.jsベースのVJ用シーンマネージャーを作った話 - Qiita
作ったもの はじめて作った、ブラウザとキーボードのみのVJアプリの一部抜粋です。 対象者 Three.jsの初心者 入門用のサンプル見たけど、どうやってコンテンツ作っていいか未だピンときてない人。 TypeScriptが何となく分かる人 Three.jsでVJをやりたい オーディオビジュアルパフォーマンスをやることになり、せっかく勉強してるThree.jsを使いたいということで、簡単なシーンマネージャーを作ることにしました。 構想 左右のキーで複数のシーンを切り替え 入力イベントなどを後から追加したりできるよう、拡張性は最低限ほしい 後は作りながら固める どのように作ったか そもそもThree.jsでレンダリングするまでのプロセスを把握する だいたい以下のような仕組みになる。 まずはSceneを作る Sceneの中にオブジェクトを入れる Rendererを作る Cameraを作る Rend
three.jsにおける2D描画方法 - $ cat /var/log/shin
Webブラウザ向けの3DCGライブラリであるthree.jsで、3D描画に2D描画*1を織り交ぜる方法を紹介します。これにより、前景と背景に自由に2D画像を描画できるようになり、ゲームのHUD表示などが可能になります。 基本的な考え方 three.jsに限った話ではありませんが、3DCGで2D描画をしたい機会は多い割に、意外と簡単ではないことが多いです。 3DCGで2D描画を行う場合、大きく分けて2つの方法が考えられます。 1. 3D描画と全く別個に描画を行う。 2. 3D描画で適切にカメラやオブジェクトをセッティングする。 1はWebGLなど3DCG支援機能を一切使わない方法です。Webならcanvas要素の前後に適当にimg要素などを配置するだけで擬似的に実現できます。欠点としては、ちゃんと要素が重なるように位置を調整する必要がある点でしょうか。 2は3DCG支援機能を利用した上で上手
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - takahirox/MMDLoader-app: sample applications for THREE.MMDLoader
three.js webgl - animation - skinning
