通过鼠标光标确定甜甜圈方向

Question

我试图找出如何让这段代码工作，以便甜甜圈“跟随”光标，但是 Y 轴有一些问题。画布的边缘看起来很好，但一旦光标到达中心，甜甜圈就开始疯狂旋转。有什么办法可以限制旋转吗？是否可以旋转甜甜圈本身，而不是相机，因为这对我来说似乎是错误的，但这就是我迄今为止所能找到的。

这是我的代码：

let torusRotationY = 0

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL)
  torusRotationY = HALF_PI // Разворачиваем пончик на 90 градусов
}

function draw() {
  background(0)
  orbitControl()
  const targetX = mouseX - width / 2
  const targetY = mouseY - height / 2
  const targetZ = 0
  const distance = 400
  const target = createVector(targetX, targetY, targetZ)
  const cameraPosition = target.copy().normalize().mult(-distance)
  camera(cameraPosition.x, cameraPosition.y, cameraPosition.z)
  push()
  normalMaterial()
  rotateY(torusRotationY)
  torus(80, 45)
  pop()
  torusRotationY = atan2(targetX, distance) + HALF_PI
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

Answer 1

不确定这是否是您所要求的，但这会“查看”光标。我向

targetZ

变量添加了一些偏移量，并将其在

target

向量中反转。而且整个 pop()、push()、rotateY() 和

torusRotationY

也不是必需的。希望有帮助。

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL)
}

function draw() {
    background(0)
    orbitControl()
    const targetX = mouseX - width / 2
    const targetY = mouseY - height / 2
    const targetZ = 100
    const distance = 400
    const target = createVector(targetX, targetY, -targetZ)
    const cameraPosition = target.copy().normalize().mult(-distance)
    camera(cameraPosition.x, cameraPosition.y, cameraPosition.z)
    normalMaterial()
    torus(80, 45)
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>