Question

我正在尝试使用p5.js网络编辑器复制游戏“ slope”，因为我使用的是学校的Chromebook，没有其他编码方式。到目前为止，我的摄影机跟在球体后面，但是似乎球体到达远处时，摄影机会缩回，球体会消失。该多维数据集可以作为参考，以查看球体是否正在移动，但是10秒钟后它会变成越野车。关于如何解决此问题的任何构想，以及使照相机沿球体沿z轴行进时连续跟随球体的想法。一旦球体到达某个点，整个事物似乎就会反转。

let cam;
//let delta = 0.01

var ballX = 0;
var ballY = 0;
var ballZ = 0;
var score = 1;
var speed = 3;
//var speedZ = 2;

function setup() {
	createCanvas(500, 500, WEBGL);
	translate(0, 0, 0)
	cam = createCamera()
}

function draw() {
	background(200);
	normalMaterial();
	//camera
	camera(ballX, ballY, ballZ - 500, ballX, ballY, 0, 0, 50, 0);
	//test
	box(20);

	if (keyIsDown(RIGHT_ARROW)) {
		ballX -= speed;

	} else if (keyIsDown(LEFT_ARROW)) {
		ballX += speed;

	}

	push();
	translate(ballX, ballY, ballZ);
	sphere(50);
	pop();

	ballZ += speed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

Answer 1

camera()函数收到的第四，第五和第六个自变量标记摄像机指向的点。在您的情况下，相机始终指向z = 0，这就是为什么当相机的z坐标达到零时，球体“消失”（例如，相机旋转180度）的原因。

像这样修改相机的位置：

camera(ballX, ballY, ballZ - 500, ballX, ballY, ballZ, 0, 50, 0);

因此它将始终指向球体。

您的代码经过了轻微修改，并具有一个小的功能，该功能允许在按backspace时通过在球体位置和0之间切换相机的z轴目标来检查“后视镜”

var ballX = 0;
var ballY = 0;
var ballZ = 0;
var speed = 3;

function setup() {
	createCanvas(500, 500, WEBGL);
	translate(0, 0, 0)
}

function draw() {
	background(200);
	
	//camera
	camera(ballX, ballY, ballZ -500, ballX, ballY, mirror ? 0 : ballZ, 0, 50, 0);
	//test
	fill('red');
	box(20);

	normalMaterial();
	if (keyIsDown(RIGHT_ARROW)) {
		ballX -= speed;

	} else if (keyIsDown(LEFT_ARROW)) {
		ballX += speed;

	}

	push();
	translate(ballX, ballY, ballZ);
	sphere(50);
	pop();

	ballZ += speed;
}

let mirror = false;

function keyPressed(){
	if(keyCode === BACKSPACE)
		mirror =!mirror;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

如何在p5.js中使用相机跟踪球体？

1 个答案: