ARアプリの構築方法

Sep 11, 2025

操作方法

ページ1/3：

ARアプリを構築する：ステップ01-10

ARアプリを構築する：ステップ01-10
ARアプリを構築する：ステップ11-20
カスタムARマーカーを作成する方法

過去2年間で、VRとAR技術を囲む興味のある爆発がありました。最新のビッグなこと 実験計画 ARはまたウェブに到着しましたが、この新しい技術では新しいスキルがあります。今は、野生の西のように、主要な基準は続かないように感じます。

Web上で3Dを表示する機能は新しいものではありませんが、それを回避しているのであれば、あなたは3.jsまたはA-Frameのようなテクノロジにジャンプする必要があります（私たちの切り札を見てください。 試してみるARツール 全リストの場合）

あなたがどこにいるスキルレベルでは、いくつかのまともなコンテンツがない場合はあまり違いはありません。ジャンプする前にARの適切なユースケースについて考えてください。この記事では、マルチマーカーARの経験を作成する方法を説明します。

あなたのスキルレベルがそれほどうまくいかないように感じますか？ A. ウェブサイトビルダー 大騒ぎなしであなたのためのサイトを作成します。またはあなたが複雑なサイトでダイビングしているなら、 ウェブホスティング 正しい。

複数のマーカーを使用することによって、そのマーカーに基づいてプロセスのさまざまな段階または任意の固有のコンテンツを示すことが可能です。この例では、私たちのアプリは水のサイクルを探求します。カスタムARマーカーを作成する方法については、3ページにジャンプしてください。

01.はじめに

開く開始 IDEのフォルダと内部のフォルダ index.html ページスクリプトタグを検索します。チュートリアルのすべてのコードはこれらの中に入ります。アプリをテストするには、サーバーを持つ必要があります。電話をテストしたい場合は、HTTPSサーバー上のファイルをホストする必要があります。スクリプトタグに初期変数を追加します。

VAR Model1、Model2、Model3、Count = 0、粒子、特に粒子系。 VAR Loader = New Three.CollAdaloader（）;

02.モデルをロードします

