このページは Cloud Translation API によって翻訳されました。

Three.js のスタートガイド

Paul Lewis

はじめに

私はいくつかのテストで Three.js を使用してきましたが、ブラウザで 3D を導入する際の煩わしさを取り除くのに非常に優れています。この機能では、カメラ、オブジェクト、ライト、マテリアルなどを作成し、レンダラを選択できます。つまり、HTML 5 の canvas、WebGL、SVG を使用してシーンを描画するかどうかを指定できます。オープンソースなのでプロジェクトに参加することもできますここでは、これまで学んだことをエンジンとして操作し、基本的なことを説明します。

Three.js の優れた機能のために、うまくいかない場合もあるかもしれません。通常、サンプル、リバースエンジニアリング、（私の場合は確かに）特定の機能の特定に多くの時間を費やし、ときには GitHub 経由で質問する必要があります。不明な点がある場合は、Mr. doob と AlteredQualia が大変参考になります。

1. 基本情報

少なくとも 3D についてある程度の知識があり、JavaScript について相応の習熟度があることを前提としています。そうでなければ使い方を覚えておくとわかりにくくなってしまうかもしれません

私たちの 3D の世界には次のようなものがあり、作成プロセスを通じて説明します。

シーン
レンダラ
カメラ
1 つか 2 つのオブジェクト（マテリアル付き）

もちろん、他にも素晴らしいアイデアがありますので、これからも皆さんのブラウザで 3D をお試しいただければと思います。

2. サポート

ブラウザでサポートされている機能について簡単にご説明します。私の経験上、サポートされているレンダラと基盤となる JavaScript エンジンのスピードの点で、Google の Chrome ブラウザは最適なブラウザです。Chrome は Canvas、WebGL、SVG をサポートしており、非常に高速です。Firefox はバージョン 4 とほぼ同じですJavaScript エンジンは Chrome より若干遅いようですが、やはりレンダリングテクノロジーのサポートは優れています。Opera と Safari でも WebGL への対応を進めていますが、現在のバージョンでは canvas のみがサポートされます。Internet Explorer（バージョン 9 以降）はキャンバスのレンダリングのみをサポートしており、Microsoft が WebGL 機能を追加する予定があるとは見ていません。

3.状況の説明

ここでは、すべてのレンダリングテクノロジーをサポートするブラウザを選択し、より標準的な選択肢である canvas または WebGL でレンダリングすると仮定します。Canvas は WebGL よりも広くサポートされていますが、WebGL はグラフィックカードの GPU で実行されるため、CPU は物理理論やユーザー操作などの他の非レンダリングタスクに集中できます。

選択したレンダラにかかわらず、JavaScript はパフォーマンスを重視して最適化する必要がある点に留意してください。3D はブラウザにとって軽量のタスクではありません（そして、それが可能であることは素晴らしいことです）。そのため、ボトルネックがコード内のどこにあるのかを注意深く理解し、可能であれば削除してください。

とはいえ、3.js をダウンロードして HTML ファイルに含まれていると仮定すると、シーンはどのように設定すればよいでしょうか。例:

// set the scene size
var WIDTH = 400,
HEIGHT = 300;

// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
                VIEW_ANGLE,
                ASPECT,
                NEAR,
                FAR );

var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

それほど難しいことではありません。

4. メッシュを作る

シーン、カメラ、レンダラがありますが（このサンプルコードで WebGL を選択しました）、実際に描画するものはありません。Three.js は、実際にはいくつかの標準ファイル形式の読み込みをサポートしています。これは、Blender、Maya、Cinema4D などからモデルを出力する場合に最適です。簡潔にするために（これは結局のところ、始めるということです）プリミティブについて説明しますプリミティブは、球体、平面、立方体、円柱などの比較的基本的な幾何学的メッシュです。Three.js を使用すると、次のタイプのプリミティブを簡単に作成できます。

// set up the sphere vars
var radius = 50, segments = 16, rings = 16;

// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),

sphereMaterial);

// add the sphere to the scene
scene.add(sphere);

問題はありませんが、球体の素材についてはどうでしょうか。コードでは変数 sphereMaterial を使用していますが、まだ定義していません。まず資料についてもう少し詳しく説明します

