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
- 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 (Advanced)
Example 2 – Animation (Advanced)
Example 1 – Object3D properties (Advanced)
width:200px;
height:80px;
background-color:#353535;
color:#FFF;
display:flex;
justify-content:center;
align-items:center;
font-size: 36px;
}
Example 2 – Animation (Advanced)
.btnCls{
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 (Advanced)
var btn = document.getElementById(\"moreBtn\");
btn.addEventListener('click', \n function(){
var model = window.objects3D['3514b9e0-7278-4eda-a090-e606fbe7a07c'];
model.object3D.scale.addScalar(0.25);
});
Where “3514b9e0-7278-4eda-a090-e606fbe7a07c” is the Unique ID of the
augmentation holding the 3D model.
Example 2 – Animation (Advanced)
var playing=false;
var btn = document.getElementById('playBtn');
btn.addEventListener('click', function(){
var model = window.objects3D['35868a85-68cc-417c-8dfb-7f1de8755a76'];
if(playing){
model.stop();
playing=false;
btn.innerText='Play';
}
else{
model.play();
playing = true;
btn.innerText='Stop';
}} );
Where “35868a85-68cc-417c-8dfb-7f1de8755a76” is the Unique ID of the augmentation holding the 3D model.