Three.js es un motor 3D que se ejecuta en el navegador. Puede usarlo para crear varias escenas tridimensionales, incluidas cámaras, luz y sombra, materiales y otros objetos. Puedes ver muchas demostraciones maravillosas en su página de inicio. Sin embargo, este motor todavía está en una etapa de desarrollo relativamente inmaduro. Su API insuficiente y su falta de documentación han aumentado la dificultad de aprender para los principiantes (especialmente la falta de documentación). El código tres.js está alojado en GitHub.
http://github.com/mrdoob/three.js/
Veamos el ejemplo
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> </head> <script type = "text/javascript" src = "js/three.js"> </script> <style> div#canvas-frame {border: no; cursor: puntero; Ancho: 100%; Altura: 600px; Color de fondo: #EEEEEE; } </style> <script> var renderer; function initTheRe () {width = document.getElementById ('Canvas-Frame'). ClientWidth; altura = document.getElementById ('Canvas-Frame'). ClientHeight; // El renderizador determina el resultado de renderizado y qué elemento se debe dibujar en la página y cómo dibujarlo. renderer = new Three.webglrenderer ({antialias: true}); renderer.setsize (ancho, altura); // Domelement representa el lienzo en el renderizador, y todas las representaciones se dibujan en el documento.getElementById ('Canvas-frame'). AppendChild (renderer.domElement); renderer.setClearColor (0xffffff, 1.0); } // Camera Camera VAR Camera VAR; function initCamera () {cámaras = new Three.Perspectivecamera (45, ancho/altura, 1,10000); cámara.position.x = 0; cámara.position.y = 1000; Camera.Position.z = 0; cámara.up.y = 0; cámara.up.y = 0; cámara.up.z = 1; Camera.lookat ({x: 0, y: 0, z: 0}); } // escena var escena; function initsCene () {escena = new tres.scene (); } // luz var de luz; función initlight () {light = new Three.DirectionAllight (0xff0000, 1.0, 0); light.position.set (100, 100, 200); escena.add (luz); } // geometry var cube; function initObject () {// Geometría declarada, hay un parámetro de vértices que se puede usar para almacenar el punto var geometry = new tres.geometry (); // LinebasicMaterial (parámetros) // Traducción básica: Básico // Traducción de material: Materias primas // Parámetros: es un objeto que define la apariencia de un material. Contiene múltiples atributos para definir el material. Estos atributos son // traducción: parámetros // color: el color de la línea, representado en hexadecimal, y el color predeterminado es blanco. // LineWidth // Linecap: la aparición de ambos extremos de la línea es puntos finales redondeados de forma predeterminada. El efecto solo se puede ver cuando la línea es más gruesa. // Traducción de la tapa: hat // linejoin: la apariencia del punto de conexión entre dos líneas, esquinas redondeadas de forma predeterminada. // Traducción de unión: agregado // Vertexcolors: Defina si el material de línea usa elementos de vértice, este es un valor booleano. Significa que los colores de cada parte de la línea se interpolan según el color del vértice. // Traducción del vértice: Vertex // Fog: define si el color del material se ve afectado por el efecto global de niebla. // traducción: fog var material = new Three.lineBasicMaterial ({VertexColors: true}); // Defina los dos colores que son los colores de los dos puntos finales var color1 = nuevo tres.color (0x4444444), color2 = nuevo tres.color (0xff0000); // El material de la línea puede determinarse por el color de los dos puntos var p1 = new tres.vector3 (); var p2 = new Three.vector3 (); P1.set (-100,0,100); p2.set (100,0, -100); geometry.vertices.push (P1); geometry.vertices.push (P2); geometry.colors.push (color1, color2); // Definir la línea y se pasarán tres parámetros aquí // El primero es la geometría de geometría, que contiene dos vértices y colores de vértice // El segundo es el material de la línea // El tercero es el método de conexión de un grupo de puntos var línea = nueva tres.line (geometría, material, tres.linepieces); // Agregar líneas a la escena.add (línea); } function ThreeStart () {initTheRe (); initCamera (); initscene (); initlight (); initObject (); renderer.clear (); renderer.render (escena, cámara); } </script> <body onload = "ThreeStart ()"> <div id = "Canvas-Frame"> </div> </body> </html>Espero que este ejemplo pueda ayudarlo a aprender tres.js