ホームページ >ウェブフロントエンド >jsチュートリアル >Three.js JS ライブラリの基本的な紹介

Three.js JS ライブラリの基本的な紹介

巴扎黑オリジナル: 2017-09-15 09:15:562362ブラウズ

three.js は、使いやすさから広く使用されている WebGL フレームワークです。以下では、Script House の編集者が、three.js の基本的な設定方法を事例を通して説明します。具体的な詳細については、この記事を参照してください

冒頭の挨拶

webGL を使用すると、3D を実装できます。キャンバス上の効果。 Three.js は、使いやすさから広く使用されている WebGL フレームワークです。 WebGL を学習したい場合は、複雑なネイティブインターフェイスを放棄して、このフレームワークから始めることをお勧めします。

ブロガーも現在three.jsを学習中ですが、関連する情報が非常に少なく、公式のAPIドキュメントですら非常に大まかなものであることがわかりました。多くのエフェクトでは、自分でゆっくりコーディングして探索する必要があります。したがって、このチュートリアルを書く目的は、私自身がそれを要約し、みんなと共有することです。

この記事は、一連のチュートリアル「はじめに」の最初の記事です。この記事では、簡単なデモを例にthree.jsの基本的な設定方法を説明します。この記事を学習すると、ブラウザで 3D グラフィックを描画する方法がわかります。

準備

コードを記述する前に、まず最新の three.js フレームワークパッケージをダウンロードし、three.js をページに導入する必要があります。もちろん、パッケージには誰もが学ぶことができる多くのデモもあります。 ;

現時点で webGL をサポートする最良のブラウザは Chrome で、次に国内の Aoyou と Cheetah もテスト後に実行できます。

例から始めましょう!

まず、次のように HTML を構築します:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <style type="text/css">
 p#canvas-frame{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body>
 <!--盛放canvas的容器-->
 <p id="container"></p>
 </body>
</html>

WebGL 描画用のキャンバスフレームと同じサイズの領域を準備します。具体的には:

(1) id「canvas3d」のp要素をbodyタグに追加します。

(2)styleタグに「canvas3d」のCSSスタイルを指定します。

5ba626b379994d53f7acf72a64f9b697 タグを記述する必要はなく、canvas を保持する p を定義するだけで済みます。canvas はthree.js によって動的に生成されます。

ここで、スクリプトの作成を開始します。次の 5 つの手順に従って、単純な 3 次元モデルを構築します。これは、three.js の基本的な手順でもあります。 3 次元空間は 2 次元にマッピングされます。 3 次元平面をレンダリングするプロセスは 3 次元レンダリングと呼ばれます。一般に、レンダリング操作を実行するソフトウェアをレンダラと呼びます。具体的には以下のような処理が必要となります。

(0) グローバル変数 (オブジェクト) を宣言します。

(1) キャンバス "canvas-frame" の高さと幅を取得します。

(2) レンダラーオブジェクトを生成します (属性: アンチエイリアシング効果は有効です)。設定);

(3) レンダラの高さと幅を指定します (キャンバスフレームと同じサイズ)

(4) [canvas3d] 要素に追加します。レンダラーのクリアカラー (clearColor)。

//开启Three.js渲染器
var renderer;//声明全局变量（对象）
function initThree() {
 width = document.getElementById(&#39;canvas3d&#39;).clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById(&#39;canvas3d&#39;).clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById(&#39;canvas3d&#39;).appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
}

2. カメラを設定します

OpenGL (WebGL) では、3 次元空間のオブジェクトを 2 次元空間に投影する方法として、透視投影と正投影の 2 種類のカメラがあります。透視図法は、視点に近いものは大きく、遠くにあるものは小さく描く方法で、これは私たちが日常生活で物を見る方法と一致しています。正投影とは、視点からの距離に関係なく、物体を一定の大きさで描画することを指し、建築やデザインなどの分野では、物体をさまざまな角度から描画する必要があるため、広く使用されています。 Three.jsでは透視投影や正射投影でもカメラを指定できます。この記事では、以下の手順に従って透視投影法を設定します。

(0) グローバル変数 (オブジェクト) を宣言します。

(1) 透視投影用にカメラを設定します。

(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. シーンシーンを設定します

シーンは 3 次元空間です。 [Scene] クラスを使用して、[scene] というオブジェクトを宣言します。

　　//设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }

4. 光源ライトを設定する

OpenGL(WebGL)の3次元空間には、点光源とスポットライトの2種類があります。なお、点光源の特殊な例として平行光源（無線高光源）もある。また、光源のパラメータとして[アンビエントライト]などの設定も行えます。これに対応して、Three.jsでも[ポイントライト]、[スポットライト]、[ディレクションライト]、[アンビエントライト]を設定することができます。 OpenGL と同様に、シーン内に複数の光源を設定できます。基本的に、それは周囲光と他のいくつかの光源の組み合わせです。環境光を設定しないと、光に照らされていない表面が暗くなりすぎます。この記事では、まず次の手順に従って指向性光源を設定し、次に環境光を追加します。

(0) グローバル変数(オブジェクト)を宣言する

(1) 指向性光源を設定する

(2) 光源ベクトルを設定する

(3) シーンに光源を追加する

ここでは「DirectionalLight」クラスを使用します平行光源を表す [light ] オブジェクトを宣言します

　　　　//设置光源
 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);
 }

最后，我们写一个主函数执行以上五步：

　　　　　　　　//执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }

这时，测试以上程序，你会发现浏览器窗口中出现了你绘制的球形模型：

总结

以上就是three.js的入门内容，我们核心的五步就是：

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

可能其中有些设置你还不太清楚，没关系，后面几篇文章会对以上五个主要步骤进行详细的讲解，敬请期待~~

本例完整代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <script type="text/javascript">
 //开启Three.js渲染器
 var renderer;//声明全局变量（对象）
 function initThree() {
 width = document.getElementById(&#39;canvas3d&#39;).clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById(&#39;canvas3d&#39;).clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById(&#39;canvas3d&#39;).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">
 p#canvas3d{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body onload=&#39;threeStart();&#39;>
 <!--盛放canvas的容器-->
 <p id="canvas3d"></p>
 </body>
</html>

以上がThree.js JS ライブラリの基本的な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Fullpage プラグインが全画面のページめくりエフェクトページを迅速に開発する方法次の記事：Fullpage プラグインが全画面のページめくりエフェクトページを迅速に開発する方法

続きを見る