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

 
Example 2 – Animation (Advanced)
<div class='btnCls' id='playBtn'>Grow</div>"
Example 1 – Object3D properties (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 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;

}

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.


 

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.

Close Menu
Close Panel