three.jsで竜巻っぽいやつを作る。

![45c01d9eca0e3b1e7a6eea9c4cb6e039.gif](https://qiita-image-store.s3.amazonaws.com/0/108368/445b128b-7f12-27d1-3374-25a8e9e21a9a.gif)

竜巻っぽいやつ作りました。

参考にしたのは、
以下のサイト

http://blog.muuny-blue.info/f7a124943b6aa6654d787f07eee84d2c.html

#コード

```html:qiita.html

<html>
  <head>
  <title>My first Three.js app</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>
  </head>
  <body>
    <script src="../build/three.js"></script>
<script>

var cube;
var renderer;
var scean;
var camera;
var planes;
var plane;


Init();

function Init(){

	planes = new Array(1000);
	const far = 20000;
	const w = window.innerWidth/10;
	const h = window.innerHeight/10;
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, far);
	camera.position.z = 0;
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	for(var i =0; i< 2000; i++){
	const color = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
  	const material = new THREE.MeshBasicMaterial( { color: color, transparent: true, opacity: 0.6 } );
	const geometory = new THREE.PlaneBufferGeometry(5,5);
	plane = new THREE.Mesh(geometory,material);
	plane.position.y = i-300;
	planes[i]=plane;
	scene.add(planes[i]);	


}

};

var n =0;
const render = function () {
	n+= 0.0005;
  requestAnimationFrame( render );
	for(var i =1; i< planes.length; i++){

		planes[i].position.x = i/2*Math.sin(i*n);
		plane.position.y = i-300;

		planes[i].position.z = i/2*Math.cos(i*n)-500;

	}
  renderer.render(scene, camera);
};

render();

</script>
 
  </body>
  </body>
</html>
```

#説明

竜巻ってどんな形なってるかなぁ
って思って考えてみると、下の方が半径小さくて、上の方が半径大きめの円の重ね合わせですよね！！

それと、竜巻って確か上の方が回転スピード早いんじゃなかったっけな

なので、

以下のようなスクリプトを書きます！

```js:qiita.js

for(var i =1; i< planes.length; i++){

		planes[i].position.x = i/2*Math.sin(i*n);
		plane.position.y = i-300;

		planes[i].position.z = i/2*Math.cos(i*n)-500;

}
```

配列の初期の方は、半径が小さい円を描くようになっております。

終わり

追記

動かしてみました。

![05cfead75781664752b449d7f1e7f4d0.gif](https://qiita-image-store.s3.amazonaws.com/0/108368/726f647b-2e5f-e0c2-0701-c239c7575e1f.gif)

#コード

```html:qiita.html

<html>
  <head>
  <title>My first Three.js app</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>
  </head>
  <body>
    <script src="../build/three.js"></script>
<script>

var cube;
var renderer;
var scean;
var camera;
var planes;
var plane;


Init();

function Init(){

    planes = new Array(1000);
    const far = 20000;
    const w = window.innerWidth/10;
    const h = window.innerHeight/10;
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, far);
    camera.position.z = 0;
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0xffffff, 0 );
    document.body.appendChild( renderer.domElement );

    var light = new THREE.DirectionalLight(0xffffff);
	light.position.set(1, 0, 0).normalize();
	scene.add( light );

 	var light2 = new THREE.DirectionalLight(0xffffff);
	light2.position.set(-5, 0, 0).normalize();
	scene.add( light2 );


    for(var i =0; i< 2000; i++){
    const color = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
    const material = new THREE.MeshBasicMaterial( { color: color, transparent: true, opacity: 1 } );
    material.side = THREE.DoubleSide;
    const geometory = new THREE.PlaneBufferGeometry(5,5);
    plane = new THREE.Mesh(geometory,material);
    plane.position.y = i-300;

    plane.rotation.x = i;
    planes[i]=plane;
    scene.add(planes[i]);   


}

};

var n =0;
var m =0;
const render = function () {
    n+= 0.0005;
    m = Math.sin(n*10);

  requestAnimationFrame( render );
    for(var i =1; i< planes.length; i++){

        planes[i].rotation.y = i*n/10000;
        planes[i].position.x = i/2*Math.sin(i*n)+(planes.length/2-i)/2*Math.sin(n*70);
        planes[i].position.y = i-300;

        planes[i].position.z = i/2*Math.cos(i*n)-800+(planes.length/2-i)/2*Math.cos(n*50);

    }
  renderer.render(scene, camera);
};

render();

</script>

  </body>
  </body>
</html>
```