Blender2.8でglTFを出力
「glTFをThree.jsで読み込み」でglTFをThree.jsで読み込みましたが、その頃は3DCGを始めたばかりでわからないことも多く、Three.jsで読み込んだとき色や質感が再現できませんでした。最近Blender2.8が正式リリースされ、標準でglTFが出力できるようになったので、「BlenderでiPhoneXSを制作(2)」で制作したiPhoneXSをglTFで出力して、Three.jsで読み込んでみました。 Blenderにも慣れてきて参考書も出始めてきたので、そろそろBlender2.8を使い始めようと思います。 ● PBRマテリアルの設定 マテリアルとテクスチャを表示させるため、BlenderのプリンシプルBSDFでPBRマテリアルを設定します。PBR（物理ベースレンダリング）は現実の光学現象をシミュレートすることにより、リアルな質感を表現できるレンダリング方法です。
Blenderとthree.jsを使って行うモーフィングアニメーション | KnockKnock
今回は、Blenderでモデリング、アニメーションをつけて、JSON形式で書き出して、three.jsでJSONデータを読み込んで、モーフィングアニメーションを再現する流れを、ざっくりと説明出来ればと思います。 ソースコードは、以下よりダウンロード頂けます。 ソースコード モデリングとアニメーションの作成にBlenderを使っています。Blenderはオープンソース（無償）の3DCG制作ツール で、現時点での最新バージョンは2.72bになります。3DCG制作ツールはMayaや3dsMaxやLightwave3D等、高機能なプロ用ソフトが多くありますが、どれもそれなりの価格になります。Webコンテンツでの利用においては、レンダリングはあくまでブラウザ上なので、使う機能と言えば、せいぜいモデリングとアニメーション程度になり、高価で高機能な3DCG制作ツールは、オーバースペックだと思います。Bl
How to convert MMD files to JSON for three.js | Yomotsu net
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 setting at preference to display Japanese characters. Install and activate following addons mmd-tools io_mesh_threejs Load MMD files Load a PMX file Select all bones Load a VMD file Bake Actionsome bones o
Three.jsでJSON形式でモデルを読み込んでBoneアニメーションさせるときの注意点 - Qiita
ちょっと（だいぶ？）ハマったのでメモ。 いやー、Three.jsはupdateが激しいのと、そもそも日本語記事が少ないのでだいぶ苦戦した。（というか、まだ全然しっかり把握できてないけど） とりあえず モデルを読み込んでアニメーションさせる 、というWebGLでなにかやるときに避けて通れない処理でハマったのでメモ。 まず結論から言うと、**Boneアニメーションをさせる際は、Boneの数が問題になる**ぽい。 boneの数はどうやら関係ないぽい。改めて書きだしてみたら正常にアニメーションしました。 ちなみにモデルデータはBlenderでThree.jsのJSON形式にExportしたものを使用。 Export設定 モデルを作成してBoneをいくつか適当に追加してから（17くらい？）Exportして読み込ませたところ、モデル自体は正常に読み込まれているものの、アニメーションしない。 試しにBo
three.js で Blender のデータを表示してみるテスト - jsdo.it - Share JavaScript, HTML5 and CSS
three.js で Blender のデータを表示してみるテスト ＜対応した点＞ @boxheadroom さんの立体浮世絵データ（Blender形式）を three.js で表示してみました。 ＜手順＞ 1. Blender のダウンロード ■ Download Blender 2.72 for Windows http://www.blender.org/download/ 2. Blender のインストール 3. Blender にてデータ読み込み ■ 浮世絵をBlenderのsculptで立体っぽくしてみた http://boxheadroom.com/webgl/ukiyoe.zip 4. ポリゴン数削減 ■ Blenderを用いたポリゴン数削減 - 情報メディア実験 http://slis.tsukuba.ac.jp/~fujisawa.makoto.fu/lecture/
『Three.jsとBlenderによるWebGL』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。 html5、javascript、flashなどのクライアント開発を メインに担当しております、 菅家(@KA_ka_YY)と申します。 弊社3月に行われました、エンジニア、デザイナーを対象とした アプリコンテストというイベントにて WebGLを使用した野球盤ゲームを作成しました。 その際利用したThree.js（WebGLのjavascriptライブラリ）を用いた WebGLの使用方法を紹介させていただこうと思います。 （1）レンダリングまずは Blender というフリーの3Dモデリングソフトで 以下のようなキャラクターを作りました
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SSSSLIDE