Looking to create an AR game? Step one is to add a joystick that lets the end-user control the movement of the 3D asset.

To let the end-user control your 3D asset with a joystick:

1. Add your model to the 3D Scene.
2. Open Custom Code Editor (press ”{}” icon) and insert the code below:

document.getElementById('geenee-joystick').style.display = 'block' const object = this.object3D; const matrix = this.activeSceneModel.getObjectByName('geenee-3d-matrix-target-group'); let run = false; let joyX, joyY; const joystick2 = this.activeSceneModel.joystick const render = () => { if (started) { joyX = joystick2.value.x; joyY = joystick2.value.y; if (joyX || joyY) { const dist = Math.max(Math.abs(joyX), Math.abs(joyY)); object.translateZ(dist / 2000); object.rotation.y = Math.atan2(joyX, -joyY) - matrix.rotation.y; if (!run) { crossFade('Idle 01', 'Push 01', 0.5); setTimeout(() => { crossFade( 'Push 01', 'Ride 01', 0.5); }, 2000); run = true; } } else { if (run) { crossFade( 'Ride 01', 'Idle 01', 0.5); run = false; } } } }; // Reassign to Geenee Render Loop this.activeSceneModel.userCallbacks.onRender = render; }

boonji2.mp4