3.jsを使用してWebGLを使い始める

Sep 10, 2025

操作方法

Web developer creating 3D shape graphics

webgl. これは最新のブラウザ全てで広くサポートされており、ハードウェアアクセラレーション3Dグラフィックスを使用することができます。 javascript. 、ブラウザベースのアプリやゲームのための膨大な可能性を開く - これらをチェックしてください WebGLの驚くべき例 、証明のために。

Filesiloからコードをダウンロードしてください

WebGL自体はかなり低いレベルであり、バニラフォームでそれを扱うことができません。高レベルの機能を提供するために、さまざまなライブラリーやゲームエンジンがあります。

このチュートリアルでは私はあなたを見せるつもりです アプリを作る方法 WebGLを組み合わせて使用するサイトまたはサイト three three WebGLの抽象化を提供する無料のオープンソースライブラリです。

01. 3.jsを取得します

保留から始める必要があります three three 。最新のビルドがあると、3.jsをプロジェクトフォルダに配置します。その後、他のJavaScriptライブラリーのようなページへのスクリプトとして追加します。独自のコードを別のJavaScriptファイルに入れます。

＆lt;！Doctype HTML＆GT;
＆lt; html＆gt;
  ＆lt;頭＆gt;
  <メタ文字セット= UTF-8>
  ＆lt; title＆gt。3.js＆lt; / title＆gt;
  ＆lt; / gt;
  ＆lt; body style = "マージン：0;"＆gt;
  ＆lt; script src = "three.js"＆gt;＆lt; / script＆gt;
  ＆lt; script src = "demo.js"＆gt; / script＆gt;
  ＆lt; / body＆gt;
＆lt; / html＆gt;

02.シーンを設定します

WebGL：シーン、カメラとレンダラーを使い始めるために3つのことが必要です。シーンは、3.jsで表示されるオブジェクトを配置する場所です。カメラは私達がそれらを見ることになる視点です。レンダラは2つを一緒にしてそれに応じて画面を描画します。これらのセットアップがあると、レンダラを文書に追加します。

 var width = window.innerwidth。
Var Height = Window.InnerHeight;
varable angle = 45;
var ineclipping = 0.1。
var farclipping = 9999;
var scene = new three.scene（）;
var camera = new 3.perspeciveCamera（視点、幅/高さ、近距離、farclipping）;
var renderer = new 3.WebGlRenderer（）;
renderer.setsize（幅、高さ）;
document.body.appendChild（Renderer.domelement）;

03.ループを作成します

次に、実際にシーンをレンダリングするためのループを作成する必要があります。これを使ってこれを行います renderer.render（） 関数ですが、キー部分は再帰的に使用することです requestAnimationFrame（） これは、ブラウザが描画する準備ができたら別のフレームを要求できるようにするための組み込み関数です。 using requestAnimationFrame（） 自分でフレームの描画を描くことを試みるよりも、より滑らかなアニメーションをもっと簡単にします。

関数animate（）{
  requestAnimationFrame（アニメーション）;
  renderer.render（シーン、カメラ）;
}
animate（）;

04.基本オブジェクトを作成します

今度は私たちのシーンにいくつかのオブジェクトを追加し始めることができます。メッシュオブジェクトを作成して追加することでこれを行うことができます。メッシュは、ジオメトリ（オブジェクトの形状）と材料（塗装に使用される色またはテクスチャ）で構成されています。 3つの異なるジオメトリを定義し、それらに異なる色の素材を割り当てることで、基本的なオブジェクトをいくつか作成します。

 var cubegeometry = New Three.BoxGeometry（1,1,1）。
var cubematerial = new three.meshlambertMaterial（{color：0xFF0000}）;
var cube = new shree.mesh（キューゲージメトリ、キューブメタル）;
var conseometry = New 3.ConeGeometry（0.5,1,4）;
var conomaterial = new three.meshlambertMaterial（{color：0x00FF00}）;
var cone = new shree.mesh（コーンジオメトリ、コネマテリア）;
var sphereGeometry =新しい3.sphereometry（0.5,8,8）。
var spherematerial = new three.meshlambertMaterial（{color：0x0000FF}）;
var sphere = New ShreeMesh（SphereGeometry、SphereMaterial）;

05.位置を指定します

デフォルトでは、オブジェクトはシーンの原点（x = 0、y = 0、z = 0）に追加されます。その後、メッシュをシーンに追加する準備ができています。これは、それらが自動的にレンダリングされることを意味します。 animate（） ループ。

キューブ.position.x = -2
Cube.Position.z = -5;
CONE.POSITION.Z = -5;
sphere.position.z = -5;
sphere.position.x = 2;
Cube.Position.z = -5;
SCENE.ADD（立方体）;
SCENE.ADD（コーン）;
SCENE.ADD（球）;

06.光源を追加します

あなたが今あなたのページを見るならば、あなたは物事が少し平らに見ているのを見つけるでしょう。オブジェクトに適用される照明はありませんので、それらは強固な原色で、二次元を見ています。これを修正するには、から切り替える必要があります メッシュバジックマテリアル 照明を支える材料に。私たちは使います MeshlambertMaterial 。私達はまたシーンに光源を追加する必要があります。

 var light = new 3.ポイントライト（0xFFFFFF）;