5. 素材

間違いなく、これは Three.js の最も有用な部分の一つです。メッシュに適用できる一般的な（非常に便利な）マテリアルがいくつか用意されています。

「Basic」は「ライティングなし」のレンダリングを意味します。
ランバート
フォン

他にもさまざまな機能がありますが、ここでもシンプルに説明して、自分で探してみてください。WebGL の場合、特にこうしたマテリアルが救命になります。そのWebGL では、レンダリングされるすべての要素に対してシェーダーを記述する必要があるためです。シェーダーはそれ自体が大きなトピックですが、簡潔に言うと、GLSL（OpenGL シェーダー言語）で記述され、GPU に何かの外観を伝えるものです。つまり、照明、反射などの数学を模倣する必要があります。あっという間に複雑になってきます。Three.js を使用すると、抽象化されるため、不要な場合に行う必要はありません。ただし、シェーダーを作成する場合は、MeshShaderMaterial を使用して作成できるため、柔軟な設定が可能です。

ここでは、球体にランバートマテリアルを適用してみましょう。

// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});

色以外にも、スムージングや環境マップなど、マテリアルを作成するときに指定できるプロパティもあります。マテリアルに設定できます。また、エンジンが提供するすべてのオブジェクトについては、Wiki ページをご覧ください。また、最近 threejs.org も立ち上げ、より魅力的な API ビューを提供できるようになりました。

6. ライト！

今シーンをレンダリングすると、赤い円が表示されます。Lambert マテリアルを適用した後でもシーンにはライトがないため、デフォルトでは Three.js は完全なアンビエントライトに戻ります。これはフラットカラーの場合と同じです。簡単なポイントでこれを解決しましょう。

// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

// add to the scene
scene.add(pointLight);

7. レンダリング

これで、レンダリングのための準備がすべて整いました。しかし、実際には次のように処理する必要があります。

// draw!
renderer.render(scene, camera);

ただし、おそらく複数回レンダリングする必要があるため、ループを実行する場合は requestAnimationFrame を使用してください。これは、ブラウザでアニメーションを処理する最もスマートな方法です。まだ完全にはサポートされていませんので、Paul Irish の shim をぜひご確認ください。

8. 一般的なオブジェクトプロパティ

Three.js のコードをよく見ると、多くのオブジェクトが Object3D から「継承」していることがわかります。これは、position、rotation、scale の情報などの非常に有用なプロパティを含むベースオブジェクトです。特に球体は、Object3D を継承したメッシュで、独自のプロパティ（geometry と materials）が追加されています。おすすめする理由何もしない球体を画面上に用意する必要はありません。これらのプロパティを使用すると、メッシュとマテリアルの基礎となる詳細をすばやく操作できるため、調査する価値があります。

// sphere geometry
sphere.geometry

// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array

// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same

9. ダーティ・リトル・シークレット

Three.js の問題を簡単に指摘したいと思います。たとえば、メッシュの頂点を変更しても、レンダリングループでは何も変更されていないことに気づくでしょう。そのこれは、Three.js が（私が知る限り）最適化の手段としてメッシュのデータをキャッシュに保存しているためです。実際に必要なのは、何かが変更されたことを Three.js に報告し、必要とするあらゆる再計算を行えるようにすることです。方法は次のとおりです。

// changes to the vertices
sphere.geometry.__dirtyVertices = true;

// changes to the normals
sphere.geometry.__dirtyNormals = true;

他にも方法がありますが、最も役立つのはこの 2 つでした。不要な計算を避けるため、変更されたものにのみフラグを付ける必要があります。

おわりに

この Three.js の簡単な概要がお役に立てば幸いです。実際に手を動かして試してみるのはとてもいい方法ですしあまりおすすめできませんブラウザでネイティブに 3D を実行するのはとても楽しいです。Three.js のようなエンジンを使用すれば、煩わしい作業の多くが解消され、素晴らしい機能を開発できるようになります。参考までに、このラボの記事にソースコードをまとめましたので、参考にしてください。楽しんでいただけたら、ぜひ Twitter でお知らせください。