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スタイルを指定します。