WebGLとCanvas2Dを併用してみる - Qiita
WebGLとCanvas2Dを併用できないかな〜とぼんやり考えてたら、以下のAPIを見つけました。 ・Canvasリファレンス なんと第1引数のimageにimg要素、canvas要素、video要素が指定できるとっ！ これで描画して更新すれば、canvas2DにWebGL描画できそうなのでやってみました。 WebGL描画をCanvas2Dに描画 ソースはこんな感じです。 ここには書いてないですが、別途WebGLのcanvasをgetElementByIdし、変数canvasを渡しておきdrawImageの第1引数に指定します // WebGLのcanvasとは別に、2D用のcanvasタグをHTML側に作って参照する var can_2d = document.getElementById("2dcanvas"); var ctx_2d = can_2d.getContext("2d")
「原神」がMMDモデルを配信してくれたので、JavascriptでMMDビューアを作った - Qiita
原神のホームページで、MMDファイルを公開してくれました。太っ腹！ 原神のキャンペーン公式サイトの紹介記事 https://www.gamespark.jp/article/2020/10/08/102819.html なので、これを機会に、JavascriptでMMDファイルを表示するビューアページを作ってみようと思います。 原神のキャンペーン公式サイト(中国語) http://ys.biligame.com/gczj/ ここから、MMDファイルをダウンロードします。 ※現在は以下からダウンロードできます。 https://genshin.mihoyo.com/ja/news/detail/5885 MMDファイルの表示には、three.jsにあるMMDLoaderを使いました。 mrdoob/three.js https://github.com/mrdoob/three.js という
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.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - adrianhajdin/iphone: Recreate the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects. From custom animations to animated 3D models, this tutorial covers it all.
https://x.com/tomonorix0805/status/1768493729441271809?s=12&t=WLoQjPOJLfZ0ZJFtTOS7aw
GitHub - bgstaal/multipleWindow3dScene: A quick example of how one can "synchronize" a 3d scene across multiple windows using three.js and localStorage
