簡単な Three.js のサンプルを試そう - ICS MEDIA
Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 ライブラリのセットアップから3D画面への表示および直方体の回転までを紹介します。手順通りに進めば、20分くらいで作業が完了できると思います。 サンプルを再生する サンプルのソースコードを確認する まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。 <html> <head> <meta charset="utf-8" /> <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js" } } </script> <script t
逆引き風！Three.jsでゲームを作る時に役立ちそうなTips
まずはじめに お前は誰だ Jey-enと申します。業務でC#を、JavaScriptは業務と趣味で合わせて1年という、素人と知ったかぶりの狭間を生きております。 こんなん作った Three.jsでゲームっぽいのが作れるかなと思い、このくらいまでやってみました。 大体ね、「３DぐらふぃっくがWebで出来るようになった！おっしゃゲーム作ったろ！」なんて、脳筋すぎると思いませんかね そのゲームっぽいものを作りながら思いついた、使えそうな小技をお伝えできればと思います。 他の方がやっているように、一つのテーマで完結まで行くという形ではなく、タイトルにもあるように【逆引き辞典風】な何かです。 対象としている人： Three.jsを使って、【何かモデルを表示する】とかできて、次は何をしようかと考えてる人 よせばいいのにUn●tyじゃなくてThree.jsでゲームっぽいのを作ろうとしてる人 せめて「Sc
three.jsにおける2D描画方法 - $ cat /var/log/shin
Webブラウザ向けの3DCGライブラリであるthree.jsで、3D描画に2D描画*1を織り交ぜる方法を紹介します。これにより、前景と背景に自由に2D画像を描画できるようになり、ゲームのHUD表示などが可能になります。 基本的な考え方 three.jsに限った話ではありませんが、3DCGで2D描画をしたい機会は多い割に、意外と簡単ではないことが多いです。 3DCGで2D描画を行う場合、大きく分けて2つの方法が考えられます。 1. 3D描画と全く別個に描画を行う。 2. 3D描画で適切にカメラやオブジェクトをセッティングする。 1はWebGLなど3DCG支援機能を一切使わない方法です。Webならcanvas要素の前後に適当にimg要素などを配置するだけで擬似的に実現できます。欠点としては、ちゃんと要素が重なるように位置を調整する必要がある点でしょうか。 2は3DCG支援機能を利用した上で上手
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
