|
|
-
- <!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 {
- color: #fff;
- font-family: Monospace;
- font-size: 13px;
- text-align: center;
- font-weight: bold;
-
- background-color: #000;
- margin: 0px;
- overflow: hidden;
- }
-
- #info {
- position: absolute;
- padding: 10px;
- width: 100%;
- text-align: center;
- color: #fff;
- }
-
- a { color: blue; }
-
- </style>
- </head>
- <body>
- <script src="js/three.min.js"></script>
- <script>
-
- //Preparamos el render
- Render=new THREE.WebGLRenderer();
- //Tamaño del render(resultado)
- Render.setSize(300,300);
- //Se agrega el render al documento html
- document.body.appendChild(Render.domElement);
-
- //El escenario
- Escenario=new THREE.Scene();
-
- //La cámara
- Camara=new THREE.PerspectiveCamera();
- //Acercamos la cámara en z es profundidad para ver el punto
- Camara.position.z=50;
- //agregando la cámara al escenario
- Escenario.add(Camara);
-
-
- // 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]];
- 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.ParticleBasicMaterial({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);
-
- // agregamos todo el escenario y la cámara al render
- Render.render(Escenario,Camara);
-
- </script>
-
- </body>
- </html>
|
