WebGL
three.js

WebGLで6角柱をグリグリ動かす

何をしたかったのか

Three.jsを使って、6角柱をグリグリ動かせれば、嬉しくなるかもしれないと思ってやってみた。

とりあえず必要なもの

  • three.mini.js
  • OrbitControls.js
  • Webサーバ
  • 先人の知恵
  • 気合

6角柱を並べた

6角柱を6個と中心に地球を配置してみた。

test.html
<!DOCTYPE html>
<html>
<head>
  <!-- 20秒毎にページを再読み込み -->
  <meta http-equiv="refresh" content="20" >
  <meta charset="utf-8"/>

  <!-- WebGL three.js の開始 -->
  <script src="./three.min.js"></script>
  <script src="./OrbitControls.js"></script>
  <script>
// ページの読み込みを待つ
window.addEventListener('load', init);

// サイズを指定
const width = 960;
const height = 540;

function init() {
  // レンダラーを作成
  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#myCanvas')
  });
  renderer.setSize(width, height);

  // シーンを作成
  const scene = new THREE.Scene();

  // カメラを作成
  const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                     camera.position.set(0, 500, +1000); // カメラのおいてある位置
                     camera.lookAt(new THREE.Vector3(0, 0, 0)); //カメラの見ている方向

// カメラコントローラーを作成
const controls = new THREE.OrbitControls(camera);

  // 六角形を6個表示

  // テクスチャ設定
  // テクスチャ0(tex0)
        var texloader0 = new THREE.TextureLoader();
        var tex0=texloader0.load('imgs/earthmap1k.jpg');
  // テクスチャ1(tex1)
        var texloader1 = new THREE.TextureLoader();
        var tex1=texloader1.load('imgs/dolche_canon.jpg');





  // メッシュを作成

    var sphere0 = new THREE.Mesh(new THREE.SphereGeometry(100,100,100),new THREE.MeshLambertMaterial({map: tex0})); //テクスチャ貼り付け

    var hexagon1 = new THREE.Mesh(new THREE.CylinderGeometry(50, 50, 40, 6),new THREE.MeshLambertMaterial({color: '#FF0000'})); //赤
    var hexagon2 = new THREE.Mesh(new THREE.CylinderGeometry(50, 50, 20, 6),new THREE.MeshLambertMaterial({color: '#00FF00'})); //緑
        var hexagon3 = new THREE.Mesh(new THREE.CylinderGeometry(50, 50, 20, 6),new THREE.MeshLambertMaterial({color: '#0000FF'})); //青
        var hexagon4 = new THREE.Mesh(new THREE.CylinderGeometry(50, 50, 20, 6),new THREE.MeshLambertMaterial({color: '#FFFF00'})); //黄色
        var hexagon5 = new THREE.Mesh(new THREE.CylinderGeometry(50, 50, 20, 6),new THREE.MeshLambertMaterial({color: '#FF4500'})); //オレンジ
        var hexagon6 = new THREE.Mesh(new THREE.CylinderGeometry(50, 50, 20, 6),new THREE.MeshLambertMaterial({color: '#FFFFFF'})); //白
        var hexagon7 = new THREE.Mesh(new THREE.CylinderGeometry(50, 50, 20, 6),new THREE.MeshLambertMaterial({color: '#00FFFF'})); //白
        var hexagon8 = new THREE.Mesh(new THREE.CylinderGeometry(50, 50, 20, 6),new THREE.MeshLambertMaterial({color: '#FF00FF'})); //白

  //    var plane1 = new THREE.Mesh(new THREE.PlaneGeometry( 100, 100, 32 ),new THREE.MeshBasicMaterial( {color: 0xFF0000, side: THREE.DoubleSide}));
  //    var plane1 = new THREE.Mesh(new THREE.PlaneGeometry( 100, 100, 32 ),new THREE.MeshBasicMaterial( {map: tex1, side: THREE.DoubleSide}));
  //    var circle1 = new THREE.Mesh(new THREE.CircleGeometry( 50, 32 ),new THREE.MeshBasicMaterial( {color: 0xFF0000, side: THREE.DoubleSide}));
    var circle1 = new THREE.Mesh(new THREE.CircleGeometry( 50, 32 ),new THREE.MeshBasicMaterial( {map: tex1, side:THREE.DoubleSide}));
    var circle2 = new THREE.Mesh(new THREE.CircleGeometry( 50, 32 ),new THREE.MeshBasicMaterial( {map: tex1, side:THREE.DoubleSide}));
    var circle3 = new THREE.Mesh(new THREE.CircleGeometry( 50, 32 ),new THREE.MeshBasicMaterial( {map: tex1, side:THREE.DoubleSide}));
    var circle4 = new THREE.Mesh(new THREE.CircleGeometry( 50, 32 ),new THREE.MeshBasicMaterial( {map: tex1, side:THREE.DoubleSide}));
    var circle5 = new THREE.Mesh(new THREE.CircleGeometry( 50, 32 ),new THREE.MeshBasicMaterial( {map: tex1, side:THREE.DoubleSide}));
    var circle6 = new THREE.Mesh(new THREE.CircleGeometry( 50, 32 ),new THREE.MeshBasicMaterial( {map: tex1, side:THREE.DoubleSide}));
    var circle7 = new THREE.Mesh(new THREE.CircleGeometry( 50, 32 ),new THREE.MeshBasicMaterial( {map: tex1, side:THREE.DoubleSide}));
    var circle8 = new THREE.Mesh(new THREE.CircleGeometry( 50, 32 ),new THREE.MeshBasicMaterial( {map: tex1, side:THREE.DoubleSide}));




  // 配置ポジションを自動で計算

        var node = 8

        sphere0.position.set(0,0,0);
    hexagon1.position.set(400*Math.sin(1/node*Math.PI*2), 0, 400*Math.cos(1/node*Math.PI*2));
    hexagon2.position.set(400*Math.sin(2/node*Math.PI*2), 0, 400*Math.cos(2/node*Math.PI*2));
    hexagon3.position.set(400*Math.sin(3/node*Math.PI*2), 0, 400*Math.cos(3/node*Math.PI*2));
    hexagon4.position.set(400*Math.sin(4/node*Math.PI*2), 0, 400*Math.cos(4/node*Math.PI*2));
    hexagon5.position.set(400*Math.sin(5/node*Math.PI*2), 0, 400*Math.cos(5/node*Math.PI*2));
    hexagon6.position.set(400*Math.sin(6/node*Math.PI*2), 0, 400*Math.cos(6/node*Math.PI*2));
    hexagon7.position.set(400*Math.sin(7/node*Math.PI*2), 0, 400*Math.cos(7/node*Math.PI*2));
    hexagon8.position.set(400*Math.sin(8/node*Math.PI*2), 0, 400*Math.cos(8/node*Math.PI*2));

    circle1.position.set(400*Math.sin(1/node*Math.PI*2), -100, 400*Math.cos(1/node*Math.PI*2));
    circle2.position.set(400*Math.sin(2/node*Math.PI*2), -100, 400*Math.cos(2/node*Math.PI*2));
    circle3.position.set(400*Math.sin(3/node*Math.PI*2), -100, 400*Math.cos(3/node*Math.PI*2));
    circle4.position.set(400*Math.sin(4/node*Math.PI*2), -100, 400*Math.cos(4/node*Math.PI*2));
    circle5.position.set(400*Math.sin(5/node*Math.PI*2), -100, 400*Math.cos(5/node*Math.PI*2));
    circle6.position.set(400*Math.sin(6/node*Math.PI*2), -100, 400*Math.cos(6/node*Math.PI*2));
    circle7.position.set(400*Math.sin(7/node*Math.PI*2), -100, 400*Math.cos(7/node*Math.PI*2));
    circle8.position.set(400*Math.sin(8/node*Math.PI*2), -100, 400*Math.cos(8/node*Math.PI*2));

  // グループを作成

    var hexagons = new THREE.Group();

  // 先ほどのboxをグループに追加
    hexagons.add(sphere0); //中心の球

    hexagons.add(hexagon1); //周りの6角型
    hexagons.add(hexagon2);
    hexagons.add(hexagon3);
    hexagons.add(hexagon4);
    hexagons.add(hexagon5);
    hexagons.add(hexagon6);
    hexagons.add(hexagon7);
    hexagons.add(hexagon8);

    hexagons.add(circle1); //下の円盤
    hexagons.add(circle2);
    hexagons.add(circle3);
    hexagons.add(circle4);
    hexagons.add(circle5);
    hexagons.add(circle6);
    hexagons.add(circle7);
    hexagons.add(circle8);

  // sceneに追加
    scene.add(hexagons);


  // 平行光源
  const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
  directionalLight.position.set(1, 1, 1);
  // シーンに追加
  scene.add(directionalLight);

  tick();

  // 毎フレーム時に実行されるループイベントです
  function tick() {
    // メッシュを回転させる
    hexagons.rotation.y += 0.005;
    // レンダリング
    renderer.render(scene, camera);

    requestAnimationFrame(tick);
  }
}
  </script>
</head>
<body>
  <canvas id="myCanvas"></canvas>
</body>
</html>

でどうたったのか?

グリグリ動かせました。(^_^)

参考

Three.js入門サイト
three.js meshのグループ化