竜巻っぽいやつ作りました。
参考にしたのは、
以下のサイト
#コード
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>
#説明
竜巻ってどんな形なってるかなぁ
って思って考えてみると、下の方が半径小さくて、上の方が半径大きめの円の重ね合わせですよね！！
それと、竜巻って確か上の方が回転スピード早いんじゃなかったっけな
なので、
以下のようなスクリプトを書きます！
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;
}
配列の初期の方は、半径が小さい円を描くようになっております。
終わり
追記
動かしてみました。
#コード
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>