2022年11月16日水曜日

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>

0 件のコメント:

コメントを投稿

raspiでseleniumの自動化用のファイル作り直し

2024/2/17に不注意でraspiのsdカードを壊し jupyterファイルのバックアップを取らずにos再インストールを試みるという 愚行を重ねたためまたjupyterで作業ファイルを作ることになったので念の為 残しておく 途中なので要らない行も有るかも これだけ再現できれば...