|
|
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js webgl - teapot buffer geometry</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <style>
- body {
- margin: 0px;
- overflow: hidden;
- }
- </style>
- <script type="text/javascript" src="Modelos/js/jquery.min.js"></script>
- <script src="countrypoints.js"></script>
- <script src="js/three.min.js"></script>
- <script src="js/controls/OrbitControls.js"></script>
- </head>
- <body>
- </body>
- <script>
-
- /************** Variables *************/
- //Preparamos el render
- var Render=new THREE.WebGLRenderer();
- //El escenario
- var Escenario=new THREE.Scene();
-
- // Figura
- var figura;
- var controls;
- var ancho = innerWidth;
- var alto = innerHeight;
- var angulo = 45;
- var Aspecto = ancho / alto;
- var cerca = 0.1;
- var lejos = 10000;
-
-
- //La cámara
- Camara=new THREE.PerspectiveCamera(angulo, Aspecto, cerca, lejos);
-
- /************** Llamadas a las funciones *************/
- inicio();
- animacion();
-
-
- /************** Inicio *************/
- function inicio(){
-
-
- //Tamaño del render(resultado)
- Render.setSize( ancho, alto );
- //Se agrega el render al documento html
- document.body.appendChild(Render.domElement);
-
-
-
- //Acercamos la cámara en z es profundidad para ver el punto
- Camara.position.z=350;
- //agregando la cámara al escenario
- Escenario.add(Camara);
- //Cargar modelos
- cargar_modelo();
-
-
- // agregamos todo el escenario y la cámara al render
- controls = new THREE.OrbitControls( Camara, Render.domElement );
-
- }
-
- function cargar_modelo(){
- // Geometría
- Geometria=new THREE.Geometry();
-
- // vector a dibujar
-
-
- $.each( country, function( key, value ) {
- var array_extrude = [];
- var ver = value.coord[0];
- for(j=0;j<value.coord.length;j++){
- if(ver.length < value.coord[j].length){
- ver = value.coord[j];
- }
- }
- var vertices = ver;
- var long_vertices = vertices.length;
- for(i=0;i<long_vertices;i++){
- x = vertices[i][0];
- y = vertices[i][1];
- z = i;
-
- //Agregamos vértices al vector
- Vector = new THREE.Vector3(x,y,z);
- //Agregamos el vector a la geometria
- Geometria.vertices.push(Vector);
- array_extrude.push(Vector);
- }
- //Figura
- var forma_figura = new THREE.Shape(array_extrude);
-
- // extrudion;
- var datos_extrucion = {
- amount: 5,
- bevelEnabled: false,
- bevelSegments: 5,
- steps: 5,
- bevelThickness: 1
- }
- var extrude_geometria = new THREE.ExtrudeGeometry(forma_figura, datos_extrucion);
- // la malla
- var malla_extrucion = new THREE.Mesh(extrude_geometria);
- malla_extrucion.rotation.z = (Math.PI/2);
- malla_extrucion.rotation.y = (Math.PI/2)*2;
- Escenario.add(malla_extrucion);
- //}
- /*
- for(j=0;j<value.coord.length;j++){
- var vertices = value.coord[j];
- var long_vertices = vertices.length;
- for(i=0;i<long_vertices;i++){
-
- */
- });
-
-
- /*
- // agregamos un material para que el punto tenga color
- Material = new THREE.PointsMaterial({color:0XFF0000});
-
- // creamos una partícula con la geometría y el material
- Figura = new THREE.Line(Geometria,Material);
-
- // agregamos la partícula al escenario
- Escenario.add(Figura);*/
-
- }
-
-
- function animacion(){
- requestAnimationFrame(animacion);
- render_modelo();
- }
-
- function render_modelo(){
- // Figura.rotation.y += 0.01
- Render.render(Escenario,Camara);
- }
- </script>
- </html>
|
