Similar to how you interact with YouTube videos there is a global variable on the window object called objects3D that contains a dictionary of the form:
- Key: Unique ID of the augmentation (in the example below this unique ID = “3514b9e0-7278-4eda-a090-e606fbe7a07b”
- Value: a ThreeAu reference
The ThreeAu class contains a property called object3D that returns the THREE.Object3D instance that contains the model.
Additionally it contains play() and stop() methods to start and stop the animation.
This gives the user direct access to all the properties of the Object3D object from Three.js
Example 1 – Object3D properties
Example 2 – Animation
Example 1 + Example 2 (same code)
border-radius:10px;
width:200px;
height:80px;
background-color:#353535;
color:#FFF;
display:flex;
justify-content:center;
align-items:center;
font-size: 36px;
}
Example 1 – Object3D properties
vvar btn = document.getElementById("moreBtn");
btn.addEventListener('click', function(){
var model = window.objects3D['292a3be7-930a-4a15-9fbf-67a6919dd2fb'];
model.object3D.scale.addScalar(0.01);
});
Example 2 – Animation
vvar playing=false;
var btn = document.getElementById('3DplayBtn');
btn.addEventListener('click', function(){
var model = window.objects3D['292a3be7-930a-4a15-9fbf-67a6919dd2fc'];
if(playing){
model.stop();
playing=false;
btn.innerText='Play';
}
else{
model.play();
playing = true;
btn.innerText='Stop';
}} );