LoginSignup
3
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@renyama(廉弥 山神)

three.jsのサンプルを使って球を作ってみる(Lineとbuffergeometory)

Posted at

5578982cc7cae8fba1b249ae2ec9d1af.gif

今日は土曜日なのに予定が何もない悲しみ溢れる人間だからたくさんコードかけてうれしいなあ

buffergeometoryとline結ぶサンプルあったんでそれ使って作りました。
悲しい。予定がないのが悲しい。
本当は遊びたかったんだけど、家から出るのめんどくさくなってしまった。
悲しい。

何となく球を作るのは、初心者がやるべきことだと思っております。

悲しい。

#コード

qiita.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - buffergeometry - lines drawcalls</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 {
				color: #cccccc;
				font-family:Monospace;
				font-size:13px;
				text-align:center;

				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {
				color: #0080ff;
			}

		</style>
	</head>
	<body>

		<div id="container"></div>
		<div id="info">
			<a href="http://threejs.org" target="_blank">three.js</a> webgl - buffergeometry drawcalls - by <a href="https://twitter.com/fernandojsg">fernandojsg</a>
		</div>

		<script src="js/libs/dat.gui.min.js"></script>
		<script src="../build/three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>

			var group;
			var container, controls, stats;
			var particlesData = [];
			var camera, scene, renderer;
			var positions, colors;
			var particles;
			var pointCloud;
			var particlePositions;
			var linesMesh;

			var maxParticleCount = 1000;
			var particleCount = 500;
			var r = 800;
			var rHalf = r / 2;

			var effectController = {
				showDots: true,
				showLines: true,
				minDistance: 150,
				limitConnections: false,
				maxConnections: 20,
				particleCount: 500
			};

			init();
			animate();

			function initGUI() {

				var gui = new dat.GUI();

				gui.add( effectController, "showDots" ).onChange( function( value ) { pointCloud.visible = value; } );
				gui.add( effectController, "showLines" ).onChange( function( value ) { linesMesh.visible = value; } );
				gui.add( effectController, "minDistance", 10, 300 );
				gui.add( effectController, "limitConnections" );
				gui.add( effectController, "maxConnections", 0, 30, 1 );
				gui.add( effectController, "particleCount", 0, maxParticleCount, 1 ).onChange( function( value ) {

					particleCount = parseInt( value );
					particles.setDrawRange( 0, particleCount );

				});

			}

			function init() {

				initGUI();

				container = document.getElementById( 'container' );

				//

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
				camera.position.z = 1750;

				controls = new THREE.OrbitControls( camera, container );

				scene = new THREE.Scene();


				group = new THREE.Group();
				scene.add( group );


				var segments = maxParticleCount * maxParticleCount;

				positions = new Float32Array( segments * 3 );
				colors = new Float32Array( segments * 3 );

				var pMaterial = new THREE.PointsMaterial( {
					color: 0xF0FF0F,
					size: 2,
					blending: THREE.AdditiveBlending,
					transparent: true,
					sizeAttenuation: false
				} );

				particles = new THREE.BufferGeometry();
				particlePositions = new Float32Array( maxParticleCount * 3 );
				var radius = 0.5;

				for ( var i = 0; i < maxParticleCount; i++ ) {

					var x = radius*r*Math.sin(i*10)*Math.cos(i) - radius*r / 2;
					var y = radius*r*Math.sin(i*10)*Math.sin(i)- radius*r / 2;
					var z = radius*r*Math.cos(i*10)- radius*r / 2+r/2;

					particlePositions[ i * 3     ] = x;
					particlePositions[ i * 3 + 1 ] = y;
					particlePositions[ i * 3 + 2 ] = z;

					// add it to the geometry
					particlesData.push( {
						velocity: new THREE.Vector3( 10, 10,  10 ),
						numConnections: 0
					} );

				}

				particles.setDrawRange( 0, particleCount );
				particles.addAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ).setDynamic( true ) );

				// create the particle system
				pointCloud = new THREE.Points( particles, pMaterial );
				group.add( pointCloud );

				var geometry = new THREE.BufferGeometry();

				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setDynamic( true ) );
				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );

				geometry.computeBoundingSphere();

				geometry.setDrawRange( 0, 0 );

				var material = new THREE.LineBasicMaterial( {
					vertexColors: 0xF10111,
					blending: THREE.AdditveBlending,
					transparent: true
				} );

				linesMesh = new THREE.LineSegments( geometry, material );
				group.add( linesMesh );

				//

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );

				renderer.gammaInput = true;
				renderer.gammaOutput = true;

				container.appendChild( renderer.domElement );

				//

				stats = new Stats();
				container.appendChild( stats.dom );

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

			}

			function onWindowResize() {

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

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

			}

			function animate() {

				var time = Date.now() * 0.0005;

				var vertexpos = 0;
				var colorpos = 0;
				var numConnected = 0;

				var radius = 0.5;
				for ( var i = 0; i < particleCount; i++ )
					particlesData[ i ].numConnections = 0;

				for ( var i = 0; i < particleCount; i++ ) {

					// get the particle
					var particleData = particlesData[i];

					particlePositions[ i * 3 ] = radius*r*Math.sin(i*10+i*time*0.005)*Math.cos(i*10+i*time*0.01) - radius*r / 2;
					particlePositions[ i * 3 + 1 ] = radius*r*Math.sin(i*10+i*time*0.005)*Math.sin(i*10+i*time*0.01)- radius*r / 2;
					particlePositions[ i * 3 + 2 ] = radius*r*Math.cos(i*10+i*time*0.005)- radius*r / 2+r/2;



					

					// Check collision
					for ( var j = i + 1; j < particleCount; j++ ) {

						var particleDataB = particlesData[ j ];
						if ( effectController.limitConnections && particleDataB.numConnections >= effectController.maxConnections )
							continue;

						var dx = particlePositions[ i * 3     ] - particlePositions[ j * 3     ];
						var dy = particlePositions[ i * 3 + 1 ] - particlePositions[ j * 3 + 1 ];
						var dz = particlePositions[ i * 3 + 2 ] - particlePositions[ j * 3 + 2 ];
						var dist = Math.sqrt( dx * dx + dy * dy + dz * dz );

//点と線
						if ( dist < effectController.minDistance ) {

							particleData.numConnections++;
							particleDataB.numConnections++;

							var alpha = 0 - dist / effectController.minDistance;

							positions[ vertexpos++ ] = particlePositions[ i * 3     ];
							positions[ vertexpos++ ] = particlePositions[ i * 3 + 1 ];
							positions[ vertexpos++ ] = particlePositions[ i * 3 + 2 ];

							positions[ vertexpos++ ] = particlePositions[ j * 3     ];
							positions[ vertexpos++ ] = particlePositions[ j * 3 + 1 ];
							positions[ vertexpos++ ] = particlePositions[ j * 3 + 2 ];

							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;

							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;

							numConnected++;
						}
					}
				}


				linesMesh.geometry.setDrawRange( 0, numConnected * 2 );
				linesMesh.geometry.attributes.position.needsUpdate = true;
				linesMesh.geometry.attributes.color.needsUpdate = true;

				pointCloud.geometry.attributes.position.needsUpdate = true;

				requestAnimationFrame( animate );

				stats.update();
				render();

			}

			function render() {

				var time = Date.now() * 0.001;

				//group.rotation.y = time * 0.1;
				renderer.render( scene, camera );

			}

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

