three.jsのサンプル(LIne)を元になんか作って見る。

普段Unity使ってお仕事させていただいているのですが、新しい趣味が欲しかったのでthree.jsをお勉強することにしました。

作ったやつ。正直まだ何が何だかわかっていない状態
それっぽい部分のコードを変えてみた。


![0b0c93d49556ba1112fd707be06fd941.gif](https://qiita-image-store.s3.amazonaws.com/0/108368/e9f8ce58-8cbf-0aa4-a266-edef9276d327.gif)

参考にしたコードは、
three.jsのサンプルの
webGL_line_sphere.htmlってやつ。

正直サンプルの方が綺麗。

コード

```html:line.js

puts 'The best way to log and share programmers knowledge.'
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - lines - spheres</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background-color: #ffffff;
				margin: 0px;
				overflow: hidden;
			}

			a {
				color:#111111;
			}

			#info {
				position: absolute;
				top: 100px; width: 100%;
				color: #ffffff;
				padding: 5px;
				font-family: Monospace;
				font-size: 13px;
				text-align: center;
				z-index:100;
			}

			a {
				color: #ffffff;
				text-decoration: none;
			}

			a:hover {
				color: #ffffff;
			}

		</style>
	</head>
	<body>

		

		<script src="../build/three.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var SCREEN_WIDTH = window.innerWidth,
				SCREEN_HEIGHT = window.innerHeight,

			r = 450,

 n =0,
			mouseX = 0, mouseY = 0,

			windowHalfX = window.innerWidth / 2,
			windowHalfY = window.innerHeight / 2,

			camera, scene, renderer;

			init();
		animate();

			function init() {

				var container;

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
				camera.position.z = 1000;

				scene = new THREE.Scene();

				var i, line, vertex1, vertex2, material, p,
					parameters = [ [ 0.5, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ], [ 0.6, 0xffaa00, 0.75, 1 ], [ 1, 0xffaa00, 0.5, 1 ], [ 0.7, 0x000833, 0.8, 1 ],
							       [ 0.8, 0xaaaaaa, 0.75, 2 ], [ 0.9, 0xFFD464, 0.5, 1 ], [ 1.0, 0xffffff, 0.25, 100 ], [ 1.1, 0xffffff, 0.125, 100 ] ];

				var geometry = createGeometry();

				for( i = 0; i < parameters.length; ++ i ) {

					p = parameters[ i ];

					material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );

					line = new THREE.LineSegments( geometry, material );
					line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
					line.originalScale = p[ 0 ];
					//line.rotation.y = Math.random() * Math.PI;
					//line.updateMatrix();
					scene.add( line );

				}

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
				container.appendChild( renderer.domElement );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );

				//

				window.addEventListener( 'resize', onWindowResize, false );

				// test geometry swapability

				setInterval( function () {

					var geometry = createGeometry();

					scene.traverse( function ( object ) {

						if ( object instanceof THREE.Line ) {

							object.geometry.dispose();
							object.geometry = geometry;

						}

					} );

				},100 );

			}

			function createGeometry() {

n+= 0.1;
				var geometry = new THREE.Geometry();

				for ( i = 0; i < 150; i ++ ) {

					var vertex1 = new THREE.Vector3();
					vertex1.x = Math.random() * 10*Math.sin(n) - 1;
					vertex1.y = Math.random() * 10*Math.cos(n) - 1;
					//vertex1.z = (Math.random() * 10 - 1)*Math.sin(n);
					vertex1.normalize();
					vertex1.multiplyScalar( r );

					vertex2 = vertex1.clone();
					vertex2.multiplyScalar( Math.random() *2 + 1 );

					geometry.vertices.push( vertex1 );
					geometry.vertices.push( vertex2 );

				}

				return geometry;

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;

			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length > 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;

				}

			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;

				}

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			function render() {


				//camera.position.y = ( - mouseY + 200 - camera.position.y ) * .05;
			//	camera.lookAt( scene.position );

				renderer.render( scene, camera );

				//var time = Date.now() * 0.0001;

				for ( var i = 0; i < scene.children.length; i ++ ) {

					var object = scene.children[ i ];

//					if ( object instanceof THREE.Line ) {

						//object.rotation.y = time * ( i < 4 ? ( i + 1 ) : - ( i + 1 ) );

						//if ( i < 5 ) object.scale.x = object.scale.y = object.scale.z = object.originalScale * (i/5+1) * (1 + 0.5 * Math.sin( 7*time ) );

					//}

				}

			}


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

よくわからなかったやつ

```html:line.js

<script src="js/Detector.js"></script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();


```

Detector.jsは、webGL未対応ブラウザでエラー文章を表示させるために必要らしい。
レンダラーを初期化する前にこれを記述するとちゃんと、エラーメッセージを提出してくれるのだと。

参考リンク
http://gupuru.hatenablog.jp/entry/2014/01/05/224813


```js:line.js



parameters = [ [ 0.5, 0xff7700, 1, 2 ], [ 0.5, 0xff9900, 1, 1 ], [ 0.6, 0xffaa00, 0.75, 1 ], [ 1, 0xffaa00, 0.5, 1 ], [ 0.7, 0x000833, 0.8, 1 ],
							       [ 0.8, 0xaaaaaa, 0.75, 2 ], [ 0.9, 0xFFD464, 0.5, 1 ], [ 1.0, 0xffffff, 0.25, 100 ], [ 1.1, 0xffffff, 0.125, 100 ] ];

	var geometry = createGeometry();

				for( i = 0; i < parameters.length; ++ i ) {

					p = parameters[ i ];

					material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ], linewidth: p[ 3 ] } );

					line = new THREE.LineSegments( geometry, material );
					line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
					line.originalScale = p[ 0 ];
					//line.rotation.y = Math.random() * Math.PI;
					//line.updateMatrix();
					scene.add( line );

				}

