ブラウザで3D。javascriptライブラリ「Three.js」

2016.06.10

こんにちは。

まだまだウェブサイト全体をホームページと呼んでいた時代（ホームページとはそもそもウェブサイトのトップページの意味なのですが、昔はそこらへんあやふやで、なんでもかんでも「ホームページ」でした）、ブラウザは「ネットスケープナビゲーター（通称ネスケ）」がメイン、56kbpsのモデムで通信していた（56kbps=56000bit=7000byteつまり1秒に7KB。現在主流のフレッツ光は100Mbps＝100,000,000bit=12500KB！）頃から、VRMLという言語を使い、手打ちで座標を入力し、ウェブで3D表現を模索していたエージーワークス代表の増本修二です。＜前振り長すぎですね

そんな、昔から3D表現が大好きな私が、モダンブラウザで3d表示を可能にする、「Three.js」を御紹介させていただきます。

three.js、どんなものかと言いますと、私のイメージでは、一時期flashでの3Dライブラリ、「Papervision3d」のjavascript版、といったところでしょうか。3D空間にステージや光源、オブジェクトの形状やマテリアル、カメラなど、3d表示に必要な要素をjavascriptで定義し、それをレンダリングして表示します。

どの様なことが出来るかは、下記サイトを見ていただくのが一番早いです。
クオリティの高いサンプルが数多く掲載されています。

Three.js
http://threejs.org

まずはこのページの「download」からライブラリ一式（ちょっと重いですが）を入手します。

その中からまずは「three.min.js」を使用し、下記要領で記述します。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>three.js</title>
<style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
</style>
<script src="js/three.min.js"></script>
</head>
 
<body>
<script>
//①scene生成
var scene = new THREE.Scene();
 
//②camera生成
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
//③renderer生成
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.MeshPhongMaterial( { color: 0xcccccc } );
 
//⑥オブジェクト生成（ジオメトリとマテリアルがセットになったもの）
var cube = new THREE.Mesh( geometry, material );
 
//⑦シーンにオブジェクト追加
scene.add( cube );
 
//⑧ライト追加
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( -2, 2, 2 );
scene.add( directionalLight );
camera.position.z = 5;
 
//⑨レンダーファンクション
function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
}
 
//⑩レンダー実行
render();
 
</script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<!DOCTYPE HTML>

<html>

<head>

<title>three.js</title>

<style>

body { margin: 0; }

canvas { width: 100%; height: 100% }

</style>

</head>

<body>

//①scene生成

var scene = new THREE.Scene();

//②camera生成

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//③renderer生成

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.MeshPhongMaterial( { color: 0xcccccc } );

//⑥オブジェクト生成（ジオメトリとマテリアルがセットになったもの）

var cube = new THREE.Mesh( geometry, material );

//⑦シーンにオブジェクト追加

scene.add( cube );

//⑧ライト追加

var directionalLight = new THREE.DirectionalLight( 0xffffff );

directionalLight.position.set( -2, 2, 2 );

scene.add( directionalLight );

camera.position.z = 5;

//⑨レンダーファンクション

function render() {

requestAnimationFrame( render );

renderer.render( scene, camera );

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

}

//⑩レンダー実行

render();

</script>

</body>

</html>

①scene
これは3D空間、全体を定義します。

②camera
定義した3D空間を、このカメラを通してみることになります。
ズーム率や角度、位置などを設定します。

③renderer
レンダラーの設定です。カメラを通して覗いた図を、描画します。

④ジオメトリ
3D空間に置かれるオブジェクトの形状の設定です。

⑤マテリアル
④オブジェクトの色や質感などを設定します。

⑥オブジェクト
④⑤で設定位した、ジオメトリとマテリアルをあわせてオブジェクトと呼びます。

⑦シーンにオブジェクト追加
①で定義したシーンに⑥のオブジェクトを追加します。

⑧ライト追加
ライトを定義し、こちらもシーンに追加します。
ライトの種類はいくつかあるので、threejs.orgで色々みてみるとよいです。

⑨レンダーファンクション
どのシーン、カメラをレンダリングするか、また、アニメーションの設定などをfunctionにまとめます。

⑩レンダー実行
最後に⑨のfunctionを実行します。

いかがでしょうか？下記の様な3Dが表示されたでしょうか？
http://web3d.ag-works.biz/basic/basic.html

以上、Three.jsのご紹介でした。

3DCG TECH WEB web3d

投稿者：shuzic

前の記事次の記事

ブラウザで3D。javascriptライブラリ「Three.js」

コメントをどうぞコメントをキャンセル

最近のブログ記事

AgWORKS、22期目スタートです。

「だれでもシミュレータ」がカスタム･･･

IT導入支援事業者採択のお知らせ。･･･

アーカイブ

同じカテゴリの記事

カテゴリー

ユーザー

2024年11月
月	火	水	木	金	土	日
« 9月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

ブラウザで3D。javascriptライブラリ「Three.js」

コメントをどうぞ コメントをキャンセル

最近のブログ記事

AgWORKS、22期目スタートです。

「だれでもシミュレータ」がカスタム･･･

IT導入支援事業者採択のお知らせ。･･･

アーカイブ

同じカテゴリの記事

カテゴリー

ユーザー

コメントをどうぞコメントをキャンセル