Примеры с Three.js | Three.js

Обильно комментируемая, но простая сцена. Иллюстрирует настройку сцены, камеры, средства рендеринга, обработчиков событий (для изменения размера окна и полноэкранного режима, предоставляемых библиотекой THREEx), элементов управления мышью для вращения/масштабирования/панорамирования сцены, мини-дисплея для статистики FPS и настройки базовой геометрии: сферы со световыми эффектами, разноцветного куба, плоскости с примененной текстурой изображения и параметров скайбокса/тумана для рендеринга объектов, удаленных от камеры. Многие из этих функций более подробно описаны в примерах ниже.

A heavily commented but basic scene. Illustrates the setup of a scene, camera, renderer, event handlers (for window resize and fullscreen, provided by the THREEx library), mouse controls to rotate/zoom/pan the scene, mini-display for FPS stats, and setting up basic geometries: a sphere with lighting effects, a multi-colored cube, a plane with an image texture applied, and skybox/fog options for rendering objects distant from the camera. Many of these features are described in more detail in the examples below.

Шаблон | Template

Код демо-версии (Здравствуй Мир | Hello World) с удаленными большинством комментариев и мешей.

The "Hello World" code with most comments and meshes removed.

Информационное окно | Info Box

Код шаблона с минимальным добавлением jQuery для создания кнопки, отображающей информационное диалоговое окно.

The template code with minimal jQuery added to create a button that displays an information dialog box.

Материалы - сплошные | Materials - Solid

Иллюстрирует различие между материалами: Базовым, Ламбертовским и Фонга.

Illustrates the difference between the Basic, Lambert, and Phong materials.

Исследователь цвета | Color Explorer

Иллюстрирует эффекты изменения цвета (диффузного цвета), окружающего цвета, излучающего цвета, зеркального цвета, степени блеска и степени непрозрачности.

Illustrates the effects of changing the Color (Diffuse Color), Ambient Color, Emissive Color, Specular Color, Shininess amount, and Opacity amount.

Каркас | Wireframe

Демонстрирует, как создавать и применять материалы для каркасных моделей.

Demonstrates how to create and apply wireframe materials.

Линии и пунктирные линии | Lines and Dashed Lines

Демонстрирует создание сплошных и пунктирных линий, а также содержит функцию для преобразования геометрических объектов в объекты линейного типа.

Demonstrates how to create solid lines, dashed lines, and contains a function to convert geometries into line-style objects.

Вспомогательные элементы | Helpers

Показывает использование вспомогательных экранных Осей координат, вспомогательной экранной Сетки и вспомогательных экранных Стрелок для упрощения создания линейных объектов.

Demonstrates the use of AxisHelper, GridHelper, and ArrowHelper to easily create line-based objects.

Эффект контура | Outline Effect

Демонстрирует эффект отображения сплошного контура вокруг меша.

Demonstrates an effect to display a solid outline around a mesh.

Цвета грани/вершины | Face/Vertex Colors

Присвоение цветов граням и вершинам для создания градиентных эффектов.

Assigning colors to faces and vertices for gradient effects.

Геометрические фигуры | Shapes

Использует некоторые из встроенных конструкторов геометрических фигур для создания следующих трехмерных геометрических фигур (и их вариаций): куб, икосаэдр, октаэдр, тетраэдр, сфера, купол, цилиндр, призма, конус, пирамида, усеченный конус (усеченная пирамида), тор, тороидальные узлы.

Uses some of the built-in geometry constructors to create the following three dimensional shapes (and variations): cube, icosahedron, octahedron, tetrahedron, sphere, dome, cylinder, prism, cone, pyramid, frustum (truncated cone and truncated pyramid), torus, torus knots.

Выдавливание | Extrusion

Создайте массив двумерных точек, задайте двумерную фигуру и создайте выдавливание/экструзию (трехмерную фигуру, поперечные сечения которой соответствуют заданной двумерной фигуре).

Create an array of 2D points, make a 2D shape, and create an extrusion (a 3D shape whose cross-sections are the given 2D shape).

Текст3D | Text3D

Создайте трехмерный текстовый объект (выдавленную версию текста, отображенную в виде двухмерного изображения).

Create a 3D text object (an extruded version of text rendered as a 2D image).

