{"id":237,"date":"2018-05-29T18:00:52","date_gmt":"2018-05-29T23:00:52","guid":{"rendered":"http:\/\/www.chroniclesoftright.com\/blog\/?p=237"},"modified":"2018-05-29T11:54:14","modified_gmt":"2018-05-29T16:54:14","slug":"animations-workaround-fix","status":"publish","type":"post","link":"https:\/\/www.chroniclesoftright.com\/blog\/2018\/05\/29\/animations-workaround-fix\/","title":{"rendered":"Animations workaround\/fix"},"content":{"rendered":"

On the THREE.js<\/a> Discourse<\/a> forum one of the suggestions I saw concerning my animations going wacky at large distances from the origin was to just put the SkinnedMesh<\/a> at the origin, then move the world around it instead of moving the SkinnedMesh through the world.\u00a0 The end result should be the same.\u00a0 This seemed like a reasonable suggestion (although it doesn’t really address the underlying issue) but implementation seemed like it would be a real pain.\u00a0 Well, circumstances sort of forced me to give this a shot and after some fiddling I figured out I could accomplish this with 4 lines.\u00a0 These two go at the beginning of my update loop:<\/p>\n

scene.position.set(0, 0, 0);
\nscene.updateMatrixWorld(true);<\/p>\n

This puts the scene itself at the origin, then tells THREE.js to update the transform matrices of the scene and all its children.\u00a0 At least, I think that’s what it does.\u00a0 Then at the end of the update loop:<\/p>\n

scene.position.copy(player.position.clone().negate());
\ncamera.position.sub(player.position);<\/p>\n

This moves the scene away from the origin in the opposite direction the amount the player is away from the origin, so it puts the player at (0, 0, 0).\u00a0 It then moves the camera so that it is looking at the player’s new position at the origin.<\/p>\n

That’s it.\u00a0 It’s that simple.\u00a0 Now my animations play smoothly and I didn’t really have to change much.\u00a0 The center of the world is still at (130560, 0, 130560) and the player and enemies can move around all in that space, but when it gets rendered the system sees everything as being centered around (0, 0, 0).<\/p>\n

I’m still looking forward to a fix in THREE.js r94, but if this works I may keep it this way even after the fix.\u00a0 Eh, we’ll see.<\/p>\n","protected":false},"excerpt":{"rendered":"

On the THREE.js Discourse forum one of the suggestions I saw concerning my animations going wacky at large distances from the origin was to just put the SkinnedMesh at the origin, then move the world around it instead of moving the SkinnedMesh through the world.\u00a0 The end result should be the same.\u00a0 This seemed like…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-237","post","type-post","status-publish","format-standard","hentry","category-planning-and-development"],"_links":{"self":[{"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/posts\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/comments?post=237"}],"version-history":[{"count":2,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":239,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/posts\/237\/revisions\/239"}],"wp:attachment":[{"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/media?parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/categories?post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chroniclesoftright.com\/blog\/wp-json\/wp\/v2\/tags?post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}