hi, guys i am desperately come here to find the same answer the @telarium asked.
it is really important to me do this task have been stuck since many weeks.
what i want to do:
I am creating a replay scene basically it is cricket VR game I want to create a replay web platform for user to watch and share their cricket experience to others. I choose playcanvas because it is easy and multiple platform handling.
how i do that:
i have created a rest api server which fetch the unreal engine coordinates. the data which is json format for “Helmet”, “Bat”, “ball” entities with their “rotation” and “location” with the help of entities value, we will lerp means animate. next the data will be fetch in playcanvas.
status of project:
the project look amazing i am getting the values the x, y and z axis converting it then animating it. its complete 80%.
So what the issue Men?
the issue is with “rotation” only and the main rotation problem is with “cricket bet”. you will better get when you watch the video i have played the 3 shots you can compare the result.
here is video
please guy help me solve the problem it would be great pleasure
here is my code
var Replay = pc.createScript(‘replay’);
Replay.attributes.add(‘tweenRotationScript’, { type: ‘entity’ });
Replay.attributes.add(‘duration’, { type: ‘number’, default: 0.05 }); // Set duration to 5 seconds
Replay.attributes.add(‘decreaseAreaBy’, { type: ‘number’, default: 0.01 }); // Set duration to 5 seconds
Replay.attributes.add(‘locationProperty’, { type: ‘string’ }); // Set duration to 5 seconds
Replay.attributes.add(‘rotation’, { type: ‘boolean’, default: false }); // Set duration to 5 seconds
Replay.attributes.add(‘rotationProperty’, { type: ‘string’ }); // Set duration to 5 seconds
Replay.attributes.add(‘loop’, { type: ‘boolean’, default: false, description: ‘Enable looping’ });
Replay.prototype.initialize = function () {
this.fetchData();
};
let replayNewId = 20;
// Replace with the ID of the replay you want to retrieve
Replay.prototype.fetchData = function () {
// Make a GET request to your server’s API endpoint
fetch(https://finalovers.cricket/api/users/getOneReplay/${replayNewId}
)
.then(response => response.json())
.then(data => {
console.log(‘Received data:’, data);
const ballLocations = JSON.parse(data.ballLocations);
const batLocations = JSON.parse(data.batLocations);
const batRotations = JSON.parse(data.batRotations);
const helmetLocations = JSON.parse(data.helmetLocations);
const helmetRotations = JSON.parse(data.helmetRotations);
this.ballLocations = ballLocations;
this.batLocations = batLocations;
this.batRotations = batRotations;
this.helmetLocations = helmetLocations;
this.helmetRotations = helmetRotations;
if (
ballLocations.length > 0 &&
batLocations.length > 0 &&
batRotations.length > 0 &&
helmetLocations.length > 0 &&
helmetRotations.length > 0
) {
this.currentIndex = 0;
this.moveObject();
}
})
.catch(error => console.error('Error fetching data:', error));
};
Replay.prototype.moveObject = function () {
// if we are already tweening then stop first
if (this.tween) {
this.tween.stop();
}
// reset our rotation
this.entity.setEulerAngles(0, 0, 0);
var entity = this.entity;
var targetPosition = new pc.Vec3(
this[this.locationProperty][this.currentIndex].x * this.decreaseAreaBy,
this[this.locationProperty][this.currentIndex].z * this.decreaseAreaBy,
this[this.locationProperty][this.currentIndex].y * this.decreaseAreaBy
);
if (this.rotation) {
var rotationData = this[this.rotationProperty][this.currentIndex];
var targetRotation = new pc.Quat().setFromEulerAngles((rotationData.x), (rotationData.z * -1), (rotationData.y * -1));
entity.setLocalRotation(targetRotation);
}
var tween = this.entity.tween(this.entity.getLocalPosition())
.to(targetPosition, this.duration, pc["Linear"])
.on("complete", this.nextLocation.bind(this))
.start();
};
Replay.prototype.nextLocation = function () {
this.currentIndex++;
if (this.currentIndex < this[this.locationProperty].length) {
console.log(this.currentIndex, this[this.locationProperty].length)
this.moveObject();
} else {
console.log("completed");
if (this.loop) {
this.currentIndex = 0;
this.moveObject();
}
}
};