Three.js r110とAmmo.jsを併用して物理演算してみるテストその３
「Three.js r110とAmmo.jsを併用して物理演算してみるテストその２」の続きとして背景の表示をいろいろ試してみました。 そのようなことなので新しいAmmo.jsの機能はほぼいじってないです。。。 タイトル詐欺かもです。。。
そんなですが、まず最初の
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その06
は、主に本家Three.jsサイトのデモを元に草原と霧といった趣の背景を表示しています。
テクスチャやfogの設定については以下のサイトを参考にさせていただきました
Three.js Examplesのデモ
Three.js Examplesのデモのコード
three.js の PlaneGeometry で地形を作る
次の
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その07
ではBoxを使用して空を表現しています。
空として使用するBoxの内側に空の画像をテクスチャとして貼り付けて空を表現しています。 ふ～ん、こんなやり方があるんだな～と感心しながら作業してました。
空用のテクスチャやBoxの設定については以下のサイトを参考にさせていただきました
・消しゴムとばし物理演算の雲のスカイボックスのデモ
・山岳地帯での雲のスカイボックスのデモ
・夜のスカイボックスのデモ
この
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その08
では草原のテクスチャを砂漠のテクスチャに変えて砂漠を表現してみました。
テクスチャに使う砂漠画像をすぐに使いたかったので、砂漠画像を手っ取り早くBase64形式にしてコードに貼り付けて使用しています。 そのためコードは見づらいかもです。
地面に砂漠用のテクスチャを設定するために以下のサイトを参考にさせていただきました
three.js の PlaneGeometry で地形を作る
NuxlyStardust-Stock
Texture: Sand (LowRes-512)
Free images and resources
砂漠画像の読み込みを簡素化するために使用したTHREE.CubeTextureLoader()の使い方については以下のサイトを参考にさせていただきました
3D model running in the wilderness
水の表現をするために
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その09
ではWater.jsというものを使用してみました。
Three.jsサイトのデモにあった水を表現しているコード等をなんとかコピペ・修正して動くようにしてみました。
参考にさせていただいたデモサイトは以下のようになります
Three.jsサイトより
デモ
デモのコード
cx20さんのjsdo.it-archives
今度は空を表現するために
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その10
ではSky.jsというものを使用してみました。
Water.jsのときと同じようにThree.jsサイトにあるデモをせっせとコピペ・修正してなんとか動かしました。 作業しているThree.jsはr110ですが、直近のr117ではすでにSky.js使用部分のコードが変わっていてr110では使用できないようだったので、作業途中少し混乱したりしながらとりえず動くだけのところまでにはしました。
以下のThree.jsサイトのデモを参考にさせていただきました。
デモ
コード（Three.js r110によるコード）
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その11
は上記「その10」の空と水の色をパラメータの設定により変更しただけのものです。 できるだけ青っぽく爽やかな色合いを出せないかとトライしてみました。
この後も雲の表現にトライしようかといろいろ考えていましたが、とりあえずは保留としてます。 Ammo.js関連の調べものにけっこう疲れました。。。
以下は雲の表現をコーディングするときに参考にしようとしていたサイトですが、メモとして記録しておきます。
https://cx20.github.io/jsdo.it-archives/cx20/uMJj/
また気が向けば作業を再開するかもしれません。
あ、あと最後まで書き忘れていましたが、このnoteにリンクを貼り付けて説明してきたコードは全て、操作ロボットをあまり端まで行かせると地面がなくなって落下してしまいます。 端のほうまで近づくとだんだんハリボテってぽい3D空間が露呈してきます、ご注意ください。
この記事が気に入ったらサポートをしてみませんか？