1 - 6 件 / 6件
概要 Three.jsの勉強を始めて半年くらいが経過しました。 現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について 私は主に、React Three Fiber(Three.jsをReact用にラッパーしたライブラリ|以下、R3F)を使用して開発してます。 バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。 とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。 ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじ
はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはこちら サンプルコードはこちら 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版(ShapeFile)を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国(又は府省等)が作成したかのような態様で公表・利用してはいけません。(コンテンツを編集・加工等して利用する場合の記載例)「新宿駅周辺屋内地図データ」(国土交通省)(https://www.geospatial.jp/ckan/dataset/mlit-i
はじめに この記事ではこんな表現の実装方法を解説します。 ▼ GIF ▼ CodePen (0.5x を押すと見やすいです) ▼ 2021年7月26日 追記 CodePen( 慣性スクロールありバージョン) 海外のデザインアワードを受賞するようなリッチなサイトで良く見る演出(個人的主観)です。WebGLの汎用的な表現な気がしますが、その実装方法を解説する記事は(少なくとも日本語では)ほとんど見つけられなかったので、自分の勉強も兼ねて書くことにしました。ちなみに技術記事を書くのは初めてに近いので暖かい目と心で読んでいただけます幸いです。実装はThree.jsを用いています。 注意事項 想定する読者 Three.jsを触ってみたが、サイト制作に活かす術が分からない、同様の表現を良く見るけどどうやって実装しているか分からない、といった方を対象としています。従って本記事では、Three.jsの基本的
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く