[B! threejs] nunnununのブックマーク

Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita

これは MIERUNE AdventCalendar 2023 24日目の記事です! 昨日は@northprintさんによるSvelteKitでURLクエリパラメーターの操作をするでした。はじめにこの記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはコチラ使用するデータ今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。データについての詳細は製品仕様書に記載されています。この記事のように、データの加工利用には以下の出典が必要となります。コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・

nunnunun 2023/12/26

リンク

【React】react-three-fibarで3D表現をする（Mixamoを使ったアニメーションモデル） - Qiita

概要 Three.jsのReact用ライブラリ react-three-fibar を使用して、Adobe Mixamoからダウンロードしたモデルをブラウザ上で表示する方法をまとめました。 https://nemutas-mixamo-animation.web.app/ 着想は公式デモから得ていますが、少し作りを変えています。デモでは、ひとつのモデルファイルに3Dモデルと複数のアニメーションをまとめて、それをインポートしています。ただこの方法だと、MixamoからダウンロードしたデータをBlenderなりで統合する手間がかかります。この手間は、アニメーションを後から追加したり3Dモデルを変更する場合も発生します。そこで、実装におけるコンセプトとして、にします。環境 react － 17.0.2 typescript － 4.4.3 three － 0.132.2 react-t