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

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>

コメント

このブログの人気の投稿

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(); ...

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

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

ubuntu20で古いスキャナを使う

 断舎利のため古くなった本を自炊 スキャナはCANNON DR-C125  前はWINDOWS今はubuntuなのでハマったが なんとかしたらなんとかなった まずsane は入ってたから、libsane1,  libsane-common,  sane-utilsをインストール sudo apt update sudo apt install libsane1 sudo apt-get update sudo apt-get install libsane-common sudo apt-get update sudo apt-get install sane-utils どれが必要あるのか無いのかわからなかったので全部入れてみた ubntu用ドライバは 以下 のサイトから https://www.canon.co.uk/support/products/document-scanners/dr-series/imageformula-dr-c125.html?type=drivers&language=&os=linux ダウンロードしたのがこれ d1224mux_dr125_lnx_drv010.zip  解凍して cndrvsane-drc125_1.00-0.1_i386.deb をインストール の途中でエラーで止まる 詳細は 以下 のサイトに書いてあるようなことらしい https://bugs.launchpad.net/ubuntu/+source/sane-backends/+bug/1728012 ubuntuのバージョンアップでsanaのディレクトリの構成が変わったからみたい なので /usr/  lib/sane を作りもう一度インストールすると成功した ディレクトリのなかにはファイルが3つ それらを usr/lib/x86_64-linux-gnu/sane に移動  /usr/  lib/sane は削除 以上でドライバのインストールは出来た これだけが原因なら他の古いスキャナのドライバのインストール もできるんじゃないかしら WINDOWS には CaptureOnTouch なる ソフトがあったがubuntuにはない ので xsane を導入 sudo apt-get upd...