three.js で 3D 立方体を描画する詳細な例-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

three.js で 3D 立方体を描画する詳細な例

小云云

Dec 19, 2017 pm 04:34 PM

javascript 詳しい説明

この記事では、例を挙げて 3D 立方体を描画する Three.js について詳しく説明します。Three.js は、右手座標系に基づいて、単純なまたはより複雑な 3 次元グラフィックスを作成し、適用することができます。カラフルなテクスチャとマテリアルを追加できます。光源を使用して、3D シーン内のオブジェクトを移動したり、スクリプトによるアニメーションなどを追加したりできます。この記事では、three.jsを使用して3D立方体を描画する方法を紹介します。必要な場合は参照してください。

はじめに

three.js は、WebGL フレームワークであり、キャンバス上で 3D 効果を実現できます。 3D 効果の実現は中国ではまだ比較的新しいことであり、参考になる情報はあまりありません。この記事はあくまで3D立方体の描き方を紹介する入門記事です。

Three.js の基本概念

Three.js には、シーン、カメラ、レンダラーという 3 つの基本概念が含まれています。

シーンは描画する必要のあるオブジェクトであり、カメラは視野角を表し、レンダラーは描画のキャリアです(ブラウザのDOM要素に添付できます)。

つまり、私たちは撮影しますカメラを通してシーンを撮影し、それをターゲットのメディアに描画します。

シーン、カメラ、レンダラーを作成する

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 );

ログイン後にコピー

上記のコードは、最初にシーンを作成し、次に PerspectiveCamera (立体カメラ) を作成し、次に WebGL レンダラーを作成します (Three.js は非 3D Canvas 2D レンダラーもサポートしていることに注意してください)。それを HTML ドキュメント本文の DOM 子要素に添付します。

紹介の後、まず実装のレンダリングを紹介します。

これは実装のレンダリングですが、かなり 3 次元ですよね?

描画前の準備

コードを記述する前に、まず最新のthree.jsフレームワークパッケージをダウンロードし、独自のページを導入する必要があります。

具体的な実装プロセス

キャンバスを準備します

このキャンバスは、上の図の黒いボックスである 3D 正方形全体を表示するキャンバスです。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Camera 相机</title>
 <style>
 #canvas {
 width: 400px;
 height: 300px;
 border: 1px solid red;
 margin: 50px auto;
 display:block;
 }
 </style>
</head>
<body>
 <canvas id="canvas"></canvas>
 <script src="./libs/three.min.js"></script>
</body>
</html>

ログイン後にコピー

描画のアイデアを明確にしましょう

次の描画プロセスには、キャンバス、シーン、カメラ、レンダラーなどの複数の概念が関係します。

描画プロセスのコードをより深く理解し、記憶を助けるために、まず次の概念を理解します:

今旅行中で、とても美しい写真を見て、この 3D 世界を描きたいとします。それを記録してください

この美しいシーンがシーンです
写真をはっきりと見るために、写真をキャンバスに配置します
最後に、レンダラーを使用して修正してレンダリングします。

このようにして、この 3D 世界を正常に表示することができます。

【プログラムはまだ本番に近づいています。

以上がthree.js で 3D 立方体を描画する詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1655

CakePHP チュートリアル

1414

Laravel チュートリアル

1307

PHP チュートリアル

1254

C# チュートリアル

1228

Related knowledge

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 での除算演算

Linuxシステムコールsystem()関数の詳細説明 Feb 22, 2024 pm 08:21 PM

Linux システムコール system() 関数の詳細説明システムコールは、Linux オペレーティングシステムの非常に重要な部分であり、システムカーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システムコールの基本概念システムコールは、ユーザープログラムがオペレーティングシステムカーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。

PHPモジュロ演算子の役割と使い方を詳しく解説 Mar 19, 2024 pm 04:33 PM

PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

Linuxのcurlコマンドの詳しい説明 Feb 21, 2024 pm 10:33 PM

Linuxのcurlコマンドの詳細な説明要約：curlは、サーバーとのデータ通信に使用される強力なコマンドラインツールです。この記事では、curl コマンドの基本的な使用法を紹介し、読者がコマンドをよりよく理解して適用できるように実際のコード例を示します。 1.カールとは何ですか? curl は、さまざまなネットワーク要求を送受信するために使用されるコマンドラインツールです。 HTTP、FTP、TELNETなどの複数のプロトコルをサポートし、ファイルアップロード、ファイルダウンロード、データ送信、プロキシなどの豊富な機能を提供します。

Promise.resolve() について詳しく見る Feb 18, 2024 pm 07:13 PM

Promise.resolve() の詳細な説明には、特定のコード例が必要です。Promise は、非同期操作を処理するための JavaScript のメカニズムです。実際の開発では、順番に実行する必要があるいくつかの非同期タスクを処理する必要があることがよくあり、満たされた Promise オブジェクトを返すために Promise.resolve() メソッドが使用されます。 Promise.resolve() は Promise クラスの静的メソッドであり、

numpyのバージョンクエリメソッドの詳細説明 Jan 19, 2024 am 08:20 AM

Numpy は、豊富な配列演算関数とツールを提供する Python 科学計算ライブラリです。 Numpy のバージョンをアップグレードする場合、互換性を確保するために現在のバージョンをクエリする必要がありますが、この記事では Numpy のバージョンクエリの方法と具体的なコード例を詳しく紹介します。方法 1: Python コードを使用して Numpy のバージョンをクエリします。Python コードを使用して簡単に Numpy のバージョンをクエリできます。実装方法とサンプルコードは次のとおりです: importnumpyasnpprint(np

See all articles