Текстуры | Textures

Демонстрирует поверхности с текстурами (материалами на основе изображений), включая эффекты затенения и окраски.

Demonstrates surfaces with textures (image-based materials), including shading and coloring effects.

Текстура - Повторение | Texture - Repeat

Повторение(тайлы) текстуры на поверхности.

Repeating (tiling) a texture on a surface.

Текстура - Текст3D | Texture - Text3D

Применение текстуры к 3D-тексту. (Требуется повторяющаяся текстура на поверхности.)

Applying a texture to 3D Text. (Requires repeating texture on surface.)

Полупрозрачность | Translucence

Иллюстрирует использование базовых полупрозрачных материалов и полупрозрачных материалов с затенением Фонга, создание полупрозрачных текстур изображений, использование аддитивного смешивания для эффекта свечения и использование текстур изображений, которые уже имеют альфа-прозрачность.

Illustrates using basic and phong-shaded translucent materials, making image textures translucent, using additive blending for a glow-like effect, and using image textures that already have alpha transparency.

Тень | Shadow

Использование прожекторов для создания эффектов теней в сцене.

Using spotlights to create shadow effects in a scene.

Модификатор подразделения - Куб | Subdivision Modifier - Cube

Демонстрирует функцию, которая интерполирует дополнительные точки в геометрию, создавая эффект «сглаживания». В этом примере модификатор применяется к кубам различной геометрии, в результате чего получаются сферические и скошенные кубы.

Demostrates a function that interpolates additional points to a geometry, creating a "smoothing" effect. This example applies the modifier to a variety of cube geometries, resulting in spherical and beveled cubes.

Небесный бокс | SkyBox

Использование текстур для создания «SkyBox»: фоновые изображения проецируются на куб, окружающий область рендеринга, что создает иллюзию удаленного трехмерного окружения.

Using textures to create a "SkyBox": backgrounds images projected onto a cube surrounding the rendering region, which creates the illusion of distant 3D surroundings.

Отражение | Reflection

Создание зеркального материала путем проецирования изображения окружающей среды на объект.

Creating a mirror-like material by projecting an image of the surroundings onto a object.

Преломление | Refraction

Создание стеклоподобного материала путем проецирования на объект преломленного изображения окружающей среды.

Creating a glass-like material by projecting a refracted image of the surroundings onto a object.

Пузырь | Bubble

Создание материала, похожего на пузырь (включает отражение, преломление и хроматическую аберрацию) с помощью шейдера Френеля.

Creating a bubble-like material (incorporates reflection, refraction, and chromatic abberation) using a Fresnel shader.

Текстура из холста | Texture from Canvas

Создайте элемент холста с помощью JavaScript, нарисуйте на нем текст или изображения, а затем используйте его в качестве текстуры для меша.

Create a canvas element via JavaScript, draw text or images on it, and then use it as a texture for a mesh.

Анимация текстур | Texture Animation

Анимируйте текстуру изображения спрайта на поверхности.

Animate a spritesheet image texture on a surface.

Спрайты | Sprites

Спрайты — это изображения (не привязанные к геометрии/поверхностям), отображаемые в сцене, всегда ортогонально к камере. Они могут либо появляться в 3D-сцене (полезно как часть эффекта частиц), либо визуализироваться с использованием экранных координат (полезно как часть графического интерфейса пользователя (graphical user interface; GUI) или проекционного дисплея на шлеме (heads-up display; HUD)).

Sprites are images (not attached to geometries/surfaces) displayed in a scene, always orthogonal to the camera. They can either appear in the 3D scene (useful as part of a particle effect) or rendered using screen coordinates (useful as part of a graphical user interface (GUI) or a heads-up display (HUD)).

Текстовые метки спрайтов | Sprite Text Labels

Сочетает в себе техники из демо-версии (Спрайты | Sprites) и демо-версии (Текстура из холста | Texture from Canvas), предоставляя функцию, позволяющую легко создавать настраиваемые текстовые метки.

Combines techniques from Sprite demo and Texture from Canvas demo, introducing a function to easily make customizable text labels.

Маркированная геометрия | Labeled Geometry

Применение демо-версии (Текстовые метки спрайтов | Sprite Text Labels) для маркировки всех вершин и ребер геометрии их порядковым номером.

