マガジンのカバー画像

コンピューター

62
本
運営しているクリエイター
siouxcitizen

#glTF

CodeSandbox上コードをCodeSandbox形式からDevbox形式にコンバート

■CodeSandbox形式からDevbox形式に変換 久しぶりにCodeSandboxで作業をしようと思ったら、無料で投稿できるCodeSandboxのコード数が20までに制限されるらしく、それを上回る数はDevboxというものに変換しなけば Read Only 状態になってしまうとのことだったので、あわててそのDevbox形式に変換しました。　その記録を残しておきます。　 参考 変換前のCodeSandboxへの投稿コードについてのまとめnoteは以下になります。　De

siouxcitizen

Babylon.js v6.3.1 Practiceめも　まとめ

CodePenに投稿したBabylon.js v6.3.1による3Dプログラムを、まとまりのある単位ごとにnoteにリストしていたものをさらにリスト化しましたｗ。　まとめのまとめですｗ。 関連まとめ

siouxcitizen

Babylon.js v6.3.1 Practiceめも④　glTF形式3Dモデルアニメーションいろいろ表示

前回からのつづきです。　今回はglTFファイル形式の3Dモデルアニメーションを表示するプログラムをリストしてみました。　こちらも前回と同じく、読込・表示に時間がかかるものがいくつかあります。 　コーディングは前回までのBabylon.jsコーディングと同じようにHTML、CSS、JavaScriptで行っています（Typescript使っていません）。　目次の各項目では、コードのタイトル文字列をクリックするとコードとその実行結果が見れるCodePenのページを開き、サムネイ

siouxcitizen

Babylon.js v6.3.1 Practiceめも③　glTF形式3Dモデルいろいろ表示

前回からのつづきです。　glTF形式の3Dモデルをいろいろ表示しています。　モデルによっては読込・表示までに時間のかかるものも。 　コーディングは前回までのBabylon.jsコーディングと同じようにHTML、CSS、JavaScriptで行っています（Typescript使っていません）。　目次の各項目では、コードのタイトル文字列をクリックするとコードとその実行結果が見れるCodePenのページを開き、サムネイル画像をクリックすると実行結果をフルスクリーンで表示するCod

siouxcitizen

Babylon.js v6.3.1 Practiceめも②　MagicaVoxel作成3DモデルをglTF形式で表示

前回からのつづきです。　今回はBabylon.jsにて、自分でMagicaVoxelで作成してglTFファイルに変換した3Dモデルを表示しています。　途中からBase64によるglTFファイル読込・表示なども行っています。 　コーディングは前回までのBabylon.jsコーディングと同じようにHTML、CSS、JavaScriptで行っています（Typescript使っていません）。　目次の各項目では、コードのタイトル文字列をクリックするとコードとその実行結果が見れるCod

siouxcitizen

CodeSandboxでReact Three Fiber実験まとめ

React Three Fiberの機能をいろいろ試してみました。 React Three Fiber実験 note リスト React Three Fiberで、BoxやPlane、Sphereといった基本的な3Dオブジェクトの表示、テクスチャー貼り付け、ボタン表示のUI実験を少々等、行っています。 自分で作成したMagicaVoxcelによる3DモデルをglTF形式ファイルに変換して表示しています。 上記「その２」よりひきつづき、色々なglTF形式ファイルによる3

siouxcitizen

CodeSandboxでReact Three Fiber実験その５　glTF 3Dモデルアニメーション切り替え表示

■20240126追記　ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。　またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。 前回のその4のつづきです。　今回はglTF形式のファイルに含まれる、3Dモデルの複数のアニメーションを切り替える処理を実装したコードをCodeSandboxへ投稿してみました

siouxcitizen

CodeSandboxでReact Three Fiber実験その４　glTF 3Dモデルアニメーション表示

■20240126追記　ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。　またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。 前回のその３のつづきです。　今回はglTFファイル形式の3Dモデルアニメーションを表示させる、CodeSandboxに投稿したコードをリストにしてみました。　3Dモデルをアニ

siouxcitizen

CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示

■20240126追記　ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。　またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。 前回のその２のつづきです。　今回は前回glTFファイル形式の3Dモデルを表示できるようになったコードを参考に、いくつかの3Dモデルを表示するテストコードを作成しCodeSan

siouxcitizen

CodeSandboxでReact Three Fiber実験その２　glTF 3Dモデル表示テスト

■20240126追記　ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。　またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。 前回のその１のつづきです。　今回はCodeSandbox上のReact Three Fiberで、glTF形式の3Dモデルを表示してみました。　最終的に使用したライブラリは前

siouxcitizen

Babylon.js v4.2.0　CodePen投稿コードまとめ

CodePen投稿Babylon.js v4.2.0使用コードについてのnoteまとめリストです。 こちらもBabylon.js v3.3.0　CodePen投稿コードまとめと同じようにBabylon.js v4.2.0版を作成してみました。 Babylon.js v4.2.0 Practiceめも① BoxやSphereといった基本的な3Dオブジェクトを表示させています Babylon.js v4.2.0 Practiceめも② 主にGUI機能を試してみました Ba

siouxcitizen

Three.js r110　CodePen投稿コードまとめ

CodePen投稿Three.js r110使用コードについてのnoteまとめリストです。 基本的な3Dオブジェクト表示コードの埋め込み立方体、球、といった基本的な3Dオブジェクトや、それらにテクスチャを貼り付けた3Dオブジェクトを表示するコードのリストをnoteに埋め込んだものです。 Three.js r110　CodePenコード埋め込み　その1 glTF形式3Dモデル表示コードの埋め込みglTFという3Dモデル用ファイル形式による3Dモデルを表示するコードをno

siouxcitizen

Babylon.js v3.3.0　CodePen投稿コードまとめ

CodePen投稿Babylon.js v3.3.0使用コードについてのnoteまとめリストです。 関連まとめ Babylon.js v4.2.0　CodePen投稿コードまとめ Three.js r110　CodePen投稿コードまとめ

siouxcitizen

CodePenコード埋め込みテスト

CodePenのコードをnoteに埋め込めるようになったと以下サイトにあったのでテストしてみました。 【noteカイゼン】 GitHub Gist、CodePenが埋め込めるようになりました Three.jsという3Dライブラリを使って、glTFという3Dモデルのファイル形式を表示するCodePenのコードを埋め込んでいます。

siouxcitizen