Making Correct point of Polyhedra shape face towards another mesh

Questions
,
1

I’ve a question regarding the making a PolyHedra shapes certain edge always point towards another mesh.

I sort of got this to work as below:

private createKickingDiamond() {
  // Create the diamond shape for the kicking ring
  this.kickingDiamond = MeshBuilder.CreatePolyhedron("kickingDiamond", { type: 1, size: 0.5 }, this.scene);
  this.kickingDiamond.visibility = 0.8;
  this.kickingDiamond.position = new Vector3(2.20, -1.5, 2.85); // Adjust these values as needed

  // Create a gradient material
  const gradientMaterial = new GradientMaterial("grad", this.scene);
  gradientMaterial.topColor = Color3.Red(); // Set the gradient top color
  gradientMaterial.bottomColor = Color3.Blue(); // Set the gradient bottom color
  gradientMaterial.offset = 0.25;

  // Apply the gradient material to the diamond
  this.kickingDiamond.material = gradientMaterial;

  // Parent the diamond to the visual mesh so it follows the player's orientation
  this.kickingDiamond.parent = this.mesh;
}

private rotateKickingDiamondToBall() {
  if (!this.soccerBall) {
      console.error("SoccerBall is not initialized");
      return;
  }

  const ballPosition = this.soccerBall.getPosition();
  const diamondPosition = this.kickingDiamond.getAbsolutePosition();

  const direction = ballPosition.subtract(diamondPosition).normalize();

  // Calculate yaw (rotation around Y axis)
  const yaw = Math.atan2(-direction.z, direction.x);

  // Calculate pitch (rotation around X axis)
  const pitch = Math.atan2(direction.y, Math.sqrt(direction.x * direction.x + direction.z * direction.z));

  // Apply rotations
  this.kickingDiamond.rotation.y = yaw;
  this.kickingDiamond.rotation.x = pitch;
}

It sort of works but I’d like the red top part of the polyhedra to point towards the mesh. I tried setting the initial rotation .x, .y, .z values to everything like this:

  // Initial orientation adjustment
  //this.kickingDiamond.rotation.x = Math.PI / 2; // Rotate 90 degrees around the X-axis to lay it flat
  //this.kickingDiamond.rotation.z = Math.PI / 2; // Rotate 180 degrees around the Z-axis to face the correct initial direction
  //this.kickingDiamond.rotation.y = Math.PI / 2; // Rotate 180 degrees around the Z-axis to face the correct initial direction

I tried playing around with all of the values, and never got the desired effect. Is there some easier method to achieve this?

2

You could use the lookAt method, or you could rotate it prior and bake the transforms into the mesh so you dont need rotation offset.

3

Thanks, I’ll try and let you know if it works! Eventually I’ll figure it out :smiley:

4
2 Likes
5

I didn’t get a chance to get back to you last week, and i was away for the weekend!

This solved my issues perfectly, thank you so much for making the playground! :slight_smile:

1 Like