Application of the Sprite Text Labels demo to label all vertices and edges of a geometry with their index number.

Мышь - Спрайт | Mouse Sprite

Отображение спрайта в текущей позиции мыши. (Может быть полезно для нацеливания на значок указателя мыши.)

Display a sprite at the current position of the mouse. (May be useful for targeting icon or mouse pointer icon.)

Щелчок мышью | Mouse Click

Измените цвет грани меша при щелчке мышью.

Change the color of a face on a mesh when clicked.

Мышь нависает/парит | Mouse Hovering

Измените цвет объекта в сцене при нависании/парении над ним курсора мыши.

Change the color of an object in the scene when the mouse hovers over it.

Всплывающая подсказка мыши | Mouse Tooltip

Создайте эффект всплывающей подсказки для отображения названий мешей при наведении курсора мыши. (Используются идеи из примеров: (Мышь - Спрайт | Mouse Sprite), (Мышь нависает/парит | Mouse Hovering) и (Текстура из холста | Texture from Canvas).)

Create a tooltip-style effect to display mesh names when mouse hovers. (Uses ideas from examples: Mouse Sprite, Mouse Hovering, and Texture from Canvas.)

События клавиатуры | Keyboard Events

Демонстрирует использование KeyboardState.js для реагирования на события нажатия/отпускания клавиш.

Demonstrates use of KeyboardState.js to respond to key down/pressed/up events.

Перемещение меша | Mesh Movement

Используя функциональные возможности THREEx.Keyboard, перемещайте и вращайте мешь с помощью следующих элементов управления:
W/S/Q/E: перемещение вперед/назад/влево/вправо(локально).
A/D/R/F: вращение влево/вправо/вверх/вниз(локально).
UP/DOWN/LEFT/RIGHT: перемещение по осям Z-/Z+/X-/X+(глобально).

Using the functionality provided by THREEx.Keyboard, translate and rotate a mesh, with the following controls:
W/S/Q/E: translate forwards/backwards/left/right (local).
A/D/R/F: rotate left/right/up/down (local).
UP/DOWN/LEFT/RIGHT: translate Z-/Z+/X-/X+ (global).

Камера преследования | Chase Camera

Создайте «камеру преследования» — перемещайте камеру вместе с мешем. (Те же элементы управления, что и в примере (Перемещение меша | Mesh Movement).)
Create a "chase cam" -- move the camera around together with a mesh. (Same controls as in "Mesh Movement" example.)

Несколько камер | Multiple Cameras

Переключение между несколькими камерами: камера преследования(нажмите «1») и фиксированный вид сверху(нажмите «2»). (В остальном управление такое же, как в примере (Перемещение меша | Mesh Movement).)

Switch between multiple cameras: chase camera (press "1") and fixed top view (press "2"). (Otherwise, same controls as in "Mesh Movement" example.)

Из камеры в текстуру | Camera to Texture

Перемещайте камеру и проецируйте увиденное в текстуру. (Управление такое же, как в примере (Перемещение меша | Mesh Movement).)

Move around a camera and project what it sees it onto a texture. (Same controls as in "Mesh Movement" example.)

Окна просмотра - Двойные | Viewports - Dual

Одновременное отображение двух разных ракурсов камеры на одном и том же элементе холста. (Те же элементы управления, что и в примере (Перемещение меша | Mesh Movement).)

Simultaneously render two different camera views onto the same canvas element. (Same controls as in "Mesh Movement" example.)

Окна просмотра - Четверные | Viewports - Quad

Одновременное отображение четырех различных ракурсов камеры на одном и том же элементе холста: одной перспективной камеры и трех ортогональных камер вдоль осей (аналогично конфигурациям многих программ для 3D-моделирования). (Те же элементы управления, что и в примере (Перемещение меша | Mesh Movement).)

Simultaneously render four different camera views onto the same canvas element: one perspective camera and three orthographic cameras along the axis directions (similar to many 3D modeling software configurations). (Same controls as in "Mesh Movement" example.)

Встроенный HTML | Embedded HTML

Отображает интерактивную веб-страницу в сцене Three.js. Основано на работе Жерома Этьена(Jerome Etienne): http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

