text: //declarar las variables de nuestra app. 
  var scene, camera, renderer, clock, deltaTime, totalTime;
  
  var arToolkitSource, arToolkitContext;
  
  
  var markerRoot1;
  
  var RhinoMesh ;
  
  init(); // llamado de la funcion principal que se encarga de hacer casi  todo en la app
  animate();
  
  function init() {
      ////////////////////////////////////////////////////////
      //THREE Setup
      ///////////////////////////////////////////////////////
      // crear nuestra escena -  OBJETO.
      scene = new THREE.Scene(); //  crea un objeto escena.
  
      //////////////////////////////////////////////////////
      //LUCES
      //////////////////////////////////////////////////////
  
      let light = new THREE.PointLight(0xffffff, 1, 100); //creo nueva luz 
      light.position.set(0, 4, 4); //indico la posicion de la luz 
      light.castShadow = true; //activo la capacidad de generar sombras.
      scene.add(light); //agrego la luz a mi escena 
  
      let lightSphere = new THREE.Mesh(
          new THREE.SphereGeometry(0.1),
          new THREE.MeshBasicMaterial({
              color: 0xffffff,
              transparent: true,
              opacity: 0.8
          })
      );
  
      lightSphere.position.copy(light);
      scene.add(lightSphere);
  
      //creamos luces 
      let ambientLight = new THREE.AmbientLight(0xcccccc); //creo las luz
      scene.add(ambientLight); //agrego la luz a mi escena. 
  
      camera = new THREE.Camera(); //creo objeto camara 
      scene.add(camera); // agrego camara a la escena
  
      //permite mostrar las cosas en 3d en la pantalla
      renderer = new THREE.WebGLRenderer({
          antialias: true,
          alpha: true
      });
  
      renderer.setClearColor(new THREE.Color('lightgrey'), 0);
      renderer.setSize(640, 480);
      renderer.domElement.style.position = 'absolute';
      renderer.domElement.style.top = '0px';
      renderer.domElement.style.left = '0px';
  
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  
      document.body.appendChild(renderer.domElement); // agregarlo a nuestra pagina web
  
  
      //tiempo
      clock = new THREE.Clock();
      deltaTime = 0;
      totalTime = 0;
  
      ////////////////////////////////////////////////////////
      //AR Setup
      ///////////////////////////////////////////////////////
  
      arToolkitSource = new THREEx.ArToolkitSource({
          sourceType: 'webcam',
      });
  
      function onResize() {
          arToolkitSource.onResize()
          arToolkitSource.copySizeTo(renderer.domElement)
          if (arToolkitContext.arController !== null) {
              arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
          }
      }
  
  
      arToolkitSource.init(function onReady() {
          onResize();
      });
  
      //agregamos un event listener
      window.addEventListener('resize', function () { onResize() });
  
      //Setup ArKitContext
      arToolkitContext = new THREEx.ArToolkitContext({
          cameraParametersUrl: 'data/camera_para.dat',
          detectionMode: 'mono'
      });
  
      arToolkitContext.init(function onCompleted() {
          camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
      });
  
      /////////////////////////////////////////////////
      //Marker setup
      /////////////////////////////////////////////////
  
      markerRoot1 = new THREE.Group(); //creamos un grupo de objetos
      scene.add(markerRoot1); // agregamos el grupo a la escena. 
  
      //Creamos nuestro marcador 
      let markerControl = new THREEx.ArMarkerControls(arToolkitContext, markerRoot1, {
  
          type: 'pattern', patternUrl: 'data/tec.patt',
      });
  
      /////////////////////////////////////////////////
      //GEOMETRY
      /////////////////////////////////////////////////
  
      //Creo una geometria cubo
      let geo1 = new THREE.CubeGeometry(.75, .75, .75); // crear la plantilla
      //creo material 
      let material1 = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }); //creamos el material 
  
      //Creo una geometria 
      let geo2 = new THREE.CubeGeometry(.75, .75, .75); // crear la plantilla
      //creo material 
      let material2 = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }); //creamos el material
  
  
  
      ////////////////////PISO////////////////
      let floorGeometry = new THREE.PlaneGeometry(20, 20);
      let floorMaterial = new THREE.ShadowMaterial();
      floorMaterial.opacity = 0.25;
  
      let floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
  
      floorMesh.rotation.x = -Math.PI / 2;
      floorMesh.receiveShadow = true;
      markerRoot1.add(floorMesh);
  
  
      /////// OBJ IMPORT/////////////////////
      function onProgress(xhr) { console.log((xhr.loaded / xhr.total * 100) + "% loaded"); }
      function onError(xhr) { console.log("ha ocurrido un error") };
  
      //////OBJETO RHINO 1///////////////
      new THREE.MTLLoader()
          .setPath('data/models/')
          .load('aura.mtl', function (materials) {
              materials.preload();
              new THREE.OBJLoader()
                  .setMaterials(materials)
                  .setPath('data/models/')
                  .load('aura.obj', function (group) {
                      RhinoMesh = group.children[0];
                      RhinoMesh.material.side = THREE.DoubleSide;
                      RhinoMesh.scale.set(0.25, 0.25, 0.25);
                      RhinoMesh.castShadow = true;
                      RhinoMesh.receiveShadow = true;
  
                      markerRoot1.add(RhinoMesh);
                  }, onProgress, onError);
          });
  
  
  }
  
  function update() {
      //actualiza contenido de nuestra app AR
      if (arToolkitSource.ready !== false) {
          arToolkitContext.update(arToolkitSource.domElement);
      }
  }
  
  function render() {
      renderer.render(scene, camera);
  }
  
  function animate() {
      requestAnimationFrame(animate);
      deltaTime = clock.getDelta();
      totalTime += deltaTime; // totalTime =  totalTime + deltaTime 
      update();
      render();
  }