Light.position.x = 0;
Light.y = 10;
Light.z = 0;
SCENE.ADD（光）

07.ソースを移動します

今そこに着いています！あなたはあなたのページ上の明らかに明らかに3次元のオブジェクトがあるものを見るべきです。まだ行っていないものは、 animate（） 関数。私たちの光源がオブジェクトの上の円形の動きで動くようにいくつかの変更を加えましょう。

 varlightangle = 0。
関数animate（）{
  軽量+ = 5。
  if（lightangle＆gt; 360）{lightangle = 0;}。
  Light.Position.x = 5 * Math.cos（Lightangle * Math.pi / 180）;
  Light.position.z = 5 * Math.Sin（Lightangle * Math.pi / 180）;
  requestAnimationFrame（アニメーション）;
  renderer.render（シーン、カメラ）;

08.テクスチャを追加します

実際には、おそらく私たちの目的が平らな色になることを望まないでしょう。ファイルからそれらにテクスチャリングを適用するのはより一般的です。私たちはこれを使ってこれを行うことができます 3.TextureLoader（） 。ファイルからロードされたテクスチャを利用するために、CONEオブジェクトがどのように作成されるかを変更しましょう。この関数は、ファイルがロードされたときに呼び出されます。

3Dプロジェクトのための無料テクスチャを見つける場所

 var textureloader = new 3.textureLoader（）;
TextureLoader.load（ "./ grass_texture.jpg"、texture =＆gt; {
  var conseometry = New 3.ConeGeometry（0.5,1,4）;
  var conematerial = new three.meshlambertMaterial（{map：texture}）;
  var cone = new shree.mesh（コーンジオメトリ、コネマテリア）;
  CONE.POSITION.Z = -5;
  SCENE.ADD（コーン）;
  }、
）

09.それを自然にする

物事は良く見えていますが、それでもまだ自然ではありません。テクスチャは非常に平らに見え、照明には反応しません。このバンプマッピングを使用してこれを解決することができます。これにより、画像の光と暗い部分を使用して物体の表面上のテクスチャリングをシミュレートすることができます。球の別のテクスチャでこれを試してみましょう。材料を切り替えます メッシュフォンマテリアル これにより、Aを指定できます バンプマップ 属性。

 var textureloader = new 3.textureLoader（）;
TextureLoader.load（ "./ bump_map.jpg"、texture = gt; {
  var sphereGeometry =新しい3.sphereometry（0.5,8,8）。
  var spherematerial = new three.meshphongMaterial（{color：0x0000FF、BumpMap：Texture、Bumpscale：1.0}）;
  var sphere = New Shree.Mesh（SphereGeometry、SphereMaterial）。
  sphere.position.z = -5;
  sphere.position.x = 2;
  SCENE.ADD（球）;
  }、
）

10.コントロールを追加します

最後のタッチとして、シーンを少し管理することをユーザーにしてください。パンする能力を追加するには、3.jsで船を出荷する追加のライブラリがあり、それを信じられないほど簡単にします。 3.jsパッケージからProject Directoryにorbitcontrols.jsを抽出し、それをあなたのページに含めます。これは、カメラ制御の一般的なスタイルを満たすために3.jsに出荷するいくつかのコントロールライブラリの1つです。

 SCRC = "ORBITCONTROLS.JS"＆gt;＆script＆gt;

11.カメラに適用します

今私たちがする必要があるのはAを作成することだけです 3.orbitcontrols. オブジェクトとそれをカメラに適用します。ライブラリはあなたのために残りの面倒を見るでしょう：クリックする、マウスの動きなどを聞く必要はありません。オブジェクトを起源ポイントに戻し、カメラをオフにしてオブジェクトの周囲にきれいにパンすることもできます。

それで、私たちは私たちの導入をしました。テクスチャのスタイル、動的照明、および演奏するユーザーコントロールカメラのスタイルを持つ3つのオブジェクトがあるはずです。

カメラ。Z = 10。 VARコントロール=新しい3.OrbitControls（カメラ）;

この記事では、Creative Web Design Magazine - エキスパートチュートリアル、最先端のトレンド、無料リソースを提供しています。 Web Designerを購読してください。

この投稿を「スキ！」と言っています試してみてください：

APIへのコーダーの完全なガイド
3Dオブジェクトを3.jsで溶かす方法
WordPress APIを使用してブログに電源を供給します

3.jsを使用してWebGLを使い始める

01. 3.jsを取得します

02.シーンを設定します

03.ループを作成します

04.基本オブジェクトを作成します

05.位置を指定します

06.光源を追加します

07.ソースを移動します

08.テクスチャを追加します

09.それを自然にする

10.コントロールを追加します

11.カメラに適用します

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

ミックスメディアアートチュートリアル：デジタルアートワーク上の水彩画の方法

ライフデッサンにエネルギーを追加する方法

7あなた自身のビジネスを始めるための7つの先端

Blenderで複雑な3D SCI-Fiシーンを構築する

Reactでダッシュボードアプリを作成する方法

フレキシブルカルーセルコンポーネントを作成する

パスタアートワークにドラマを追加する方法

アンダーペインディングとその最善の利用方法

カテゴリ