Três.js é um motor 3D em execução no navegador. Você pode usá-lo para criar várias cenas tridimensionais, incluindo câmeras, luz e sombra, materiais e outros objetos. Você pode ver muitas demonstrações maravilhosas em sua página inicial. No entanto, este motor ainda está em um estágio de desenvolvimento relativamente imaturo. Sua API insuficiente e falta de documentação aumentaram a dificuldade de aprender para iniciantes (especialmente a falta de documentação). O código três.js está hospedado no Github.
http://github.com/mrdoob/three.js/
Vejamos o exemplo
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> </head> <script type = "text/javascript" src = "js/three.js"> </script> <estilo> Cursor: Ponteiro; largura: 100%; Altura: 600px; Background-Color: #eeeeee; } </style> <cript> var renderizador; function initthree () {width = document.getElementById ('Canvas-frame'). ClientWidth; altura = document.getElementById ('Canvas-frame'). ClientHeight; // O renderizador determina o resultado da renderização e qual elemento deve ser desenhado na página e como desenhá -lo. renderizador = new Three.Webglrenderer ({Antialias: true}); renderizador.SetSize (largura, altura); // domelement representa a tela no renderizador, e todas as representações são desenhadas no documento.getElementById ('Canvas-frame'). ApndendChild (renderer.omelement); renderer.setClearColor (0xfffff, 1.0); } // câmera de câmera de perspectiva da câmera var; function initcamera () {camera = new Three.perspectiveCamera (45, largura/altura, 1.10000); câmera.Position.x = 0; câmera.Position.Y = 1000; câmera.Position.Z = 0; câmera.up.y = 0; câmera.up.y = 0; câmera.up.z = 1; câmera.lookat ({x: 0, y: 0, z: 0}); } // cena var cena; função initscene () {cenário = new Three.scene (); } // luz var luz; function initlight () {Light = new Three.directionAllight (0xff0000, 1.0, 0); Light.Position.set (100, 100, 200); cenário.Add (luz); } // geometria var cubo; function initObject () {// Geometria declarada, existe um parâmetro de vértices que pode ser usado para armazenar o ponto var geometria = new Three.geometry (); // LineBasicMaterial (parâmetros) // Tradução básica: BASIC // Tradução do material: Matérias -primas // Parâmetros: é um objeto que define a aparência de um material. Ele contém vários atributos para definir o material. Esses atributos são // tradução: parâmetros // cor: a cor da linha, representada em hexadecimal, e a cor padrão é branca. // Linha de linha // LineCap: A aparência de ambas as extremidades da linha é arredondada para os pontos finais por padrão. O efeito só pode ser visto quando a linha é mais espessa. // Tradução do CAP: HAT // Linejoin: A aparência do ponto de conexão entre duas linhas, cantos arredondados por padrão. // Juntar tradução: Adicionado // VertexColors: Defina se o material da linha usa elementos de vértice, esse é um valor booleano. Isso significa que as cores de cada parte da linha são interpoladas de acordo com a cor do vértice. // Tradução do vértice: vértice // nevoeiro: define se a cor do material é afetada pelo efeito de nevoeiro global. // Tradução: FOG var material = new Three.LineBasicMaterial ({vertexColors: true}); // Defina as duas cores que são as cores dos dois pontos de extremidade var color1 = new Three.color (0x4444444), color2 = new Three.color (0xff0000); // O material da linha pode ser determinado pela cor dos dois pontos var p1 = new Three.Vector3 (); var p2 = novo três.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 a linha e três parâmetros serão passados aqui // O primeiro é a geometria da geometria, que contém dois vértices e cores de vértice // o segundo é o material da linha // o terceiro é o método de conexão de um grupo de pontos var linha // Adicione linhas à cena.add (linha); } function threestart () {initthree (); initcamera (); initscene (); initLight (); initObject (); renderer.clear (); renderizador.render (cena, câmera); } </script> <corpo onload = "threestart ()"> <div id = "canvas-frame"> </div> </body> </html>Espero que este exemplo possa ajudá -lo a aprender três.js