Displays an interactive webpage within a Three.js scene. Based on the work of Jerome Etienne: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

Красно-синий анаглиф | Red/Blue Anaglyph

Отображает сцену, созданную с использованием анаглифного эффекта; для просмотра используйте красно-синие 3D-очки.

Displays a scene rendered using an Anaglyph effect; use red/blue 3D glasses to view.

Шейдер - Простой | Shader - Simple

Демонстрирует, как настроить простой предварительно определенный шейдер (окраска сепией).

Demonstrates how to set up a simple pre-defined shader (sepia coloring).

Шейдер - Проводник | Shader - Explorer

Иллюстрирует эффекты изменения параметров в разных шейдерах (сепия, виньетка, растр).

Illustrates the effects of changing the parameters in different shaders (sepia, vignette, dot screen).

Шейдер - Развертывание сферы | Shader - Sphere Unwrapping

Демонстрирует использование вершинного шейдера для анимации вершин, изменяя их положение в соответствии с их UV-координатами; в результате получается сфера, которая «сглаживается» в плоскость.

Demonstrates using a vertex shader to animate vertices, changing their positions according to their UV-coordinates; the result is a sphere that "flattens" into a plane.

Шейдер - Атрибуты | Shader - Attributes

Демонстрируется использование вершинного шейдера для анимации вершин с использованием «атрибутов»: набора значений, связанных с каждой вершиной.

Demonstrates using a vertex shader to animate vertices, using "attributes": a set of values associated to each vertex.

Шейдер - Анимированные материалы | Shader - Animated Materials

Демонстрирует анимацию материалов с помощью шейдеров с эффектом лавы и эффектом воды.
Demonstrates the animation of materials using shaders, featuring a lava effect and a water effect.

Шейдер - Анимированный огненный шар | Shader - Animated Fireball

Создано на основе демонстрации(Шейдер - Анимированные материалы | Shader - Animated Materials): второе изображение случайным образом искажается и смешивается с первым, а положения вершин искажаются случайным образом. Эти эффекты объединяются для создания анимированного огненного шара.

Builds upon the "Shader - Animated Materials" demo: a second image is randomly distorted and blended with the first, and the positions of the vertices are randomly distorted. These effects are combined to create an animated fireball.

Шейдер - Эффект свечения | Shader - Glow Effect

Создайте эффект свечения с помощью шейдеров. Включает графический интерфейс для настройки параметров шейдера. Использование рендеринга лицевой грани позволяет создавать эффекты свечения или стиля ракушки; использование рендеринга обратной стороны может создавать эффекты стиля ореола или атмосферы (соответствующие значения параметров см. в демонстрационной информации).

Create a glow effect using shaders. Includes GUI to adjust shader parameters. Using front-face rendering can create glow or shell style effects; using back-face rendering can create halo or atmosphere style effects (see information in-demo for corresponding parameter values).

Простое свечение (без шейдера) | Simple Glow (non-shader)

Создайте эффект свечения (без использования шейдера нестандартного материала) — использует аддитивно смешанный спрайт. (Хорошо работает только со сферическими объектами.)

Create a glow effect *without* using custom shader material -- uses a additively blended sprite. (Only works well with spherical objects.)

Частицы | Particles

Создайте эффект частиц, используя группу спрайтов и альфа-смешение (или прозрачность).

Create a particle effect using a group of sprites and alpha blending (or transparency).

Система частиц - Статика | Particle System - Static

Создайте группу частиц, используя объект ParticleSystem (для более быстрого рендеринга). Каждая вершина в данной геометрии соответствует позиции частицы.

Create a group of particles using the ParticleSystem object (for faster rendering). Each vertex in a given geometry corresponds to the position of a particle.

Система частиц - Шейдер | Particle System - Shader

Демо (Система частиц - Статика | Particle System - Static) переписано с использованием материала на основе шейдеров; будет полезен в последующих демонстрациях.

The "Particle System - Static" demo rewritten using a shader-based material; will be useful in subsequent demos.

Система частиц - Атрибуты | Particle System - Attributes

Создан на основе демо-версии (Система частиц - Шейдер | Particle System - Shader), включающий атрибуты шейдера, позволяющие каждой частице иметь настраиваемые свойства - в этом случае каждой частице присваивается свой цвет.

