three js примеры кода
Three js примеры кода
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.
The «Hello World» code with most comments and meshes removed.
The template code with minimal jQuery added to create a button that displays an information dialog box.
Illustrates the difference between the Basic, Lambert, and Phong materials.
Illustrates the effects of changing the Color (Diffuse Color), Ambient Color, Emissive Color, Specular Color, Shininess amount, and Opacity amount.
Demonstrates how to create and apply wireframe materials.
Demonstrates how to create solid lines, dashed lines, and contains a function to convert geometries into line-style objects.
Demonstrates the use of AxisHelper, GridHelper, and ArrowHelper to easily create line-based objects.
Demonstrates an effect to display a solid outline around a mesh.
Assigning colors to faces and vertices for gradient effects.
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.
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).
Create a 3D text object (an extruded version of text rendered as a 2D image).
Demonstrates surfaces with textures (image-based materials), including shading and coloring effects.
Repeating (tiling) a texture on a surface.
Applying a texture to 3D Text. (Requires repeating texture on surface.)
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.
Using spotlights to create shadow effects in a scene.
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.
Using textures to create a «SkyBox»: backgrounds images projected onto a cube surrounding the rendering region, which creates the illusion of distant 3D surroundings.
Creating a mirror-like material by projecting an image of the surroundings onto a object.
Creating a glass-like material by projecting a refracted image of the surroundings onto a object.
Creating a bubble-like material (incorporates reflection, refraction, and chromatic abberation) using a Fresnel shader.
Create a canvas element via JavaScript, draw text or images on it, and then use it as a texture for a mesh.
Animate a spritesheet image texture on a surface.
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)).
Combines techniques from Sprite demo and Texture from Canvas demo, introducing a function to easily make customizable text labels.
Application of the Sprite Text Labels demo to label all vertices and edges of a geometry with their index number.
Display a sprite at the current position of the mouse. (May be useful for targeting icon or mouse pointer icon.)
Change the color of a face on a mesh when clicked.
Change the color of an object in the scene when the mouse hovers over it.
Create a tooltip-style effect to display mesh names when mouse hovers. (Uses ideas from examples: Mouse Sprite, Mouse Hovering, and Texture from Canvas.)
Demonstrates use of KeyboardState.js to respond to key down/pressed/up events.
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).
Switch between multiple cameras: chase camera (press «1») and fixed top view (press «2»). (Otherwise, same controls as in «Mesh Movement» example.)
Move around a camera and project what it sees it onto a texture. (Same controls as in «Mesh Movement» example.)
Simultaneously render two different camera views onto the same canvas element. (Same controls as in «Mesh Movement» example.)
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.)
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/
Displays a scene rendered using an Anaglyph effect; use red/blue 3D glasses to view.
Demonstrates how to set up a simple pre-defined shader (sepia coloring).
Illustrates the effects of changing the parameters in different shaders (sepia, vignette, dot screen).
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.
Demonstrates using a vertex shader to animate vertices, using «attributes»: a set of values associated to each vertex.
Demonstrates the animation of materials using shaders, featuring a lava effect and a water 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).
Create a particle effect using a group of sprites and alpha blending (or transparency).
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.
A particle system with particles moving along a path.
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.
Display a video as a texture. Keyboard controls: «P» to play/resume, «SPACE» to pause, «R» to rewind, «S» to stop.
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.)
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.
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.)
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.
Create a graphical user interface (using the DAT.GUI library).
Create a graphical user interface (using the DAT.GUI library) that controls the appearance of a cube mesh.
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.)
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.
Visualize hand/finger position data from LeapMotion device.
LeapMotion website
Loading a static 3D model (exported from Blender to JavaScript).
Loading an animated 3D model (exported from Blender to 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.
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.)
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/
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
Metaballs demo + Bubble demo = Metabubbles demo!
Create a new mesh from the union, intersection, or subtraction of two meshes. Uses the library at http://github.com/chandlerprall/ThreeCSG/
Projects a wireframe cube onto a sphere. Includes a method for drawing the arc between two points on a sphere.
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.)
Builds upon Topology Data demo; illustrates edge and face subdivision and retriangulation functions and proper face coloring function.
Interactive viewer of polyhedra (Platonic, Archimedean, Prisms, Antiprisms, Johnson Solids).
Graph a function of the form z = f( x, y ).
Graph a parametric surface of the form x = f( u, v ), y = g( u, v ), z = h( u, v ).
Graph a parametric curve of the form x = f( t ), y = g( t ), z = h( t ).
Paint with voxels, Minecraft-style! (Think: 3D pixel editor.)
Изучаем Three.js.Глава 1: Создаем нашу первую 3D-сцену, используя Three.js
Всем привет!
Хочу начать вольный перевод замечательной книги «Learning Three.js- The JavaScript 3D Library for WebGL». Я уверен, что эта книга будет интересна не только новичкам, но и профессионалам своего дела. Ну не буду долго затягивать вступление, только приведу пример того, что мы совсем скоро сможем делать:
Создаем структуру HTML страницы
Первое, что нам нужно сделать, это создать пустую HTML страницу, которую можно будет использовать в качестве основы для всех наших примеров. Это HTML структура представлена следующим образом:
В следующем разделе вы узнаете, как добавить первые пару 3D-объектов на нашу сцену.
Рендеринг и просмотр 3D-объектов
На этом этапе мы создадим нашу первую сцену и добавим пару объектов и камеру. Наш первый пример будет содержать следующие объекты:
Плоскость – двумерный прямоугольник, который будет служить в качестве нашей основной площадки. Она будет отображаться как серый прямоугольник в середине сцены.
Куб – трехмерный куб, который мы будем рендеритьв красный.
Сфера – трехмерная сфера, которую мы будем рендерить в синий.
Камера – она определяет, что мы увидим в выходных данных.
Оси – х, у и z. Это полезный инструмент отладки, чтобы видеть, где рендерятся объекты.
Сначала посмотрим, как это выглядит в коде, а потом постараемся разобраться.
Так же мы добавим элемент
Единственное, что осталось сделать – это инициализировать статику и добавить ее в элемент
Эта функция инициализирует статику. Интерес вызывает функция setMode (). Если мы передадим в нее 0, то будем измерять FPS, а если передадим 1, то будет измеряться время рендеринга. Для этого примера нас интересует FPS, поэтому мы передадим 0. В начале нашей безымянной функции jQuery мы будем вызывать эту функцию для включения статики:
И еще одна деталь для функции render():
Если вы запустите код с этими дополнениями, то увидите статику в верхнем левом углу, как показано на следующем скриншоте:
Анимация куба
С помощью метода requestAnimationFrame () и настроенной статики у нас появилась возможность размещать наш анимационный код. В этом разделе мы будем расширять возможности функции render () кодом, который будет вращать наш красный куб вокруг своей оси. Давайте начнем со следующего:
Это выглядит просто, не так ли? Все что мы сделали – это увеличили свойство rotation каждой оси на 0,02 каждый раз при вызове функции render (), и куб будет плавно вращаться вокруг своей оси. Сделаем так, чтобы синий шар подскакивал, но это будет немного сложнее.
Подскакивание шара
Для отскока шара мы добавим еще пару строк кода в нашу функцию render () следующим образом:
Вот ссылка на работающий пример.
Прежде чем закончить эту главу, мне хочется добавить еще один элемент к основной сцене. При работе с 3D-сценой, анимацией, цветами и другими свойствами требуется немного поэкспериментировать, чтобы получить правильный цвет или скорость. Было бы удобно, если бы вы могли иметь простой графический интерфейс, который позволял бы изменять такого рода свойства на лету. К счастью, он есть.
Использование библиотеки dat.GUI делает экспериментирование более простым
Следующее что нам необходимо сделать – это сконфигурировать JavaScript объект, который будет анализировать свойства, которые мы хотим изменить, используя библиотеку dat.GUI. В основной части нашего кода мы добавим следующий JavaScript объект:
В этом объекте мы определим два свойства: this.rotationSpeed и this.bouncingSpeed вместе с их значениями по умолчанию. Далее мы передаем этот объект в новый объект dat.GUI и определяем диапазон этих двух свойств, как показано ниже:
Свойства rotationSpeed и bouncingSpeed оба установлены в диапазоне от 0 до 0,5. Все, что нам нужно сейчас сделать – это убедиться, что внутри цикла нашей функции render мы ссылаемся на эти два свойства напрямую, так что, когда мы вносим изменения с помощью пользовательского интерфейса dat.GUI, они сразу же влияют на вращение и скорость подскакивания наших объектов. Это делается следующим образом:
Теперь, при запуске нашего примера, вы увидите простой пользовательский интерфейс, который можно использовать для управления скоростью подпрыгивания и вращения объектов:
Three.js — делаем controls для космосима или планетария
Разрабатывая свой проект на тему космоса, столкнулся с тем что в three.js почему-то нет готового и удобного инструмента управления камерой, подходящего под такие задачи. Конечно я допускаю что просто плохо искал… Но, довольно продолжительный поиск результатов не дал.
OrbitControls — традиционный любимец примеров three.js, не умеет переворачивать камеру вверх ногами, и много разного другого нужного, тоже не умеет.
TrackballControls — замечателен тем, что камера вращается вокруг объекта как угодно, и вверх ногами тоже, но не умеет при этом поворачиваться на оси зрения, не умеет двигаться вперед-назад не меняя масштаб, нет удобной регулировки скорости движений и поворотов.
FlyControls — напротив, позволяет делать «бочку» и менять скорость, но… куда же делось вращение камеры вокруг рассматриваемого объекта.
Можно было, конечно, выкрутиться с помощью всяческих костылей, но как-то это не комильфо. Убедившись, что готового решения для моих целей нет, я решил создать его сам. Кто заинтересовался, прошу под кат.
За основу решил взять TrackballControls.js, открыв его, видим авторов:
Вот их труд и послужит нам отправной точкой. Надо немного добавить, и по возможности не сломать имеющееся. (Однако, кое-что пришлось выпилить).
Для начала, что мы имеем: камера крутится вокруг объекта без ограничений, не застревает на полюсе, при всех поворотах сохраняет постоянную угловую скорость. Есть зум, есть панорамирование. Это хорошо, но мало.
Удивлением стало странное положение с кнопками. В самом деле, вот это неожиданно:
Управление камерой с помощью всего трех кнопок? может быть это неплохая идея, но по факту она не работает. В обработчике события keydown в исходнике наблюдаем следующие строки:
Это выглядит несколько загадочно, но… не работает. Т.е. вообще. Вышеуказанные кнопки ничего по факту не делают, управление камерой происходит только мышью или тачем.
Этот кусок кода я за комментировал за ненадобностью, и заменил своим, о котором рассказ будет немного дальше. Снятие колбека на обработку кнопки — очевидно, было нужно чтобы кнопки работали только по одному разу за нажатие. Но это не то поведение, которое нужно в космосиме, поэтому его тоже под комментарий.
Итак, чего же нам здесь не хватает? Что я решил добавить:
Конструктор
Добавляем несколько переменных:
rotationZFactor понадобится для контроля вращения камеры на оси зрения,
RVMovingFactor для контроля движения вперед и назад вдоль той же оси,
autoRotate полагаю, в комментариях не нуждается,
allSpeedsFactor для управления скоростью всех вместе взятых, движений и поворотов.
Метод RotateCamera
Организован таким образом:
Здесь почти все так и было, единственное что я добавил — переменную tmpQuaternion для обработки вращения камеры по оси Z.
Далее, проверка необходимости какой-либо обработки, было довольно незатейливо:
Что тут и зачем. Во-первых, если активна авто-ротация, то добавляем ее скорость к вращению по оси X. Во-вторых, добавлено масштабирование всех ротаций (И авто-ротации тоже) на allSpeedsFactor. Для управления скоростью всех преобразований. И в третьих, дальнейшие действия мы будем производить не только в том случае, когда угол angle (Перемещение камеры относительно controls.target) отличен от нуля, но так же и в случае когда отличен от нуля rotationZFactor, отвечающий за вращение камеры вдоль оси Z.
Далее в коде метода, после вычисления кватерниона вращения, маленькое дополнение:
Кватернион вращения камеры вокруг объекта, умножаем на отдельно вычисленный кватернион вращения вдоль оси Z. Теперь камера умеет вращаться по всем трем осям.
Метод zoomCamera
Приведу его код целиком, он небольшой:
Все изменения сводятся к добавлению allSpeedsFactor в ряде мест, чтобы управлять скоростью (перемещений, вращений) и зума.
Метод panCamera
Так же приведу его код целиком, т.к. он небольшой:
Но тут изменений существенно больше. Обо всех расскажу по порядку.
Добавлена переменная rv — вектор для обработки лучевой скорости камеры, т.е. ее скорости вдоль оси Z.
Добавлено масштабирование вектора mouseChange на все тот же allSpeedsFactor, да опять он тут, я же хочу регулировать с его помощью все преобразования до единого, поэтому в обработке всех движений он будет добавляться.
Проверка необходимости обработки, теперь проходит не только если сдвинули мышь, но и в том случае когда отличен от нуля RVMovingFactor — переменная отвечающая за движение камеры вдоль луча зрения.
Ну и наконец, в коде метода, складываем вектора pan и rv, чтобы получить полное перемещение камеры по всем трем осям и применить его, к камере и к controls.target.
Метод update
Для устранения некоторых нежелательных эффектов, в самый конец метода добавлены строки:
Нежелательные эффекты были связаны с вращением и движением вдоль оси Z, как несложно догадаться.
Метод keydown
Исходный код, который я показывал в самом начале повествования, целиком и полностью за комментирован. А кроме него, в теле метода практически ничего и не было, так что можно сказать, он переписан с нуля.
Итак, что тут сделано:
Многие кнопки имитируют изменения, производимые движением мыши.
«A», «D» — дублирует поворот камеры влево и вправо.
«Z», «X» — дублирует поворот камеры вверх и вниз.
«+», «-» — дублируют зум с помощью колеса мыши.
Кнопки со стрелками дублируют движение камеры вверх-вниз и вправо-влево, без изменения зума и угла поворота.
А так же добавлены возможности, на которые кнопок стандартной мыши уже не хватило бы:
«W», «S» — движение вдоль луча зрения без изменения зума.
«Q», «E» — поворот камеры вокруг оси Z, т.е. вокруг луча зрения.
«R», «Shift» — снижение скорости всех движений, поворотов, преобразований, в 3 раза и в 20 раз соответственно.
При этом можно заметить, что произошел отказ от использования массива keys. Для моих целей это не требовалось, и если честно, прикручивать то что лично мне не требуется, мне было лень.
Метод keyup
Приведу его целиком:
Как несложно догадаться, все что тут делается, это возврат значений переменных RVMovingFactor, rotationZFactor, allSpeedsFactor, к их значениям по умолчанию.
Кроме того, за комментирована установка обработчика нажатий клавиш — потому, что в методе keydown было убрано его снятие.
Напоследок, чтобы не перепутать модифицированную библиотеку с стандартной, меняем название.
Вместо TrackballControls, теперь AstroControls.
И в конце файла пишем:
Все, новый controls готов к использованию.
threejsfundamentals.org
Это первая статья в серии статей о three.js. Three.js это 3D-библиотека, которая максимально упрощает создание 3D-контента на веб-странице.
В этих руководствах предполагается, что вы уже знаете JavaScript, и по большей части они будут использовать стандарт ES6+. Смотрите здесь краткий список вещей, которые вы, как ожидается, уже знаете. Большинство браузеров, которые поддерживают three.js, обновляются автоматически, поэтому большинство пользователей должны иметь возможность запускать этот код. Если вы хотите, чтобы этот код запускался в действительно старых браузерах, посмотрите на транспайлер, такой как Babel. Конечно, пользователи, использующие действительно старые браузеры, вероятно, имеют машины, которые не могут запускать three.js.
Первое, что нам нужно, это тэг :
Three.js будет рисовать на этом холсте, так что нам нужно найти его и передать three.js.
Обратите внимание, что здесь есть некоторые не явные детали. Если вы не передадите холст в three.js, библиотека создаст его за вас, но затем нужно будет добавить его в DOM. Место добавления может меняться в зависимости от вашего варианта использования, и вам придется изменить свой код, поэтому я считаю, что передача canvas в three.js выглядит немного более гибкой. Я могу поместить холст где угодно, и код найдет его там, как если бы у меня был код для вставки холста в документ, и мне, вероятно, пришлось бы изменить этот код, если бы изменился мой вариант использования.
Далее нам нужна камера.
aspect это соотношение сторон холста (англ. aspect ratio). Мы рассмотрим детали в другой статье, но по умолчанию холст имеет размер 300×150 пикселей, значит соотношение сторон 300/150 или 2.
near и far представляют пространство перед камерой, которое будет отображаться. Все, что находится до или после этого диапазона, будет обрезано (не нарисовано).
Эти 4 параметра определяют усеченную пирамиду «frustum». Frustum это название 3D фигуры, напоминающей пирамиду с отсеченной верхушкой. Другими словами, думайте о слове «frustum» как о трехмерной фигуре, такой как сфера, куб и призма.
Высота ближней и дальней плоскостей определяется полем зрения (field of view). Ширина обеих плоскостей определяется полем зрения и соотношением сторон (aspect).
Все, что находится внутри определенного усеченного контура, будет нарисовано. Снаружи ничего не будет.
Вот как мы её направили.
Далее мы создаем BoxGeometry который содержит данные для прямоугольного параллелепипеда. Почти все, что мы хотим отобразить в Three.js, нуждается в геометрии, которая определяет вершины нашего трехмерного объекта.
Затем мы создаем основной материал и устанавливаем его цвет. Цвета могут быть определены с использованием 6-значных шестнадцатеричных значений цвета, как в CSS.
И, наконец, мы добавляем Mesh на сцену
Затем мы можем отрендерить сцену, вызвав функцию render рендерера передав ей сцену и камеру.
Вот рабочий пример
requestAnimationFrame передает время с момента загрузки страницы в нашу функцию. Это время приходит в миллисекундах. Я считаю, что работать с секундами намного проще, поэтому здесь мы конвертируем время в секунды.
Затем мы устанавливаем вращение куба по X и Y на текущее время. Эти повороты в радианах. В круге 2 пи радиана, поэтому наш куб должен повернуться вокруг каждой оси примерно за 6.28 секунд.
Затем мы отрисовываем сцену и запрашиваем еще один кадр анимации, чтобы продолжить наш цикл.
Вне цикла мы вызываем requestAnimationFrame один раз, чтобы запустить цикл.
Это немного лучше, но все еще трудно увидеть 3d. Что может помочь, так это добавить немного освещения, поэтому давайте добавим источник света. В Three.js есть много разных источников света, о которых мы поговорим в следующей статье. А пока давайте создадим направленный свет.
И вот оно работает.
Теперь должно быть довольно четко видно 3D.
Просто для удовольствия добавим еще 2 кубика.
Мы будем использовать одну и ту же геометрию для каждого куба, но создадим другой материал, чтобы каждый куб мог иметь свой цвет.
Сначала мы сделаем функцию, которая создает новый материал с указанным цветом. Затем создает mesh, используя указанную геометрию, добавляет ее к сцене и устанавливает ей позицию X.
Затем мы будем вызывать его 3 раза с 3 разными цветами и позициями X, сохраняя экземпляры Mesh в массив.
Наконец, мы закрутим все 3 куба в нашей функции отрисовки. Мы рассчитываем немного разные коэффициенты вращения для каждого.