```

次によくわからなかったのは、ここでした。

僕は、**はじめに配列を作ってそのあとfor文を用いて、parameterのそれぞれの値を、一気にラインに突っ込むという手法**を知らなかったので、かなりお勉強になりました。これC#でも使えそう。

あと、

**LineBasicMaterial**は、ライン専用にマテリアルでした。なんでライン専用のマテリアルなんてあるんだろう。。。。全部一緒でいいじゃん。。(じゃダメなのかな)

参考

http://gupuru.hatenablog.jp/entry/2013/11/29/204049

あと、**LineSegments**ってなんだろうってなって見てみたら実際にラインを作るやつっぽかったです。
createPrimitive的なやつかな

参考サイト

https://threejs.org/docs/api/objects/LineSegments.html

あと、

**scean.traverce**について、トラバースの引数に渡されたすべての子オブジェクトに適用されるような関数らしい。よくわからん。ちなみに第二引数の数値を変えると、fpsが変わりまくった気がした。

sceanそのものの状態を変化させるのかな

参考

http://stackoverflow.com/questions/31899398/what-does-object-traverse-mean-in-three-js

```js:line.js

function createGeometry() {

n+= 0.1;
				var geometry = new THREE.Geometry();

				for ( i = 0; i < 150; i ++ ) {

					var vertex1 = new THREE.Vector3();
					vertex1.x = Math.random() * 10*Math.sin(n) - 1;
					vertex1.y = Math.random() * 10*Math.cos(n) - 1;
					//vertex1.z = (Math.random() * 10 - 1)*Math.sin(n);
					vertex1.normalize();
					vertex1.multiplyScalar( r );

					vertex2 = vertex1.clone();
					vertex2.multiplyScalar( Math.random() *2 + 1 );

					geometry.vertices.push( vertex1 );
					geometry.vertices.push( vertex2 );

				}

				return geometry;

			}

```

これのpushのやつ。
実際に頂点座標を頂点配列の中に入れ込むやつみたい。
2つ頂点あるのは、ラインだからだよね


参考

http://matorel.com/archives/894

以上

初投稿でした。