Builds upon "Particle System - Shader" demo, incorporating shader attributes, enabling each particle to have customized properties - in this case, each particle is assigned a different color.

Система частиц - Динамика | Particle System - Dynamic

Основан на демонстрации (Система частиц - Атрибуты | Particle System - Attributes) и включает анимацию: размеры частиц со временем колеблются с разной частотой.

Builds upon "Particle System - Attributes" demo, incorporating animation: particle sizes oscillate at different frequencies over time.

Система частиц - Перемещение по пути | Particle System - Path Movement

Система частиц, в которой частицы перемещаются по пути.

A particle system with particles moving along a path.

Движок частиц | Particle Engine

Полноценный движок частиц для управления системой частиц для создания специальных эффектов, таких как огонь, дым, звезды, снег и фейерверки. Включает 11 примеров эффектов. Настраиваемые свойства частиц включают изображение частицы, вращение, размер, цвет и непрозрачность.

A complete particle engine for controlling a particle system to create special effects such as fire, smoke, stars, snow, and fireworks. Includes 11 example effects. Customizable particle properties include particle image, rotation, size, color, and opacity.

Видео в текстуру | Video to Texture

Отображение видео в виде текстуры. Управление с клавиатуры: «P» для воспроизведения/возобновления, «ПРОБЕЛ» для паузы, «R» для перемотки назад, «S» для остановки.

Display a video as a texture. Keyboard controls: "P" to play/resume, "SPACE" to pause, "R" to rewind, "S" to stop.

Тест веб-камеры | Webcam Test

Отображает изображение с веб-камеры пользователя на этой веб-странице. Требуется веб-камера, пользователь должен подтвердить разрешение для запуска, требуется браузер, совместимый с WebRTC (см. http://www.webrtc.org/). (Код Three.js не требуется; этот пример является введением к следующему примеру.)

Displays user webcam image on this webpage. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/). (No Three.js code required; this example is a lead-in to the following example.)

Веб-камера в текстуру | Webcam to Texture

Отображает изображение с веб-камеры пользователя в виде текстуры на сетке. Требуется веб-камера, пользователь должен предоставить разрешения для запуска, требуется браузер, совместимый с WebRTC (см. http://www.webrtc.org/). Нажмите P, чтобы приостановить работу веб-камеры (изображение зависнет), и R, чтобы возобновить работу веб-камеры.

Displays user webcam image as a texture on a mesh. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/). Press P to pause webcam (image freezes) and R to resume webcam.

Обнаружение движения | Motion Detection