#わからなかったところ

qiita.js

function initGUI() {

				var gui = new dat.GUI();

				gui.add( effectController, "showDots" ).onChange( function( value ) { pointCloud.visible = value; } );
				gui.add( effectController, "showLines" ).onChange( function( value ) { linesMesh.visible = value; } );
				gui.add( effectController, "minDistance", 10, 300 );
				gui.add( effectController, "limitConnections" );
				gui.add( effectController, "maxConnections", 0, 30 );
				gui.add( effectController, "particleCount", 0, maxParticleCount, 1 ).onChange( function( value ) {particleCount = parseInt( value );
particles.setDrawRange( 0, particleCount );

				});

			}

openframeworkでも同じ感じのありますよね。
UnityでもshaderのPropertyに同じようなのありますよね。
そういうことだと思います。

gui.add( effectController, "showDots" ).onChange( function( value ) { pointCloud.visible = value; } );

このeffectControllerがプロパティ的な役割してくれて、showDotsが変数の役割してくれるっぽい。
んで、onChangeで変更内容の記述で、後々でてくるpointCloudってやつが目に見えるかどうかの変更をしてるっぽい。

gui.add( effectController, "maxConnections", 0, 30 );
0~30までの間の値を変えれますよ

あと、init関数の中でもちろんこの関数はよび出す必要あり

