スキップしてメイン コンテンツに移動

p5js 3d でFPSっぽいキー入力とマウス入力

いつぞやのコードが見つかったのでこちらに残す

3dでのキーとマウス入力


”A,S,D,F"で移動、マウスドラッグで方向転換



<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<div id="p5canvas"></div>
<script>
	let camerax = 0;
	let cameray = 700;
	let cameraz = -350;
	let lookatx = 0;
	let lookatz = 0;

	function setup() {
		createCanvas(700, 400, WEBGL).parent("p5canvas");
		lookatz = 3.5; // PI;
		lookatx = 1.6; // HALF_PI;
	}
	//camera turn
	function mouseDragged() {
		lookatx += (pmouseX - mouseX) * 0.01;
		lookatz += (pmouseY - mouseY) * 0.01;
		if (lookatx > TWO_PI) lookatx -= TWO_PI; //loop
		if (lookatx < 0) lookatx += TWO_PI;
		if (lookatz > PI + QUARTER_PI) lookatz = PI + QUARTER_PI; //no loop
		if (lookatz < PI - QUARTER_PI) lookatz = PI - QUARTER_PI;
	}

	// camera move
	function keyinput() {
		let zx = cos(lookatx) * 5;
		let zz = sin(lookatx) * 5;
		if (keyIsDown(87)) { //w
			camerax += zx;
			cameraz += zz;
		}else
		if (keyIsDown(83)) { //s
			camerax -= zx;
			cameraz -= zz;
		}
		zx = cos(lookatx + HALF_PI) * 5;
		zz = sin(lookatx + HALF_PI) * 5;
		if (keyIsDown(65)) { //a
			camerax -= zx;
			cameraz -= zz;
		}else
		if (keyIsDown(68)) { //d
			camerax += zx;
			cameraz += zz;
		}
	}

	function draw() {
		background(250);
		camera(camerax, cameray, cameraz,
			(cos(lookatx) * -cos(lookatz)) + camerax,
			sin(lookatz) + cameray,
			sin(lookatx) + cameraz, 0.0, 1.0, 0.0); //
		keyinput();
		noStroke();
		normalMaterial();
		//ambientMaterial(255,255,255);
		//directionalLight(255,255,255, 0, 1, 0);
		push();
		translate(0, 0, 800);
		plane(1600);
		translate(0, 0, -1600);
		plane(1600);
		translate(0, 800, 800);
		rotateX(PI / 2);
		plane(1600);
		pop();

		beginShape(); // 閉矩形
		vertex(100, 0, -500);
		vertex(100, 100, -500);
		vertex(0, 100, -500);
		endShape(CLOSE);

		translate(-240, 400, 0);

		push();
		rotateZ(frameCount * 0.01);
		rotateX(frameCount * 0.01);
		rotateY(frameCount * 0.01);
		plane(70);
		pop();

		translate(240, 0, 0);
		push();
		rotateZ(frameCount * 0.01);
		rotateX(frameCount * 0.01);
		rotateY(frameCount * 0.01);
		box(70, 70, 70);
		pop();

		translate(240, 0, 0);
		push();
		rotateZ(frameCount * 0.01);
		rotateX(frameCount * 0.01);
		rotateY(frameCount * 0.01);
		cylinder(70, 70);
		pop();

		translate(-240 * 2, 200, 0);
		push();
		rotateZ(frameCount * 0.01);
		rotateX(frameCount * 0.01);
		rotateY(frameCount * 0.01);
		cone(70, 70);
		pop();

		translate(240, 0, 0);
		push();
		rotateZ(frameCount * 0.01);
		rotateX(frameCount * 0.01);
		rotateY(frameCount * 0.01);
		torus(70, 20);
		pop();

		translate(240, 0, 0);
		push();
		rotateZ(frameCount * 0.01);
		rotateX(frameCount * 0.01);
		rotateY(frameCount * 0.01);
		sphere(70);
		pop();
	}
</script>

コメント

このブログの人気の投稿

Arduino IDE が "Downloading index: library_index.tar.bz2" で固まる問題

PCとのシリアル通信が原因の一つらしい '/home/usename/.arduino15/packages' を消すといいらしい ので消すと治った IDEの起動中にフリーズしてたのが治った Downloading index: library_index.tar.bz2 とダウンロード中だったが終了したので起動中のフリーズが起こるようになった

Blogger でp5jsがつかえた

”HTMLビュー”でHTMLを編集  divとcanvasを関連付ければ良いみたい (div id="p5canvas とcreateCanvasの.parent("p5canvas");) p5js本体はCDNを参照(https://cdnjs.com/libraries/p5.js) コードはP5サイトのEXAMPLEから(https://p5js.org/examples/3d-geometries.html) <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> function setup() { createCanvas(710, 400, WEBGL).parent("p5canvas"); } function draw() { background(250); translate(-240, -100, 0); normalMaterial(); push(); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); plane(70); pop(); translate(240, 0, 0); push(); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); box(70, 70, 70); pop(); translate(240, 0, 0); push(); rotateZ(frameCount * 0.01); rotateX(frameCount * 0.01); rotateY(frameCount * 0.01); cylinder(70, 70); pop(); ...

クラスカル法

chat-gptにきいたらおしえてくれた                                                                参考動画 <!DOCTYPE html> <html lang="en"> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script> <div id="p5canvas"></div> <script> class Graph {   constructor() {     this.vertices = [];     this.edges = [];   }   addVertex(x, y) {     this.vertices.push({ x, y });   }   addEdge(source, destination, weight) {     if (this.vertices[source] && this.vertices[destination]) ...