Отображает изображение с веб-камеры пользователя на веб-странице. Требуется браузер, совместимый с WebRTC (см. http://www.webrtc.org/). Обнаруживает движение в заданных областях; см. http://www.youtube.com/watch?v=ehkqgaGwGcw для демонстрации. Основано на http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html. (Код Three.js не требуется; этот пример является введением к следующему примеру.)

Displays user webcam image on webpage. Requires WebRTC compatible browser (see http://www.webrtc.org/). Detects motion occuring within given regions; see http://www.youtube.com/watch?v=ehkqgaGwGcw for demo. Based on http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html. (No Three.js code required; this example is a lead-in to the following example.)

Много камер | Many Cameras

Отображает изображение с веб-камеры пользователя в виде текстуры на подвижной сетке (W/A/S/D/Q/E). Включает код из примеров: (Веб-камера в текстуру | Webcam to Texture), Mesh Movement, Reflection, Skybox и Viewports - Dual. Требуется веб-камера, пользователю необходимо принять разрешения для запуска, требуется браузер, совместимый с WebRTC (см. http://www.webrtc.org/).

Displays user webcam image as a texture on a moveable mesh (W/A/S/D/Q/E). Incorporates code from examples: Webcam Texture, Mesh Movement, Reflection, Skybox, and Viewports - Dual. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/).

Обнаружение движения и сцена | Motion Detection and Scene

Отображает изображение с веб-камеры пользователя на веб-странице. Требуется веб-камера, пользователь должен предоставить разрешения для запуска, требуется браузер, совместимый с WebRTC (см. http://www.webrtc.org/). Обнаруживает движение в графических областях и соответствующим образом изменяет текстуру на вращающемся кубе.

Displays user webcam image on webpage. Requires Webcam, user needs to accept permissions to run, requires WebRTC compatible browser (see http://www.webrtc.org/). Detects motion occuring over graphics regions, and changes texture on spinning cube accordingly.

Графическиий интерфейс пользователя(GUI) | GUI

Создайте графический интерфейс пользователя (GUI; используя библиотеку DAT.GUI).

Create a graphical user interface (using the DAT.GUI library).

Контроллер графического интерфейса пользователя(GUI) | GUI Controller

Создайте графический пользовательский интерфейс(GUI)(используя библиотеку DAT.GUI), управляющий внешним видом меша куб.

Create a graphical user interface (using the DAT.GUI library) that controls the appearance of a cube mesh.

Тест геймпада | Gamepad Test

Использует геймпад(например, контроллер Xbox) для перемещения квадратного изображения по холсту. Для работы требуется браузер Chrome и подключенный геймпад. Использует библиотеку gamepad.js (с патчами) с http://github.com/inequation/gamepad.js. Аналоговые стики и крестовина перемещают квадрат вверх/вниз/влево/вправо. Кнопки A/B/X/Y меняют цвет квадрата. Кнопки Start/Select возвращают квадрат в исходное положение. [Примечание: Возможно, вам потребуется нажать одну из кнопок A/B/X/Y, чтобы веб-браузер распознал контроллер.] (Код Three.js не требуется; этот пример является введением к следующему примеру.)

Uses a Gamepad (e.g. XBox controller) to move a square image around a canvas. Requires Chrome browser and connected gamepad to run. Uses gamepad.js library (patched) from http://github.com/inequation/gamepad.js. Analog sticks and directional pad move square up/down/left/right. A/B/X/Y buttons change colors of square. Start/select buttons reset square to original position. [Note: You may need to press one of A/B/X/Y buttons for controller to be recognized by the web browser.] (No Three.js code required; this example is a lead-in to the following example.)

Перемещение меша - Геймпад | Mesh Movement - Gamepad

Использует геймпад (например, контроллер Xbox) для перемещения куба по сцене Three.js, аналогично примеру Mesh-Movement, приведенному выше. Для работы требуется браузер Chrome и подключенный геймпад. Левый аналоговый стик перемещает куб вперед/назад и поворачивает влево/вправо. Крестовина перемещает куб вперед/назад/влево/вправо. Правый аналоговый стик только поворачивает куб влево/вправо. Правые кнопки на плечевом джойстике удваивают скорость движения/поворота. Кнопки Start/Select возвращают куб в исходное положение и вращение.

Uses a Gamepad (e.g. XBox controller) to move a cube around a Three.js scene, similar to Mesh-Movement example above. Requires Chrome browser and connected gamepad to run. Left analog stick moves cube forward/backward and turns left/right. Directional pad moves cube forward/backward/left/right. Right analog stick only turns cube left/right. Right shoulder buttons double speed of movement/turns. Start/select buttons reset cube to original position and rotation.

Визуализация LeapMotion | LeapMotion Visualization

Визуализация данных о положении кисти/пальцев с устройства LeapMotion.
Веб-сайт LeapMotion

Visualize hand/finger position data from LeapMotion device.
LeapMotion website

Модель | Model

Загрузка статической 3D-модели (экспортированной из Blender в JavaScript).

Loading a static 3D model (exported from Blender to JavaScript).

Анимированная модель | Animated Model

Загрузка анимированной 3D-модели (экспортированной из Blender в JavaScript)

Loading an animated 3D model (exported from Blender to JavaScript).

Анимированная модель с элементами управления | Animated Model with Controls

Загрузка анимированной 3D-модели (экспортированной из Blender в JavaScript). Модель перемещается с помощью клавиш со стрелками; анимация происходит при движении, а анимация прекращается, когда модель стоит на месте.

Loading an animated 3D model (exported from Blender to JavaScript). Model moves with arrow keys; model animates when moving and stops animating when not moving.

Обнаружение столкновений | Collision Detection

Определяйте точки пересечения вершин меша с другим объектом. (Перемещайте каркасный куб с помощью клавиш со стрелками и вращайте с помощью клавиш W/A/S/D; текст « Столкнулся » будет появляться в верхней части экрана один раз для каждого пересечения вершин.)

Detect when the vertices of a mesh intersect with another object. (Move the wireframe cube with the arrow keys and rotate with W/A/S/D; the text "Hit" will appear at the top of the screen once for every vertex intersection.)

Алгоритм Марширующих кубов | Marching Cubes Algorithm

Иллюстрация алгоритма (Алгоритм Марширующих кубов | Marching Cubes Algorithm) для триангуляции поверхности уровня («изоповерхности») неявно определенной функции f(x,y,z) = c. Смотрите веб-сайты:
http://en.wikipedia.org/wiki/Marching_cubes/
http://paulbourke.net/geometry/polygonise/

An illustration of the "Marching Cubes" algorithm for triangulating a level surface ("isosurface") of an implicitly defined function f(x,y,z) = c. See the websites:
http://en.wikipedia.org/wiki/Marching_cubes/
http://paulbourke.net/geometry/polygonise/

Меташары | Metaballs

Эффект, при котором сферы движутся, а их поверхности сливаются и разделяются; поверхности рассчитываются с помощью неявных функций и отображаются с использованием алгоритма (Алгоритм Марширующих кубов | Marching Cubes Algorithm). Для получения дополнительной информации смотрите веб-сайты:
http://en.wikipedia.org/wiki/Metaballs
http://www.geisswerks.com/ryan/BLOBS/blobs.html

A effect where spheres move around and their surfaces merge and split; the surfaces are calculated by implicit functions and drawn using the "Marching Cubes" algorithm. For more information, see the websites:
http://en.wikipedia.org/wiki/Metaballs
http://www.geisswerks.com/ryan/BLOBS/blobs.html

Метапузырьки | Metabubbles

Демонстрация (Метапузырьки | Metabubbles) = Демонстрация (Меташары | Metaballs) + Демонстрация (Пузырь | Bubble)!

Metaballs demo + Bubble demo = Metabubbles demo!

Конструктивная стереометрия | Constructive Solid Geometry

Создает новый мешь путем объединения, пересечения или вычитания двух мешей. Использует библиотеку по адресу http://github.com/chandlerprall/ThreeCSG/

Create a new mesh from the union, intersection, or subtraction of two meshes. Uses the library at http://github.com/chandlerprall/ThreeCSG/

Проекция сферы | Sphere Projection

Проецирует каркасный куб на сферу. Включает метод для построения дуги между двумя точками на сфере.

Projects a wireframe cube onto a sphere. Includes a method for drawing the arc between two points on a sphere.

Топологические данные | Topology Data

На основе объекта THREE.Geometry создается топологическая структура данных, состоящая из вершин, ребер и граней, с данными о инцидентности для каждого элемента. В этом примере соответствующая геометрия помечена (включая ребра), и данные можно проверить вручную в консоли браузера. (Основано на демонстрации с помеченной геометрией.)

From a THREE.Geometry, creates a topological data structure consisting of vertices, edges, and faces, with incidence data for each. For this example, the corresponding geometry is labeled (including edges) and the data can be manually verified from the browser console. (Builds on Lebeled Geometry demo.)

Топологические данные 2 | Topology Data 2

Дополняет демонстрацию (Топологические данные | Topology Data); иллюстрирует функции подразделения ребер и граней, повторной триангуляции и корректной раскраски граней.

Builds upon Topology Data demo; illustrates edge and face subdivision and retriangulation functions and proper face coloring function.

Просмотрщик многогранников | Polyhedra Viewer

Интерактивный просмотрщик многогранников (платоновских, архимедовых, призм, антипризм, тел Джонсона).

Interactive viewer of polyhedra (Platonic, Archimedean, Prisms, Antiprisms, Johnson Solids).

Функциональный графограф | Function Grapher

Постройте график функции вида z = f( x, y )

Graph a function of the form z = f( x, y ).

Параметрический графограф поверхности | Parametric Surface Grapher

Постройте график параметрической поверхности вида x = f( u, v ), y = g( u, v ), z = h( u, v )

Graph a parametric surface of the form x = f( u, v ), y = g( u, v ), z = h( u, v ).