参考

qiita.js

function initGUI() {

group = new THREE.Group();
scene.add( group );
.
.
.
group.add( pointCloud );

group.add( pointCloud );

groupってsceneを作ってその中にどんどん新しいジオメトリ？を追加していくスタイルをとってました。
メリットは何なんだろ。

qiita.js

var geometry = new THREE.BufferGeometry();

geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setDynamic( true ) );


				geometry.computeBoundingSphere();

geometry.setDrawRange( 0, 0 );

geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setDynamic( true ) );

setDynamic(true);ってなんなんだろう

って思って調べてもあまり情報が出てこない。。

多分動的にするってことだと思います。

嘘です。消してもなんの変化もありませんでした。

よくわかりません。

geometry.computeBoundingSphere();

ジオメトリの境界球って日本語訳できたけど、なくても何も変わりませんでした。
何のためにあるんだこれ。

geometry.setDrawRange( 0, 0 );
は、geometry.setDrawRange( 開始点, 終了点 );
になっている。とりあえず、初期値は0
後々、animeで動かす時に用いる感じ。

参考

qiita.js

var material = new THREE.LineBasicMaterial( {
					vertexColors: 0xF10111,
					blending: THREE.AdditveBlending,
					transparent: true
				} );

** blending: THREE.AdditveBlending,**
って何なんだろうって思ってたらめっちゃいいサイトを発見しました

普通のカラーのブレンドのことだったのか。

変数の値(ここではTHREE.AdditveBlendingの種類もいろいろあるみたい。)

疲れてきたぞ。
あと少し。

qiita.js

var dist = Math.sqrt( dx * dx + dy * dy + dz * dz );

//点と線
						if ( dist < effectController.minDistance ) {

							particleData.numConnections++;
							particleDataB.numConnections++;

							var alpha = 0 - dist / effectController.minDistance;

							positions[ vertexpos++ ] = particlePositions[ i * 3     ];
							positions[ vertexpos++ ] = particlePositions[ i * 3 + 1 ];
							positions[ vertexpos++ ] = particlePositions[ i * 3 + 2 ];

							positions[ vertexpos++ ] = particlePositions[ j * 3     ];
							positions[ vertexpos++ ] = particlePositions[ j * 3 + 1 ];
							positions[ vertexpos++ ] = particlePositions[ j * 3 + 2 ];

							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;

							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;
							colors[ colorpos++ ] = alpha;

							numConnected++;
						}
					}
				}

if ( dist < effectController.minDistance ) {
}

distはここでは、particleどうしの位置関係になってます。位置関係がプロペティーの値よりちっさい時だけ、実行される感じです。

んで、
** positions[ vertexpos++ ] = particlePositions[ j * 3 + 2 ];
**
で頂点同士を結びます。

qiita.js

linesMesh.geometry.setDrawRange( 0, numConnected * 2 );
linesMesh.geometry.attributes.position.needsUpdate = true;
linesMesh.geometry.attributes.color.needsUpdate = true;
pointCloud.geometry.attributes.position.needsUpdate = true;				requestAnimationFrame( animate );				stats.update();
render();

最後です。

**linesMesh.geometry.setDrawRange( 0, numConnected * 2 );
**
これで、0番目から、numConnectedの数までの頂点を結ぶことができます。

linesMesh.geometry.attributes.position.needsUpdate = true;

ラインを動かすために必要なんですね

これがないと動かない的なエラーにぶち当たって殺されそう。

参考

** linesMesh.geometry.attributes.color.needsUpdate = true;
**
colorも同様！　てかgeometryに属してるやつは全部必要っぽい

requestAnimationFrame( animate );

ブラウザに描画したいアニメーションを指定して動かす。

参考

終わり。

3
8
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
3
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?