LoginSignup
0
1

More than 5 years have passed since last update.

@dolcano

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

Last updated at Posted at 2018-02-04

何をしたかったのか

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

とりあえず必要なもの

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

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); //周りの６角型
    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のグループ化

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1