ブログといえば誰しもが慣れ親しんでいるもので、長年職場で頑張ってきたベテランも、学校で頑張ってきた若鳥も「おしゃれをする」という経験をしたことがあるはずです。好きな写真を載せる、クールなやり取りを追加する、DIY ブログのテーマに変更するなどのブログ。しかし、どんなに「着飾っても」フラットな「死体」から逃れることはできません。
今日、HelloGitHub はオープン ソースの 3D ブログ プロジェクトを提供します. 正直なところ、私が最初にこのブログにアクセスしたとき、ブログの認識を覆す衝撃を受けました. 入った後、記事を読む前に3Dカーを操作して記事を「見つける」必要があり、とても興味深いです!
オンライン:https: //bruno-simon.com/
次に、この記事では、最初にプロジェクトをローカルで実行する方法を紹介し、次にそのソース コードと関連テクノロジについて説明し、最後にコードを変更して独自のブログ投稿を挿入して 3D ブログにアップグレードする方法を説明します。では、このオープン ソースの 3D ブログに足を踏み入れて、驚きを興味に変えてみましょう。
1.はじめに
1.1 インストール手順
あまりしゃべらず、走ってしゃべるだけ、たったの4ステップ。コマンドは次のとおりです。
# 1.下载项目
git clone git@github.com:brunosimon/folio-2019.git
# 2.安装了 Parcel(Web 应用打包工具)
npm install -g parcel-bundler
# 3.安装依赖(仅第一次需要)
npm i
# 4.运行
npm run dev
ヒント: Node.js のインストール方法については。
1.2 運用効果
まず、このブログがどのようなものかを見てみましょう。
赤いかわいい小さなジープが無限の地図を自由に疾走し、クラクションを鳴らして楽しみを増やすこともできます。このブログには効果音も付いています。
1.3 ミニゲーム
車を「運転」して歌っていると、作者が創り出す3D世界に突然「さらわれた」!シンプルなモデルだけでなく、非常に興味深いミニゲームも用意されているからです。
たとえば、急加速して次の 3 つの「泡の壁」にぶつかることができます。
または、小さなジープで「ボーリング」します。
または、「エキサイティングな」クロスカントリートレーニングを行います。
これらの小さなゲームはとても面白いですか?
1.4 著者について
こんなに面白い3Dブログが書ける作者さんもなかなか面白い人なんでしょうけど、彼自身の人生もこの企画に「写し出して」います。
この上司の日常はおおむね「1人1犬」で、愛犬をこよなく愛していると推測できます。ゲームだけでなく、フィットネスや外出なども一緒です。
ああ!楽しい人生ですね~ プログラマーの人生はどこへ?これは明らかに富と自由の生活です!このブログが単なる人生の記録だと思っているなら、それは間違いです. 私たちの小さなジープが「プロジェクト」に向かうと、著者によって書かれた多くの技術的なブログ記事が表示されます.
宿題についておしゃべりした後は、コードの世界に入りましょう!
2. プロジェクト概要
2.1 プロジェクトの構造
まず、プロジェクトの構造を見てみましょう。
これらのディレクトリの簡単な概要:
理解できないファイルがたくさんありますか?それは問題ではありません。最も重要なファイルから始めましょう。これは、すべてのコア コードが配置されている、最もよく知られているsrc
フォルダー。そして最も重要なコード ファイルは、一目でわかると思います。それはですindex.js
。
import './style/main.css'
import Application from './javascript/Application.js'
window.application = new Application({
$canvas: document.querySelector('.js-canvas'),
useComposer: true
})
index.js
これは非常に単純ではありませんか?これは、今見たすべての効果が 1 つであることを示しているだけですcanvas
! ロジックを処理するためのコードは から取得されますApplication.js
。ここでは、プロジェクトで使用されるいくつかの重要なテクノロジ スタックとコア ライブラリを抽出し、簡単に紹介します。
多くの友人がすでにそれを推測していると思います。それはですThree.js
。
2.2 スリー.js
Three.js は、開発者が Web 上で 3D エクスペリエンスを作成できるようにする 3D JavaScript ライブラリであり、WebGL のベスト パートナーです。
では、WebGL とは何ですか? WebGL は、ほとんどの最新のブラウザーと互換性があり、Graphics Processing Unit (GPU) を直接使用する JavaScript API です。これにより、優れた最適化とより多くの制御が可能になり、高速になります。
ただし、ネイティブ WebGL は難しく複雑です. ネイティブ WebGL を使用してキャンバスに三角形を描画するには、少なくとも 100 行のコードが必要です. この場合、遠近法、照明、モデル、アニメーションなどを追加すると、どれだけハゲているか想像できます. プログラマーの手間を省くために、Three.js ライブラリーが誕生しました。その価値は、上記のすべてを処理するプロセスを簡素化し、わずか数行のコードでアニメーション化された 3D シーンを取得できることです。
2.3 データ.gui
この 3D ブログ プロジェクトで使用されている別のライブラリは、JavaScript で変数を変更するための軽量のグラフィカル ユーザー インターフェイスである dat.gui.js です. このライブラリを使用すると、インターフェイス コンポーネントを簡単に作成できます. 実装されたインターフェイスは、おおよそ次のようになります。
3. ソースコードの説明
重要な技術的ポイントを紹介した後、ロジック処理のコア ファイルに戻りApplication.js
、ソース コードの説明を始めましょう。
3.1 世界の構築
コード構造から、エントリがthis.setWorld
にある。ここでコードを簡単に見てみましょう。
constructor(_options)
{
// Options
this.config = _options.config
this.debug = _options.debug
...
// Set up
this.container = new THREE.Object3D()
this.container.matrixAutoUpdate = false
this.setSounds() // 声音
this.setControls() // 一些按键控制等
this.setFloor() // 地板设置
this.setAreas() // 区域设置
this.setStartingScreen() // 首屏动画(loading > start)
}
以上の設定がひと目でわかると思いますが、疑問に思われるメソッド名と簡単な説明を以下に示します。this.setControls
それは主に 2 つの方法を含んでいます:this.setActions
そしてthis.setKeyboard
、ここに小さなジープの運転とクラクションのボタン制御があります。
また、this.setFloor
主に. 元の配色が気に入らない場合は、「カラフルな」色をカスタマイズできますが、前提は特定の美学を持っていることです。下図のようにひっくり返してください。
ここでは、シーンの 4 つのコーナー (左上、右上、左下、右下) の色をカスタマイズするだけです。コード スニペットは次のとおりです。
// Colors 修改前
this.colors = {}
this.colors.topLeft = '#f5883c'
this.colors.topRight = '#ff9043'
this.colors.bottomRight = '#fccf92'
this.colors.bottomLeft = '#f5aa58'
// Colors 修改后
this.colors = {}
this.colors.topLeft = 'red'
this.colors.topRight = 'yello'
this.colors.bottomRight = 'blue'
this.colors.bottomLeft = 'black'
残りはthis.setAreas
主にいくつかのマウスイベント用で、 、 などを含む「世界」全体をマウスでドラッグして探索できます。関連するコードは投稿mousemove
されず、興味のある人は自分で探索できますmousedown
〜touchstart
3.2 起動後
上記の構成は、開始ページが表示されたときに実行されるコードです。これは、事前にいくつかのリソースをロードすることと同等であり、残りのロードは「開始」をクリックした後に開始されます。
World.js
ファイルには、対応するコードも含まれていますthis.start
。
// On interact, reveal 点击 start 的交互
this.startingScreen.area.on('interact', () =>
{
TweenLite.to(this.startingScreen.startLabel.material, 0.3, { opacity: 0, delay: 0.4 })
// 剩下的资源加载
this.start()
window.setTimeout(() =>
{
this.reveal.go()
}, 600)
})
start
このメソッドでは、小さなジープの読み込みや、最も知りたい記事のリストの読み込みなど、より多くのコンテンツの読み込みが表示されます。
start()
{
this.setCar() // 汽车加载
this.areas.car = this.car
this.setSections() // 文章加载
}
そうです、そうです、次は物品入口の案内標識を探す必要があります。つまり、x 軸と y 軸はキャンバス上のオブジェクトの座標位置を示しており、好きな位置に移動することもできます。
// Projects
this.sections.projects = new ProjectsSection({
...options,
x: 30,
y: - 30
})
ここで の座標軸系Three.js
を。これは、下の図に示すように右手系の座標系を採用し、左手系の座標系に対応しています。
したがって、x の値を大きくすると、記事全体の距離が遠くなることがわかります.同様に、y の値を変更すると、同じ効果が得られます.
3.3. 記事一覧
ProjectsSection.js
ファイルを調べたところ、そこにはたくさんの写真が含まれていることがわかりました。心配する必要はありませんsetList
。心配する必要はありません。
setList()
{
this.list = [
{
name: 'HelloGitHub',
imageSources:
[
projectsThreejsJourneySlideESources
],
floorTexture: this.resources.items.projectsThreejsJourneyFloorTexture,
link:
{
href: 'https://hellogithub.com/',
// 控制按钮的位置
x: - 5.8,
y: - 4.5,
// 控制open按钮大小(0,0)的时候无边框
halfExtents:
{
x: 2,
y: 1
}
},
distinctions:
[
// 一个3d模型的图标,xy是坐标轴位置
{ type: 'fwa', x: 4.15, y: 5.15 }
]
}
]
}
このように、あなたは「自分の」3D ブログを持っていますが、控えめに言っても、3D は他人のものであり、ブログは自分のものです。詳しく見てみましょう。
写真と組み合わせて、上記のコードを説明しましょう。
1. imageSources
: 「ビルボード」の写真です. ここでは HelloGitHub コミュニティのホームページの写真を 1 つだけ作成しました. 元のブログのように複数の写真を掲載することもできます.
画像の保存アドレスとインポート ルール:
import projectsThreejsJourneySlideESources from '../../../models/projects/threejsJourney/slideE.jpg'
2. floorTexture
「床のテクスチャ」、つまり地面に「横たわっている」画像について、あなたはtexture
疑問
これは 3D の世界であるため、マウスを上下にドラッグすると、グラフのビジョンが変化します。そのため、グラフを 3D コンテナーに「入れる」必要があります。これにより、作成する 3D の世界がリアルでリアルな文字になります。 . したがって、ここではコードに従って、このグラフがどのように生成されるかを推測します。
floorTexture: this.resources.items.projectsThreejsJourneyFloorTexture,
resources
オブジェクトの下に「ぶら下がっている」ことがわかります。レイヤーApplication.js
ごと . Resources.js
ファイルに入ると、.png
などのリソース ファイルがたくさんあることがわかります.glb
。
.glb ファイルは何ですか?
上記の.glb
サフィックスファイル。GL 転送形式 (glTF) で保存された 3D モデルが含まれています。ノード階層、カメラとマテリアル、アニメーション、メッシュなど、3D モデルに関する情報をバイナリ形式で保存します。.glb
file は.glTF
file。
3.4 もう少し深く
次に、上記を調べます: テクスチャがどのように生成されるか、Resources.js
ファイル確認してください。
上記で直接キーワードが見つからないResources.js
場合は、いくつかの英単語を削除して、もう一度試してください.このメソッドでそのようなコード行を見つけます:projectsThreejsJourneyFloorTexture
this.loader.load
{ name: 'projectsThreejsJourneyFloor', source: projectsThreejsJourneyFloorSource, type: 'texture' },
そのsource
フィールド再度検索すると、関連する画像ファイルが見つかります。
import projectsThreejsJourneyFloorSource from '../models/projects/threejsJourney/floorTexture2.png'
なぜ直接検索できないのでしょうか。長いコードを折りたたんで見てみましょう。次の名前のハンドラ関数が見つかります。
this.loader.on('fileEnd', (_resource, _data) =>
{
this.items[_resource.name] = _data
// Texture
if(_resource.type === 'texture')
{
const texture = new THREE.Texture(_data)
texture.needsUpdate = true
this.items[`${_resource.name}Texture`] = texture
}
// Trigger progress
this.trigger('progress', [this.loader.loaded / this.loader.toLoad])
})
そうです、処理機能が自動的にオブジェクト名Texture
として。これは、通常の画像ファイルから、3D コンテナーに添付する必要がある「テクスチャ」ファイルに変更されたため、非常に厳格と言えます。
さて、上記のsetList
方法。その他のファイルリンク、モデルの座標軸位置など、ひと目で見たことがあると思います!
五、終わり
ソースコードを読むことは、特に初心者から始めて、簡単なプロセスであってはなりません。難しいことではありますが、小さな驚きに刺激を受けることもよくあります。たとえば、ソース コードを何度も何度も読んでいるうちに、小さな知識ポイントを突然発見するのは非常に興味深いことです。
たとえば、この 3D ブログ プロジェクトには、次のような写真がたくさんあります。
クリックすると暗い絵が出てきて、最初は何だかわかりませんでしたが、コードの理解が深まるにつれて、これらがモデルの位置と影の効果のレンダリングであることに突然気づきました。
最後に、この短い 3D ブログ エントリの旅がここにあり、すべての乗客に別れを告げようとしています。実際、元のドキュメント全体の内容は非常に豊富で、多くの 3D モデル ファイル、パッケージ化された構成の最適化などを含み、より詳細で体系的な研究に値しますが、スペースと能力が限られているため、書きます。今日はまずここ。興味を持ってソースコードを閲覧すると、さらに意外な発見があるでしょう。
以上がこの記事の内容のすべてです. この記事がうまく書かれていると思われる場合は,いいね!をお願いします. あなたのサポートが私の更新の動機です.