three.js-WebGLエンジンは、データ3 Dの可視化展示に使用されます.

` WebGL1.0標準は2011年に発表されて以来、今日2017年までに約6年が経過しました.多くのブラウザの最新バージョンでWebGL 1がサポートされています.モバイルブラウザを含む0標準.貧道はチームがSolidWorksソフトウェアで設計した機械部品を個人のウェブサイトで解析するのが好きで、エンジニアの間でいつでもどこでも携帯電話のブラウザでウェブサイトにアクセスすることができて、部品を開けて互いに交流して、対外交流の展示はもっと便利です.貧道は他の各分野がWebGLのプロジェクトに役立つと信じている.例えば、国内の大手電子商取引プラットフォームが商品のオンライン3 Dプレビュー表示計画を推進し、3 D効果の展示は1枚の画像体験よりずっと良い.ゲーム業界はオンラインでゲームを展開することを望んでおり、ダウンロードが必要なゲームよりも普及に有利である.不動産、ホテル、デパートの分野では、ホームページを通じて室内効果をオンラインで展示することを望んでおり、CAD開発会社はWebGL技術を利用してオンラインで3次元モデリングを実現することを望んでいる.特定の分野のエンジニアリング応用に加えて,ウェブページで自分の作品,アルゴリズムをオンラインで展示したいと考えるコンピュータグラフィック学習者も多く,クライアントがOpenGLを用いて開発した作品に比べてWebGL技術を用いて実現した作品はリンクを1つ送るだけでよい.実際、ますます多くのソフトウェアアプリケーションがウェブページに移行し、ブラウザの役割はウェブページの内容を展示するだけでなく、プラットフォームとして使われています.WebGLを勉強してもOpenGLを勉強しても、実はコンピュータグラフィックスとその延長応用を勉強しています.WebGLはブラウザプラットフォーム、OpenGLはオペレーティングシステムプラットフォームに対応しています.
ブラウザのWebGLのサポートに比べて、WebGLに欠けているのは普及の問題であり、人材の需要は人材の供給よりはるかに大きい.隔行は隔山のようで、WebGLの現在の普及は遅く、グラフィック学が難しいほか、このような問題もある.WebGLの最初の3つのアルファベットはインターネットプラットフォーム、ブラウザページ、後の2つのアルファベットはコンピュータグラフィックを体現しています.フロントエンドのエンジニアを理解して、往々にしてグラフィックを理解していないで、グラフィックを理解しているのは往々にしてウェブサイトの開発、ウェブページの設計を理解していません.グラフィックに関する学習資料は、オペレーティングシステムプラットフォームに基づいてCまたはC++言語で作成されることが多い.
学習者の基礎、業界が多様化しているため、このシリーズのWebGLチュートリアルはできるだけ異なる基礎、異なる分野の人に配慮し、フロントエンドのエンジニアに対して、チュートリアルはグラフィックの知識システムを説明するために、すでにグラフィックを理解している学習者に対して、チュートリアルは関連するウェブデザインの知識を説明し、一定のプログラミング能力さえあればいい.実際のWebGLプロジェクトでは、グラフィックそのものに加えて、インタラクティブなインタフェースの設計を学び、HTMLとCSSでインタフェースの設計を完了し、WebGL API、シェーダ言語GLSL ESとJavascript言語でグラフィック部分の開発を完了することができます.HTML、CSS、Javascript言語を使いこなせば、WebGLのAPIとGLSL ES言語を学ぶだけで、シェーダ言語GLSL ESはC言語のようにGPU上で動作し、多くのC言語を学んだ人にとって難しくありません.OpenGLベースの人にとって、WebGL APIはOpenGL APIサブセットのサブセットにすぎず、インターネットの生態環境にどのように移行するかをより多く学び、Webページ上でアプリケーションを設計するGUIはオペレーティングシステムプラットフォームよりも便利であり、ハイパーテキスト言語HTMLを直接使用すればよい.WebGL Web ： ， HTML Web ， ; ， ， 、 、 OpenGL 。 WebGL（ Web Graphics Library） 3D ， JavaScript OpenGL ES 2.0 ， OpenGL ES 2.0 JavaScript ，WebGL HTML5 Canvas 3D ， Web 3D ， 。 ，WebGL ， 3D ， 3D 。 Three.js 3D JS （ Three 3D ）， Mr.Doob， ：https://github.com/mrdoob/three.js/。 WebGL 3D ， jQuery HTML DOM ，Three.js WebGL 。 WebGL HTML5 ， Web 3D ， WebGL 。

[](#javascript-3d-library)JavaScript 3D library
The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.
Examples — Documentation — Wiki — Migrating — Questions — Forum — Slack — Discord
[](#usage)Usage
This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from './js/three.module.js';
let camera, scene, renderer;
let geometry, material, mesh;
init();
function init() {
 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
 camera.position.z = 1;
 scene = new THREE.Scene();
 geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
 material = new THREE.MeshNormalMaterial();
 mesh = new THREE.Mesh( geometry, material );
 scene.add( mesh );
 renderer = new THREE.WebGLRenderer( { antialias: true } );
 renderer.setSize( window.innerWidth, window.innerHeight );
 renderer.setAnimationLoop( animation );
 document.body.appendChild( renderer.domElement );
}
function animation( time ) {
 mesh.rotation.x = time / 2000;
 mesh.rotation.y = time / 1000;
 renderer.render( scene, camera );
}

If everything went well, you should see this .
[](#cloning-this-repository)Cloning this repository
Cloning the repo with all its history results in a ~2GB download. If you don't need the whole history you can use the depth parameter to significantly reduce download size.

git clone --depth=1 https://github.com/mrdoob/three.js.git

[](#change-log)Change log
Releases
[](#%E 7%8 E%AF%E 5%A 2%83%E 6%94%AF%E 6%8 C%81)環境サポート

npm install http-server-g

が必要です

ルートディレクトリcmdコマンドラインでhttp-server(画像/ファイル/jsonをロードするためのローカルnodeサービス)

を実行する

コマンドラインのhttp://10.10.100.20:8080のようなアドレスをコピーし、ローカルブラウザでクリックして対応するdemo(またはブラウザアドレスバーに直接パスを入力して表示)

を表示します.
[](#%E 5%85%B 6%E 4%BB%96%E 5%8 F%82%E 8%80%83%E 8%B 5%84%E 6%96%99)その他の参考資料

1『Three.js入門ガイド』のブックコードhttp://zhangwenli.com/ThreeExample.js

2 http://www.yanhuangxueyuan.com/Three.js

3 http://www.yanhuangxueyuan.com

4 https://github.com/takahirox/takahirox.github.io(2万5千件以上のファイル)

5 https://threejs.org/

6 https://www.bilibili.com/video/av909518/

7 https://www.blender.org/

8 https://www.blendercn.org/

9 https://github.com/mrdoob/three.js

10 http://www.yanhuangxueyuan.com/work.html

11 http://www.yanhuangxueyuan.com/WebGL_course/preface.html

12 https://blog.csdn.net/u012468376/article/details/73350998

13 https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20ECharts%20GL%20%E5%AE%9E%E7%8E%B0%E5%9F%BA%E7%A1%80%E7%9A%84%E4%B8%89%E7%BB%B4%E5%8F%AF%E8%A7%86%E5%8C%96

14 https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/

15 https://www.babylonjs.com/

16 https://github.com/pixijs/pixi.js