Interact with 3D Objects

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
<div class='btnCls' id='moreBtn'>Grow</div>
 

 
Example 2 – Animation
<div class='btnCls' id='3DplayBtn'>Animate</div>
Example 1 + Example 2 (same code)
.btnCls{
border-radius:10px;
width:200px;
height:80px;
background-color:#353535;
color:#FFF;
display:flex;
justify-content:center;
align-items:center;
font-size: 36px;
}

 

vvar btn = document.getElementById("moreBtn");
btn.addEventListener('click', function(){
var model = window.objects3D['292a3be7-930a-4a15-9fbf-67a6919dd2fb'];
model.object3D.scale.addScalar(0.01);
});


 

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';
}} );

Close Menu
Close Panel