ホーム > ブログ > プログラミングTips > ライブラリーthreejsを使ってみた

ライブラリーthreejsを使ってみた

2016.04.19

こんばんは、銀ねこです。

前から興味のあったthreejsを試してみました。

WebGLとはなんぞ?

WebGL(ウェブジーエル)は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様のこと。

出典:Wikipedia

詳しくはWikipediaで。

もともと私がこの業界に入ったのも、JSで作るアニメーションが楽しかったというのがきっかけだったのでこれは中身をみてみようということで早速ライブラリDLして使ってみることにしました。

HTMLにthree.min.jsを読み込むだけ

使い方は以下URLからthree.min.jsを読み込むだけ。

threejs.org

ドキュメントを読み解いてみると。。。
シーンをカメラでレンダリングするためにsceneとcameraとrendererの3つが必要です的なことが書いてある。

私なりの解釈ですが、カメラはどこから見ているかという角度とかで、みられている場所がシーン、でどう動いているか(動いているとは限らないけど。。。)がレンダー。

この最低3つの設定をすれば、threejsは動くよ的なことが書いてある。

さらに、あと光を当てたりアニメーションしたりなど複雑にすることもできるみたいだけどとりあえずは置いておくことに。。。。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>threejsの練習</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. <script src="js/three.min.js"></script>
  11. //ここにjs記述
  12. </script>
  13. </html>

htmlをざっと書き、

あとはscriptタグの中にこんな感じで記述します。
今回はbox型を追加しましたが球体やリングなどいろんな形が用意されてます。

  1. // scene
  2. var scene = new THREE.Scene();
  3.  
  4. // mesh
  5. var material = new THREE.MeshBasicMaterial( { color: 0x86a367 } );
  6. var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  7.  
  8. var cube = new THREE.Mesh( geometry, material );
  9. cube.x += 10;
  10. cube.y += 10;
  11. scene.add( cube );
  12.  
  13. // camera
  14. var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  15. camera.position.z = 5;
  16.  
  17. // render
  18. var renderer = new THREE.WebGLRenderer();
  19. renderer.setClearColor(0xffffff);
  20. renderer.setSize( window.innerWidth, window.innerHeight );
  21. document.body.appendChild( renderer.domElement );
  22. renderer.render(scene, camera);

スクリーンショット 2016-04-20 0.19.45.png

するとのっぺりした3Dができるので、次は光を当てて立体的にしてみます。
今、materialがベーシックタイプで光を反射しないのでLambertに変え、ライトを追加します。
自然光と調整光を追加します。

  1. // scene
  2. var scene = new THREE.Scene();
  3.  
  4. // light
  5. var light = new THREE.DirectionalLight( 0xffffff, 1 );
  6. light.position.set( 0, 1, 0 );
  7. scene.add( light );
  8. var ambient = new THREE.AmbientLight( 0x404040 );
  9. scene.add( ambient );
  10.  
  11. // mesh
  12. var material = new THREE.MeshLambertMaterial( { color: 0x86a367 } );
  13. var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  14.  
  15. var cube = new THREE.Mesh( geometry, material );
  16. cube.x += 10;
  17. cube.y += 10;
  18. scene.add( cube );
  19.  
  20. // camera
  21. var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  22. camera.position.z = 5;
  23.  
  24. // render
  25. var renderer = new THREE.WebGLRenderer();
  26. renderer.setClearColor(0xffffff);
  27. renderer.setSize( window.innerWidth, window.innerHeight );
  28. document.body.appendChild( renderer.domElement );
  29. renderer.render(scene, camera);

スクリーンショット 2016-04-20 0.27.11.png

これでより立体的になりました。

せっかくなのでさらにキューブを回してみます。

  1. // scene
  2. var scene = new THREE.Scene();
  3.  
  4. // light
  5. var light = new THREE.DirectionalLight( 0xffffff, 1 );
  6. light.position.set( 0, 1, 0 );
  7. scene.add( light );
  8. var ambient = new THREE.AmbientLight( 0x404040 );
  9. scene.add( ambient );
  10.  
  11. // mesh
  12. var material = new THREE.MeshLambertMaterial( { color: 0x86a367 } );
  13. var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  14.  
  15. var cube = new THREE.Mesh( geometry, material );
  16. cube.x += 10;
  17. cube.y += 10;
  18. scene.add( cube );
  19.  
  20. // camera
  21. var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  22. camera.position.z = 5;
  23.  
  24. // render
  25. var renderer = new THREE.WebGLRenderer();
  26. renderer.setClearColor(0xffffff);
  27. renderer.setSize( window.innerWidth, window.innerHeight );
  28. document.body.appendChild( renderer.domElement );
  29. renderer.render(scene, camera);
  30.  
  31. // キューブを回転させる
  32. var render = function () {
  33. requestAnimationFrame(render);
  34.  
  35. cube.rotation.x += 0.01;
  36. cube.rotation.y += 0.01;
  37.  
  38. renderer.render(scene, camera);
  39. };
  40.  
  41. render();

デモはこちら

これでくるくる回るようになりましたね!
今日のところはこの辺で!

おやすみなさい〜。

この記事のタグ