javascriptとWebGLを利用して地球を描きます.

17583 ワード
JavaScript
javascriptとWebGLを利用して地球を描きます.
通訳:javascriptとWebGLを利用して地球を描きます。
私たちが知っているすべてのHTML 5 APIの中で、WebGLは最も面白いものかもしれません.このAPIを利用して、ブラウザでかっこいい3 Dシーンを創造する能力があります.本文は完璧にあなたにいくつかのクールさがどのように実現されるかを示します.
特に指摘したいのは、この教程は地球惑星モデルを構築します.このモデルは興奮している人のように周りを回ることができます.また、他のプログラマーから称賛されることができます.いいでしょう.こんなに多くなりました.
準備
このチュートリアルは、魅力的なWebGLプラグインを使用します.three.js.このプラグインはJQueryに似ていますが、WebGLに対して、多くの複雑な元のAPIアクセスインターフェースを抽象化しています.WebGLの特性をより簡単に利用することができます.
HTMLでは、通常のscriptタグからこのプラグインを導入できます.以下の通りです.
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r63/three.min.js"></script>
ここではCDNバージョンを引用します.必要があれば、現地の方法を使って導入してもいいです.そして、WebGLに上でレンダリングできるものがあることを確認します.ここでは柔軟なやり方があります.直接に一般のDivやCanvasをHTMLに書くことができます.あるいは私達はJSで作成して、canvas元素をDomに追加してからレンダリングします.ここではまず簡単な方法を採用します.
<body> <div id="container"></div> <script src="earth.js"></script> </body>
scriptタグをDomに接続したら、私たちのHTML部分はほぼ完成しました.
次のステップ
Tree.js自体は、実際の3 Dデスクトッププログラムに非常に近いものを作る傾向があります.私たちは一つのシーンを持っています.生放送して、カメラを通して見て、照明や特殊効果があります.全体のシーンに彩られています.もちろん彼ら自身も全部3 Dオブジェクトです.このシーンの要素リストは怖いようです.私たちのearth.jsファイルでは、これらの要素はすべて形状変数として使えます.Javascriptファイルは以下の通りです.
var scene, camera, light, renderer, earthObject; var WIDTH = window.innerWidth - 30, HEIGHT = window.innerHeight - 30; var angle = 45, aspect = WIDTH / HEIGHT, near = 0.1, far = 3000;
一部の追加変数はここで定義されています.WIDH、HEIGHT変数は私達の画布の幅と高さを取得します.下の他の変数は後で私達のカメラの位置を設定します.ほとんどの3 Dオブジェクトには、これらの要素は共通しています.プラットフォームでも環境でも、ここで私たちは習慣的にこれらの人々を書きます.しかし、Three.jsを利用して、簡単に実現できます.これらの要素はどのように同じ時間にプロジェクトに融合するかを確認します.
環境
まず、私たちは新しい変数を有効にして、彼らを初期化して、私たちの地球モデルをより華やかに見せる必要があります.まず環境要因ごとの変数を設定できます.
var container = document.getElementById('container'); camera = new THREE.PerspectiveCamera(angle, aspect, near, far); camera.position.set(0, 0, 0); scene = new THREE.Scene(); light = new THREE.SpotLight(0xFFFFFF, 1, 0, Math.PI / 2, 1); light.position.set(4000, 4000, 1500); light.target.position.set (1000, 3800, 1000);
上のコードの実行状況について説明します.
  • 私たちのHTMlでcontainerオブジェクトをキャプチャする
  • 前に宣言した変数で、cameraオブジェクトを設定します.(cameraasがどのように3 Dで働くかについての情報はここですをクリックしてもいいです.)
  • position.set方法でcameraの位置を設定します.この方法は次元(x,y,z)パラメータオブジェクトを携帯する必要があります.もう考えられたかもしれません.私たちはこのcameraを使って私たちの3 Dオブジェクトを特定します.本教程の3 Dオブジェクトは私たちの地球モデルです.
    • .
  • 次に私たちのナイトオブジェクトを設定します.ライトオブジェクトが描画されていないと、モデル全体の効果は真っ暗になりますので、注意しなければなりません.Thre.jsのSpotLight objectオブジェクトは私たちのカメラオブジェクトとほぼ同じパラメータを持っています.ただし、このオブジェクトの最初のパラメータcolourは16進数の値でなければなりません.そして残りの他のパラメータはcameraとほぼ同じです.
  • 最後に、私たちはキャンバスのオブジェクトを設定する必要があります.もう一つは確実な点です.キャンバスのオブジェクトを事前に完全にスクリーンに描画する必要があります.もう一度強調します.このステップが完成していないと、キャンバス全体が何も見えなくなり、真っ暗になります.キャンバスにギザギザ効果を追加しました.そして、この効果をDomとします.元素をオリジナルの容器に追加します.
    • 今私たちは地球全体をインターネットのように貼り付けて自分のモデル全体を構築する必要があります.コードは以下の通りです.
    var earthGeo = new THREE.SphereGeometry (30, 40, 400), earthMat = new THREE.MeshPhongMaterial(); var earthMesh = new THREE.Mesh(earthGeo, earthMat); earthMesh.position.set(-100, 0, 0); earthMesh.rotation.y=5; scene.add(earthMesh);
    ここで私たちはメッシュを作成しました.(Mesh)オブジェクトは、このメッシュは地球の形のように見えるように装う対象です.そしてこのオブジェクトに幾何学的な構造、外観包装、または質感のある素材を加えてこのメッシュを包みます.同じように、このオブジェクトを適切な位置に置き、他のパラメータオブジェクトと同じようにMeshオブジェクトを追加します.シーン中です.
    次のような例があります.この中には追加的なレンダリング効果があります.後で説明します.このサンプルは私たちが望むものにどんどん近づいているように見えます.


    ＜h 2 id=“toc_4”青い星＜h 2＞
    ＜p＞次の面白い部分はこの男の皮膚を作ることです.まず私達は拡散反射板を使います.こいつをもっと地図のように見えるようにします.次のように追加できます.
    // diffuse map earthMat.map = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');
    ＜p＞より質感がいいなら、これピクチャを使ってみてもいいです.またはgoogleに行って欲しい写真を検索してもいいです.高解像度の図でもいいです.
    ＜p＞今のモデルは悪くないように見えますが、地形を引用して描くことで、モデル全体がよりリアルに見えます.この地球にはいくつかの高山があります.太陽系の他の星を区別するためには凸凹マップ（bump map）を使って、3 Dモデルでは凸凹マップはモノクロで、鮮明な白色を使って画像の凹凸を浮き彫りにします.不平等な部分(例えば、私たちの例では、山脈).
    // bump map earthMat.bumpMap = THREE.ImageUtils.loadTexture('images/elev_bump_16ka.jpg'); earthMat.bumpScale = 8;
    ＜p＞上の写真を使って、効果がほぼ達成されたと改めて強調しました.Google検索「Earth bump map」を使ったら、多くの選択が得られます.しかし、もしあなたが良くないと感じたら、この接続をクリックしてもいいです.以上のコードを実行したら、次のような効果が見られます.
    ＜p＞＜iframe id=“cpmbodb”src=“http://codepen.io/SitePoint/embed/WbgybV?height=598&theme-i-d=6441&sgyborder=Wbgyber&default-tab=reult&user=SitePoint=frame eborder="0"scrolling="no"width="912"height="598"/"/"/"/"/"/"/"


    ＜h 2 id=「toc_5」を回せ!

    次の残りのことは、この地球モデルにいくつかのアニメーション効果を追加することです.そのためには、render()とanimate()

    という二つの新しい方法が必要です.
    function animate() { requestAnimationFrame(animate); render(); }
    ＜p＞私たちのanimate()の方法は複雑ではありません.自己再帰的に連続的にrequestAnimationFrame()を呼び出す方法によって、anmiate()は私たちのrender()方法を要求します.render()方法のコードを見せてください.
    function render() { var clock = new THREE.Clock(), delta = clock.getDelta(); earthMesh.rotation.y += rotationSpeed * delta; renderer.render(scene, camera); }
    ＜p＞上のコードがどのような作業をしているかを見てみましょう.render()方法が要求されるたびに、地球モデルをy軸にゆっくりと回転させます.(ここでは任意の回転回数を設定できます.ここではgetDelta()方法で回転回数を制御します.もちろん、この方法を使用しないでください.)その後、render()方法でキャンバスを清掃する作業が行われます.キャンバスが乱されないようにするためには重要なステップです.最後に私たちのシーン(およびシーンオブジェクト内の他のすべてのオブジェクト)と私たちのキャメラオブジェクトをレンダリングします.
    ＜h 2 id=「toc_6」＞最後に(/h 2)

    もちろん、ドラッグ操作により、私たちの地球モデルの体験がより良くなります.Orbit Controls.jsは私たちの地球モデルのためにマウスの回転効果を提供できるスクリプトです.そして、私たちのフラット層に星や雲を追加して、地球モデルの背景としても難しくないです.面倒くさがなければ、WebGLの着色も利用できます.あなたの星のためにフラット層を追加します.
    ＜p＞実行コードは、コードのサンプルを見ることができます.コードの中で最終的なDemoは以下の通りです.
    ＜p＞＜iframe id=“cpmbodybe Rzm”src=“http://codepen.io/SitePoint/embed/wBERzm?height=483&theme-i-d=64411&sgg-hash=wBERzm&default-tab=reult&user=SitePoint=frame border="0"scrolling="no"width="870"height="483"/"/"/"


    ＜p＞マウスを押しながらドラッグしたり、マウスホイールを転がしたりすることで、効果を見ることができます.
    ＜h 2 id=「toc_7」＞エンディング
    ＜p＞WebGLとThree.jsはより挑戦的になっています.彼らは時々私達に3 D芸術家のように場面、画布、cameraを利用して私達の仕事を完成させるように要求します.最後の結果はいくつかの印象的なものを作り出しました.この技術に集中すれば、ブラウザで3 D特性を使って面白いものを作ることができます.それを続ければ、近いうちに素晴らしい成績を取ることができると信じています.
    ＜p＞原文アドレス:デモ



    JSで計算する精度が無くなります.