Thre.js - это 3D -двигатель, работающий в браузере. Вы можете использовать его для создания различных трехмерных сцен, включая камеры, свет и тень, материалы и другие объекты. Вы можете увидеть много замечательных демонстраций на ее домашней странице. Тем не менее, этот двигатель все еще находится на относительно незрелой стадии разработки. Его недостаточный API и отсутствие документации увеличили сложность обучения для начинающих (особенно отсутствие документации). Код Three.js размещен на GitHub.
http://github.com/mrdoob/three.js/
Давайте посмотрим на пример
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> </head> <script type = "text/javascript" src = "js/thre.js"> </script> <style> div#canvas-frame {js/none; курсор: указатель; Ширина: 100%; Высота: 600px; фоновый цвет: #eeeeeee; } </style> <script> var renderer; function initThree () {width = document.getElementById ('canvas-frame'). ClientWidth; height = document.getelementbyid ('canvas-frame'). ClientHeight; // рендерер определяет результат рендеринга и какой элемент должен быть нарисован на странице и как его нарисовать. renderer = new Three.webglrenderer ({intialias: true}); рендерер. Setize (ширина, высота); // DomeLement представляет холст в рендерере, и все визуализации нарисованы на документе. GetElementById ('Canvas-Frame'). AppendChild (renderer.Domelement); renderer.setClearcolor (0xfffff, 1.0); } // Перспектива камера камера VAR Camera; function initcamera () {camera = new Three.perspectivecamera (45, ширина/высота, 110000); Camera.position.x = 0; Camera.position.y = 1000; Camera.position.z = 0; Camera.up.y = 0; Camera.up.y = 0; Camera.up.z = 1; Camera.lookat ({x: 0, y: 0, z: 0}); } // сцена var scene; function initscene () {scene = new Three.Scene (); } // Light var Light; function initlight () {light = new Three.DirectionAllight (0xff0000, 1.0, 0); Light.position.Set (100, 100, 200); Scene.add (свет); } // Геометрия var cube; function initObject () {// объявленная геометрией, существует параметр вершин, который можно использовать для хранения точки var geometry = new Three.geometry (); // LineBasicmaterial (параметры) // Основной перевод: базовый // перевод материала: сырье // Параметры: это объект, который определяет внешний вид материала. Он содержит несколько атрибутов для определения материала. Эти атрибуты // перевод: параметры // Цвет: цвет линии, представленного в шестнадцатеричной, а цвет по умолчанию белый. // linewidth // linecap: Внешний вид обоих концов линии по умолчанию является округленными конечными точками. Эффект можно увидеть только тогда, когда линия толще. // CAP Перевод: HAT // LINEJOIN: Появление точки соединения между двумя линиями, по умолчанию округлых углов. // Присоединение перевода: добавлена // vertexcolors: определить, использует ли линейный материал элементы вершины, это логическое значение. Это означает, что цвета каждой части линии интерполируются в соответствии с цветом вершины. // Перевод вершины: вершина // FOG: определяет, влияет ли на цвет материала глобальный эффект тумана. // Перевод: FOG VAR MATERAL = NEW THREE.LINEBASICMaterial ({Vertexcolors: true}); // Определите два цвета, которые являются цветами двух конечных точек var color1 = new Three.color (0x44444444), color2 = new Three.color (0xff0000); // Материал линии может быть определен по цвету двух точек var p1 = new Three.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); // Определить линию и три параметра будут переданы здесь // Первая - геометрия геометрия, которая содержит две вершины и цвета вершины // Второй - материал линии // Третий - метод подключения группы точек var line = new Three.line (геометрия, материал, три. LinePieces); // Добавить строки в сцену.add (line); } function threestart () {initThree (); initCamera (); initscene (); initlight (); initObject (); renderer.clear (); renderer.render (сцена, камера); } </script> <body onload = "threestart ()"> <div id = "canvas-frame"> </div> </body> </html>Я надеюсь, что этот пример может помочь вам выучить три.js