TypeError: this.position.addToRef is not a function

Bugs
1

image
I try to upload a JSON file, then use the key inside to play camera position animation.

const createScene = function () {
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(0.5, 0.5, 1);

	const camera = new BABYLON.FreeCamera('main-camera', new BABYLON.Vector3(0, 10, -80), scene)
  
	camera.attachControl(canvas, true);

	var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

	BABYLON.SceneLoader.ImportMesh(null,'demo/scene4_7CameraBaked.glb' ,'',scene, (m)=>{
		// console.log(m[0])
		// m[0].scaling.scale(20);
		var mainMesh = scene.getNodeByName("__root__")
      	mainMesh.scaling = mainMesh.scaling.scale(20)
		// storeDivingAnimation(camera)
		loadDivingAnimation()
	  })
	
    window.camera = camera;
    return scene;
  };

async function loadDivingAnimation(){
	const frameRate = 30
	var divingPosAnimation = new BABYLON.Animation("", "position", frameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
	
	const divngPosKey = await fetch("demo/divngPosKey.json")
	.then(response => response.json())
	divingPosAnimation.setKeys(divngPosKey)

	let divingAnimationGroupCreated = new BABYLON.AnimationGroup("divingAnimationGroupCreated");
	divingAnimationGroupCreated.addTargetedAnimation(divingPosAnimation, camera);
	divingAnimationGroupCreated.play(false)
}
2

this is camera-related. the camera’s position is apparently not set correctly.
Make sure the second variable to the camera is a vector3 (seems to be from your code), and try reproducing this on the playground if you want us to help debugging this.

1 Like
3

When I set play(true), no error; but it will freeze in the last frame.

divingAnimationGroupCreated.play(true)

I find all variable is with “_x”,"_y"; Is this possible the issue?
image

4

I have no idea how your keys-JSON looks like, so it is very hard to say, but if you are serializing vectors from the server, then yes - this might be the issue. The value in the case should be a new vector. not a serialized JSON. you will probably need your keys re-organized (and recreated using javascript and not only a JSON file)

1 Like
5

After I create a vector3, it is fixed!

const frameRate = 30
	var divingPosAnimation = new BABYLON.Animation("", "position", frameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
	var divngPosKey = await (fetch("src/animation/divingPosKey.json")
	.then(response => response.json()))
	for (let i=0;i<divngPosKey.length;i++){
		var currentKey = divngPosKey[i].value
		divngPosKey[i].value = new BABYLON.Vector3(currentKey._x,currentKey._y,currentKey._z)
	}
	divingPosAnimation.setKeys(divngPosKey)
6 
var divingPosAnimation = new BABYLON.Animation("", "position", frameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

In order for animation to loop, setting BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE