【three.js詳細の1つ】入門編
前置き
webGLはcanvas上で3 D効果を実現することができます.そしてjsはwebGLフレームワークであり、その使いやすさで広く応用されている.WebGLを学ぶなら、複雑なオリジナルインタフェースを捨ててこのフレームワークから始めるのはいい選択です.
ブロガーも今勉強しています.jsは、関連資料が非常に希少であることを発見し、公式のapiドキュメントも非常に粗く、多くの効果は自分でコードをゆっくり叩く必要がある.だから私がこのチュートリアルを書く目的は1つは自分でまとめることで、2つはみんなと分かち合うことです.
本編はシリーズチュートリアルの第1編:入門編です.この文章では、簡単なdemoを例にthree.jsの基本的な構成方法.この文章を勉強したら、ブラウザで立体図形を描く方法を学びます.
準備作業
コードを書く前に、まず最新のthreeに行きます.jsフレームワークパッケージ、あなたのページにthreeを導入します.js、もちろんファイルパッケージの中にも多くのdemoが勉強しやすいです.
chromeは現在webGLをサポートする最高のブラウザで、Firefowは次いで、国内の漫遊、チーターもテストして実行することができます.
インスタンスからスタート!
まずhtmlを構築します.以下のようにします.
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lesson1-by-shawn.xietitle>
<script src="Three.js">script>
<style type="text/css"> div#canvas-frame{ border: none; cursor: move; width: 1400px; height: 600px; background-color: #EEEEEE;
}
style>
head>
<body>
<div id="container">div>
body>
html>キャンバスボックスのサイズと一致する領域を用意してWebGLペイントに使用します.具体的には、
(1)bodyタグにidが「canvas 3 d」のdiv要素を追加する.
(2)styleラベルに「canvas 3 d」のCSSスタイルを指定します.
注意しなければならないのは、ラベルを書く必要はありません.canvasを盛るdivを定義するだけでいいです.canvasはthreeです.jsダイナミック生成!
次にスクリプトを書き始めます.次の5つのステップで簡単な立体モデルを構築します.これもthreeです.jsの基本手順:
1.threeを設定.jsレンダラー
3 D空間内の物体を2 D平面にマッピングするプロセスを3 Dレンダリングと呼びます.一般的にレンダリング操作を行うソフトウェアをレンダラーと呼びます.具体的には以下の処理を行う.
(0)グローバル変数(オブジェクト)を宣言する.
(1)キャンバス「canvas-frame」のアスペクトを取得する.
(2)レンダラーオブジェクトを生成する(アトリビュート:アンチエイリアシング効果が有効に設定されている);
(3)レンダラーの縦横(キャンバスボックスのサイズと一致)を指定します.
(4)【canvas】要素を【canvas 3 d】要素に追加する.
(5)レンダラーのクリアカラーを設定します.
// Three.js
var renderer;// （ ）
function initThree() { width = document.getElementById('canvas3d').clientWidth;// 「canvas3d」
height = document.getElementById('canvas3d').clientHeight;// 「canvas3d」
renderer=new THREE.WebGLRenderer({antialias:true});// （ ： ）
renderer.setSize(width, height );// （ ）
document.getElementById('canvas3d').appendChild(renderer.domElement);// 【canvas】 【canvas3d】 。
renderer.setClearColorHex(0xFFFFFF, 1.0);// canvas (clearColor)
}2.カメラカメラカメラの設定
OpenGL(WebGL)中、3次元空間中の物体を2次元空間に投影する方式では、透視投影と正投影の2種類のカメラが存在する.透視投影とは、視点から近い物体ほど大きく、遠くの物体を描く小さな方法であり、日常生活で私たちが物体を見る方法と一致している.正投影とは、物体と視点の距離にかかわらず、統一された大きさで描画され、建築や設計などの分野で様々な角度から物体を描画する必要があるため、この投影が広く応用されている.Three.jsは、パース投影と正投影の2つの方法のカメラを指定することもできます.ここでは、以下の手順でパース投影方法を設定します.
(0)グローバル変数(オブジェクト)を宣言する.
(1)パース投影のカメラを設定する.
(2)カメラの位置座標を設定する.
(3)カメラの上を「z」軸方向とする.
(4)視野の中心座標を設定する.
//
var camera; function initCamera() { camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );// , Y ， X ， Z （ ：fov ：aspect ：near ：far）
camera.position.x = 0;//
camera.position.y = 50;//
camera.position.z = 100;//
camera.up.x = 0;// 「x」
camera.up.y = 1;// 「y」
camera.up.z = 0;// 「z」
camera.lookAt( {x:0, y:0, z:0 } );//
}3.シーンsceneの設定
シーンは3 D空間です.[Scene]クラスで[scene]というオブジェクトを宣言します.
//
var scene; function initScene() { scene = new THREE.Scene(); }4.光源ライトの設定
OpenGL(WebGL)の3次元空間には、点光源とスポットライトの2種類が存在する.また、点光源としての特例として、平行光源(無線遠光源)も存在する.また、光源のパラメータとして[環境光]などの設定を行うこともできます.対応としてjsでは[点光源(Point Light)][スポットライト(Spot Light)][平行光源(Direction Light)]、[環境光(Ambient Light)]を設定できます.OpenGLと同様に、1シーンに複数の光源を設定できます.基本的には、環境光と他のいくつかの光源を組み合わせています.周囲光を設定しないと、光が届かない面が暗くなりすぎます.本稿ではまず以下の手順に従って平行光源を設定し,その後環境光も追加する.
(0)グローバル変数(オブジェクト)の宣言
(1)平行光源の設定
(2)光源ベクトルの設定
(3)光源をシーンに追加
ここでは、DirectionalLightクラスで[ライト]というオブジェクトを宣言して、平行光源を表します.
//
var light; function initLight() { light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//
light.position.set( 200, 200, 200 );//
scene.add(light);//
}5.物体objectの設定
ここでは、ボールモデルを宣言します.
//
var sphere; function initObject(){ sphere = new THREE.Mesh( new THREE.SphereGeometry(20,20), //width,height,depth
new THREE.MeshLambertMaterial({color: 0xff0000}) //
); scene.add(sphere); sphere.position.set(0,0,0); }最後に、次の5つのステップを実行するメイン関数を書きます.
//
function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); }このとき、上記のプログラムをテストすると、ブラウザウィンドウに描画した球形モデルが表示されます.
まとめ
以上three.jsの入門内容、私たちの核心的な5つのステップは:
1.threeを設定.jsレンダラー
2.カメラカメラカメラの設定
3.シーンsceneの設定
4.光源ライトの設定
5.物体objectの設定
中にはまだよく分からない設定もあるかもしれませんが、大丈夫です.後のいくつかの文章では、以上の5つの主要な手順について詳しく説明します.楽しみにしてください.
この例の完全なコード:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lesson1-by-shawn.xietitle>
<script src="Three.js">script>
<script type="text/javascript">
// Three.js
var renderer;// （ ）
function initThree() { width = document.getElementById('canvas3d').clientWidth;// 「canvas3d」
height = document.getElementById('canvas3d').clientHeight;// 「canvas3d」
renderer=new THREE.WebGLRenderer({antialias:true});// （ ： ）
renderer.setSize(width, height );// （ ）
document.getElementById('canvas3d').appendChild(renderer.domElement);// 【canvas】 【canvas3d】 。
renderer.setClearColorHex(0xFFFFFF, 1.0);// canvas (clearColor)
} //
var camera; function initCamera() { camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );// , Y ， X ， Z （ ：fov ：aspect ：near ：far）
camera.position.x = 0;//
camera.position.y = 50;//
camera.position.z = 100;//
camera.up.x = 0;// 「x」
camera.up.y = 1;// 「y」
camera.up.z = 0;// 「z」
camera.lookAt( {x:0, y:0, z:0 } );//
} //
var scene; function initScene() { scene = new THREE.Scene(); } //
var light; function initLight() { light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//
light.position.set( 200, 200, 200 );//
scene.add(light);//
} //
var sphere; function initObject(){ sphere = new THREE.Mesh( new THREE.SphereGeometry(20,20), //width,height,depth
new THREE.MeshLambertMaterial({color: 0xff0000}) //
); scene.add(sphere); sphere.position.set(0,0,0); } //
function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); } script>
<style type="text/css"> div#canvas3d{ border: none; cursor: move; width: 1400px; height: 600px; background-color: #EEEEEE;
}
style>
head>
<body onload='threeStart();'>
<div id="canvas3d">div>
body>
html>