|
|
-
- <!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 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=150;
- //agregando la cámara al escenario
- Escenario.add(Camara);
- //Terrirorio
- crear_plano();
- //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
- vertices = [
- [2,7,0], [7,2,0],[12, 7, 0], [12, 17, 0], [7, 12, 0], [2, 17, 0], [2,7,0],
- [2,7,2], [7,2,2],[12, 7, 2], [12, 17, 2], [7, 12, 2], [2, 17, 2], [2,7,2],
- ];
-
- long_vertices = vertices.length;
- for(i=0;i<long_vertices;i++){
- x = vertices[i][0];
- y = vertices[i][1];
- z = vertices[i][2];
-
- //Agregamos vértices al vector
- Vector = new THREE.Vector3(x,y,z);
- //Agregamos el vector a la geometria
- Geometria.vertices.push(Vector);
- }
-
- // 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 crear_plano(){
- //Geometria del plano
- geometria_plano= new THREE.PlaneGeometry(1000, 1000, 10, 10);
- // Textura
- textura_plano = new THREE.ImageUtils.loadTexture("texturas/cesped.jpg");
- textura_plano.wrapS = textura_plano.wrapT = THREE.RepeatWrapping;
- textura_plano.repeat.set(10,10);
-
- //Material
- material_plano = new THREE.MeshBasicMaterial({map: textura_plano, side: THREE.DoubleSide})
-
- // El plano (territorio)
- territorio = new THREE.Mesh(geometria_plano, material_plano);;
- territorio.rotation.y = -0.5;
- territorio.rotation.x = Math.PI/2;
- Escenario.add(territorio);
- }
-
- function animacion(){
- requestAnimationFrame(animacion);
- render_modelo();
- }
-
- function render_modelo(){
- Figura.rotation.y += 0.01
- Render.render(Escenario,Camara);
- }
- </script>
- </html>
|
