Camera Animation using different ref starting point than initial camera?

Questions
1

I had…
Some fun:

However

async function LoadCameraAnimation(camera) {
  let camid;
  if (new URLSearchParams(window.location.search).has('camera')) {
    camid = new URLSearchParams(window.location.search).get('camera');
  } else if (new URLSearchParams(window.location.search).has('vmd')) {
    camid = new URLSearchParams(window.location.search).get('vmd');
  } else {
    camid = localStorage.getItem('camid');
    if (!camid) {
      camid = 'bts-bestofme';
    }
  }
  const cameraVmdPath = "./camera/" + camid + ".vmd";
  try {
    const vmdClip = await new Promise((resolve, reject) => {
      loader.loadAnimation(cameraVmdPath, camera, (vmdClip) => {
        vmdClip.name = camid; // Set the name to the loaded camid
        resolve(vmdClip);
      }, onProgress, reject);
    });
    return vmdClip;
  } catch (error) {
    console.error('Error loading camera animation:', error);
    throw error; // Re-throw the error to propagate it
  }
}

being my camera code seemingly uses a different way of starting point ( I suspect 0,0,0)
than the actual animated camera uses:

et positionXYZ = localStorage.getItem('xyz');
let xyzArray = [];
if (positionXYZ) {
  xyzArray = positionXYZ.split(',').map(parseFloat);
}
let x, y, z;
if (xyzArray.length === 3 && xyzArray.every(coord => !isNaN(coord))) {
  // Use xyzArray values plus (15, 15, 0) offset
  [x, y, z] = xyzArray.map((coord, index) => coord + (index === 0 ? 15 : 15)); // Add 15 to x and y
} else {
  x = 0;y = 19;z = 20;}
camera.position.set(x, y, z);

I was able to change the camera to set to the new position dynamically on startup (and thought this would suffice to have the camera animation follow suit… but alas)

(see how it follows the two when I use “stageload.html” and reload.

Any ideas how I can “convince” the vmd animation to pls pls pls use the new reference point ?
(I suspect it uses 0,0,0, ?)

Full main.js: SampleWebMMD/js/main.js at 17278c790c6808903e5040c878df3b8113130bf0 · Ry3yr/SampleWebMMD · GitHub
Full index.html: SampleWebMMD/index.html at 17278c790c6808903e5040c878df3b8113130bf0 · Ry3yr/SampleWebMMD · GitHub

TL;DR:
I made it possible to reposition my mesh&mesh2 in scene, the init.camera following suite,
but the camera animation(s) seem no not care and just stay at (0,0,0)

  • Alcea
2

I solved it in a -roundabout - way.
As no matter what I did, the animated camera simply shrugged:

I moved the entire stage in an inverted way towards the coordinates instead.

Result:

Code:


let positionXYZ = localStorage.getItem('xyz') || "0, 0, 0";
let xyzArray = [];
if (positionXYZ) {xyzArray = positionXYZ.split(',').map(parseFloat);}
let x, y, z;
if (xyzArray.length === 3 && xyzArray.every(coord => !isNaN(coord))) {[x, y, z] = xyzArray.map((coord, index) => coord + (index === 0 ? -0 : -0));}
x = -x; //flip x because we move over 0coordinate
//y = 0;  //y must always be 0 so we do not fall under the stage
z= -z; //flip x because we move over 0coordinate
stageObject.position.set(x, y, z);

    const mixer = new THREE.AnimationMixer(stageObject);
    loader.loadAnimation(vmd1Path, stageObject, (vmd1Clip) => {
      vmd1Clip.name = "001";
      console.log(`Loaded VMD: ${vmd1Path}`);
      const motionObject1 = MotionObjects.find(obj => obj.id === "001");
      if (motionObject1) {
        motionObject1.VmdClip = vmd1Clip;
        const action1 = mixer.clipAction(vmd1Clip);
        action1.play();
      } else {
        console.warn(`Motion object with id "001" not found.`);
      }
    }, onProgress, onError);
    loader.loadAnimation(vmd2Path, stageObject, (vmd2Clip) => {
      vmd2Clip.name = "002";
      console.log(`Loaded VMD: ${vmd2Path}`);
      const motionObject2 = MotionObjects.find(obj => obj.id === "002");
      if (motionObject2) {
        motionObject2.VmdClip = vmd2Clip;
        const action2 = mixer.clipAction(vmd2Clip);
        action2.play();
      } else {
        console.warn(`Motion object with id "002" not found.`);
      }
    }, onProgress, onError);
    const clock = new THREE.Clock();
    const animate = () => {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();
      mixer.update(delta);
      renderer.render(scene, camera);
    };
    animate();
  }, onProgress, onError);
} else {console.warn('No valid stage path found.');}
//if (!Stage) {Stage = stage ? `stages${stage}` : '/sorclair/sorclair.pmx';}
if (!Pmx) {Pmx = `./pmx/pronama/AoiZaizen/AoiZaizen.pmx`;}
console.log('StagePath:', StagePath);
const MotionObjects = [
  { id: "001", pose: "001", VmdClip: null, AudioClip: false },
  { id: "002", pose: "002", VmdClip: null, AudioClip: false },
];
window.onload = () => {
  Init();
  LoadStage().then(() => {
    LoadModels().then(() => {
    });
  });
};

PS:
Loading lips facias sometimes produces weird errors…

PPS:
Obviously one needs to remove any repositioning of the models when you move the stage.
For obvious reason