three.jsによるシーンインスタンス作成の詳しい説明
この記事では、three.js の中国語ドキュメントを学習するためのシナリオを作成するための関連情報を、サンプル コードを通じて詳細に紹介します。必要な場合は、以下からフォローしてください。
Three.jsとは何ですか?
この記事を読んでいる方は Three.js についてある程度理解していると思いますので、Three.js とは何かを簡単にご紹介します
Three.js はブラウザ上で WebGL の 3D エフェクトを有効にするライブラリです。使い方は簡単です。生の WebGL の単純なキューブは数百行の Javascript とシェーダー コードになりますが、Three.js にはほんの少しのコードしか必要ありません
このセクションの目的は、three.js の概要を提供することです。まず、回転立方体を使用してシーンを構築しました。問題が発生してサポートが必要な場合は、ページの下部に参照用のソース コードがあります。
シーンには少なくとも 3 種類のコンポーネントが必要です
カメラ/画面に何をレンダリングするかを決定します
光源/マテリアルの表示方法と生成時のマテリアルの使用方法に影響しますシャドウ
-
オブジェクト/カメラの視点での主要なレンダリング構成です: 正方形、球体など。
始める前に
次の HTML コードをコンピューターに保存し、three.js をjs ディレクトリを選択し、参照します ブラウザで開きます
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>次のコードが script タグ内にダウンロードされます
サンプルシーンを作成します
デモにthree.jsを使用するには、シーン、カメラの3つの要素が必要です、カメラ シーンをレンダリングするレンダラー。
えー何が起こっているのか説明するために少し時間を取りましょう。これで、シーン、カメラ、レンダラーが作成されました。
three.js には複数のカメラがあります。一時的に PerspectiveCamera (パースペクティブ カメラ) を使用します
その最初の属性は、可視ビュー範囲であるビュー角度 (FOV) で、その値は角度のサイズを表します。
2 番目の属性はアスペクト比です。ほとんどの場合、幅を高さで割った値を使用する必要があります。そうしないと、ワイドスクリーン TV で古い映画のような画像が表示され、画像が潰れて見えます。
最後の 2 つの属性は、近景と遠景です。これら 2 つの面の間の領域のみがレンダリングされます。現時点ではこれについて心配する必要はありません。これらのパラメーターを使用するとパフォーマンスが向上します。
次にレンダラーについて話しましょう。これが魔法です。ここで使用する WebGLRenderer に加えて、three.js は、WebGL をサポートしていない古いブラウザーで使用するためのいくつかのレンダラーも提供します。
レンダラー インスタンスの作成に加えて、アプリケーション レンダリングのサイズも設定する必要があります。アプリケーションの幅と高さ全体 (この場合はブラウザ ウィンドウの幅と高さ) を埋める方法を使用することをお勧めします。パフォーマンス優先のアプリケーションの場合、setSize を使用して、半分のサイズでレンダリングされる window.innerHeight/2、window.innerWidth/2 などの小さい値を設定できます。
サイズ全体を低解像度でレンダリングしたい場合は、キャンバス要素の幅と高さが100 % の場合、アプリケーションは 1/2 の解像度でレンダリングされます。
次に、レンダリングされた要素を HTML に追加する必要があります。レンダラーはキャンバスを通してシーンを表示します。
「それはいいのですが、先ほどの立方体はどうでしょうか？」 ここでそれを付け加えましょう。
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
立方体を作成するには BoxGeometry が必要です。このオブジェクトには、立方体のすべての点 (頂点) と塗りつぶし (面) が含まれています。それについては後で説明します。
ジオメトリに加えて、色を付けるためのマテリアルも必要です。 three.js にはいくつかのマテリアルが用意されていますが、今回は MeshBasicMaterial を使用します。すべてのマテリアルは、すべてのプロパティを含むオブジェクトを受け入れて適用します。簡単にするために、色属性は 1 つだけ提供します: 緑 - 0x00ff00 CSS および PS と同じ 16 進カラーを使用します。
必要な 3 番目の要素はメッシュです。メッシュはマテリアルをジオメトリに適用するオブジェクトで、シーンに配置して自由に動き回ることができます。
scene.add() を呼び出すと、追加した内容はデフォルトで座標 (0, 0, 0,) に表示されます。これにより、カメラと立方体が内部で重なり合います。これを回避するには、カメラを少し外側に移動します。
レンダリングシーン
上記のコードをHTMLファイルにコピーすると、画面には何も表示されません。まだシーンをレンダリングしていないためです。したがって、レンダラーまたはアニメーション ループを呼び出す必要があります。
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;これにより、レンダラーに 1 秒ごとに 1 フレームを描画させるループが作成されます。 Web ゲーム プログラミングについてあまり詳しくない場合は、「setInterval 関数を作成すればいいのではないか?」と思われるかもしれません。実際には作成できますが、requestAnimationFrame にはそれ以上の利点があります。最も重要な利点は、ブラウザが別のタブに切り替わったときに requestAnimationFrame がレンダリングを一時停止するため、貴重な処理能力とバッテリー寿命が無駄にならないことです。
立方体を動かします
作成したコードを挿入すると、緑色の立方体が表示されるはずです。飽きないように回してみましょう。
次のコードをanimate関数のrenderer.renderに追加します:
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
它会按帧运行（每秒60帧），并赋予立方体优雅的动画。基本上，应用运行时，你想移动或改变任何元素，必须通过动画循环。你当然在此处能调用其他函数，以免animate函数上百行代码结尾。
结果
恭喜！你现在创建好了第一个 three.js 应用。很简单，但总得突破。
完整代码参考如下。琢磨一下并深刻理解其工作机理
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>相关推荐：
以上がthree.jsによるシーンインスタンス作成の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7523
15
1378
52
81
11
21
74
Win11での管理者権限の取得について詳しく解説
Mar 08, 2024 pm 03:06 PM
Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています
Oracle SQLの除算演算の詳細説明
Mar 10, 2024 am 09:51 AM
OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算
PHPモジュロ演算子の役割と使い方を詳しく解説
Mar 19, 2024 pm 04:33 PM
PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割 数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。
Linuxシステムコールsystem()関数の詳細説明
Feb 22, 2024 pm 08:21 PM
Linux システム コール system() 関数の詳細説明 システム コールは、Linux オペレーティング システムの非常に重要な部分であり、システム カーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システム コールの基本概念 システム コールは、ユーザー プログラムがオペレーティング システム カーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。
Linuxのcurlコマンドの詳しい説明
Feb 21, 2024 pm 10:33 PM
Linuxのcurlコマンドの詳細な説明 要約：curlは、サーバーとのデータ通信に使用される強力なコマンドラインツールです。この記事では、curl コマンドの基本的な使用法を紹介し、読者がコマンドをよりよく理解して適用できるように実際のコード例を示します。 1.カールとは何ですか? curl は、さまざまなネットワーク要求を送受信するために使用されるコマンド ライン ツールです。 HTTP、FTP、TELNETなどの複数のプロトコルをサポートし、ファイルアップロード、ファイルダウンロード、データ送信、プロキシなどの豊富な機能を提供します。
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
C言語学習ルートを詳細に分析
Feb 18, 2024 am 10:38 AM
ソフトウェア開発の分野で広く使用されているプログラミング言語として、C 言語は多くの初心者プログラマーにとって最初の選択肢です。 C言語を学ぶと、プログラミングの基礎知識を定着させるだけでなく、問題解決能力や思考力も向上します。この記事では、初心者が学習プロセスをより適切に計画できるようにするための C 言語学習ロードマップを詳しく紹介します。 1. 基本的な文法を学ぶ C 言語の学習を始める前に、まず C 言語の基本的な文法規則を理解する必要があります。これには、変数とデータ型、演算子、制御ステートメント (if ステートメント、
Promise.resolve() について詳しく見る
Feb 18, 2024 pm 07:13 PM
Promise.resolve() の詳細な説明には、特定のコード例が必要です。Promise は、非同期操作を処理するための JavaScript のメカニズムです。実際の開発では、順番に実行する必要があるいくつかの非同期タスクを処理する必要があることがよくあり、満たされた Promise オブジェクトを返すために Promise.resolve() メソッドが使用されます。 Promise.resolve() は Promise クラスの静的メソッドであり、