ARシーンを作業するために、モデルがロードされます。一度ロードされたことが変数に格納されていることがわかります モデル1 。次にこれをスケーリングして3つのステップに対して2回クローニングします。 3つの異なるモデルを負荷するのではなく、1つのモデルへのすべての調整がコードで行われ、モバイルで迅速にロードされます。

 Loader.load（ 'landscape1.dae'、関数（collada）{
  model1 = collada.scene。
  model1.scale.x = model1.scale.y = model1.scale.z = 0.015;
  Model2 = Model1.Clone（）;
  Model3 = Model1.Clone（）。

03. Tweeningを設定します

最初のモデルでは、クラウドはシーンに見出される予定であり、これは雲が海から上がるように新しい位置にトゥイーンされます。これは永遠に繰り返すように設定されており、Tweenがアニメートしてクラウドフォーミングを表示するのには8秒かかります。

 var cloud1 = model1.getObjectByname（ "cloud"、true）;
  Cloud1 = Cloud1.children ;
  新しいTween.twee（cloud1.position）.to（{
  x：0、
  Y：30、
  Z：-15.
  8000）.reepeat（無限）。（Tween.Adratic.inout）.start（）;

04.それをスケールアップします

クラウドはほとんど見えないように縮小されています。もう1つのTweenがクラウドに追加され、これは雲を通常のサイズまで拡大します。移動とスケーリングにより、雲が立ち上がっていると幻想を与え、水サイクルの過程の最初のステップとして海から出ています。

 cloud1.scale.x = cloud1.scale.y = cloud1.scale.z = 0.0;
  新しいtween.twee（cloud1.scale）.to（{
  ×：1、
  Y：1、
  Z：1
  8000）.reepeat（無限）。（Tween.Adratic.inout）.start（）;

05. 2番目のクラウドを設定します

the water cycle scene — 2番目の雲が山の上に座るでしょう

2番目のモデルからの次の雲は、最初のクラウドが空の形成された雲としてそのアニメーションを終えた場所に配置する必要があります。これは、山の上にわずかに上昇し、その土地の上に配置するためのTweened運動を与えられます。これはそれが大きい動きとしてアニメートするのに12秒かかるでしょう。

 var cloud2 = model2.getObjectByname（ "cloud"、true）;
  Cloud2 = Cloud2.children ;
  Cloud2.Position.Set（0,30、-15）;
  新しいTween.twee（cloud2.position）.to（{
  x：0、
  Y：50、
  Z：-145
  12000）.reepeat（無限）。（Tween.Adratic.inout）.start（）;

06.雨を降ります

この幻想作業を行うための鍵は、雲が雨が降ります。水のサイクルは雲の雨が降ります。効果を得るために、パーティクルシステムが使用されます。ここでは、雨滴画像を使用して、粒子の量と粒子材料の量が作成されます。

 var textureloader = new 3.textureLoader（）;
PartyleCount = 1500;
粒子=新しい3.Geometry（）;
var pcaterial = new 3.pointsMaterial（{
  色：0x3a4e5d、
  サイズ：0.05、
  地図：textureloader.load（ "img / rain.png"）、
  PhaTest：0.3、
  不透明度：0.9、
  透明：true};

07.雨滴を作成します

FORループを使用すると、クラウドとグランドの間にあるランダムなx、y、z位置を使用して1500の雨滴を作成できます。各雨滴は、雨をより自然に見せるためにそれ自身のランダムな速度を与えられます。粒子はジオメトリの正しい頂点に押し込まれます。

（var i = 0; i

08.パーティクルシステムで作業します

今、パーティクルシステムはジオメトリと材料から作成されます。粒子は、Z秩序が正しいように選別されるように設定され、次いで雨粒子は第2の雲の子供にされる。雲がTweenedさん、雨も続くので、雲の後に雨を吹きかける必要はありません！

粒子システム=新しい3つ。ポイント（粒子、銅の材料）。
粒子系術範囲= TRUE。
Cloud2.ADD（粒子システム）

09.最終的なモデル位置を設定します

最後のモデルでは、クラウドは2番目のクラウドアニメーションサイクルの終了スポットに再配置されています。この新しいクラウドはちょうど空に座り、アニメートされません。代わりに川はアニメートしようとしているので、川のモデルは変数に保存され、Tweenを追加する準備ができています。

 var cloud3 = model3.getObjectByName（ "cloud"、true）;
  Cloud3 = Cloud3.children ;
  Cloud3.Position.Set（0,50、-145）;
  VAR RIVER = MODEL3.GETOBJECTBYNAME（ "River"、True）;
  川= river.children

10.川を埋める

the water cycle model — 川の水位が上昇する必要があります

水のサイクルの第3段階では、水は丘を流出し、川や湖を充填して海に戻ります。これは、川の高さを動かすだけであれば、それが充実しているように見えるようにするだけで最も微妙な動きです。すべてがプリロードされているので、 初期化 関数が呼び出されます。

新しいTween.Twee（rivosition）.To（{
  y：3
  8000）.reepeat（無限）。（Tween.Adratic.inout）.start（）;
  初期化（）;
}）

保存するデザインファイルを取得しましたか？私たちのガイドをチェックしてください クラウドストレージ 。

次のページ：AR機能とマーカーを追加します

現在のページ： ARアプリを構築する：ステップ01-10

次のページ ARアプリを構築する：ステップ11-20

ARアプリの構築方法

01.はじめに

02.モデルをロードします

03. Tweeningを設定します

04.それをスケールアップします

05. 2番目のクラウドを設定します

06.雨を降ります

07.雨滴を作成します

08.パーティクルシステムで作業します

09.最終的なモデル位置を設定します

10.川を埋める

操作方法 - 最も人気のある記事

クラウドストレージをクリエイティブとして使用する方法

artrageから始めましょう

パターンスタンプツールを使用してテクスチャを作成する

JavaScriptコード分割について知る必要があるすべて

3DS MAXのマスター大規模環境

様式化されたゲームアートワークを作成する方法

カスタムマヤインタフェースを構築する

3Dモデリングをスピードアップする

カテゴリ