W | Cx | Cy | Cz | ||||||
H | Fx | Fy | Fz |
A simple drawing tool for the programmatic generation of 3D figures, on the basis of the Three.js library and standard Javascript code. Emphasis is on schematics and line drawings with partly transparent solids, of modest complexity, and accompanied by annotations and labels, as seen frequently in more technical scientific articles. Images are exported in vector format.
Figures are programmed in Javascript. You might wish to operate in your favorite text editor and paste the code into the Fig3 edit window for rendering and further fine-tuning. Most features of the Three.js library, with extensive documentation, are available. Fig3 itself provides some functions as shortcuts to the sometimes lengthy Three.js statements. See the following pages for a list of these built-in functions, and for a series of examples.
Drawings can be exported to vector image files with extension .svg (Scalable Vector Graphics, SVG). Conversion to other formats, preferably also vector-capable, such as .pdf, for inclusion in a LaTeX document is possible e.g. through Inkscape, also as a command-line option. Note that .eps does not support transparent elements, here the conversion generates raster (bitmapped) images.
Upon opening the Fig3-page, the Three.js-modules are downloaded from the server where also the Fig3 website resides. Your code is then interpreted and rendered entirely locally on your machine, by your web browser. None of your input data is being sent over your internet connection (unless things happen that are beyond control of the Fig3-scripts, that is).
Fig3-figures can be saved and re-opened as files with default extension .f3. Besides the figure-generating code, these text files include the data on view options (figure size, camera position, focus) in JSON format. Note that, just as any other piece of computer code, these files must be considered as potentially unsafe, if obtained from an — possibly obscure — external source. Fig3 internally uses the Javascript-eval function to interpret the code, to render the figure.
Manfred Hammer, Paderborn University, Paderborn, GermanySee the Three.js documentation first.
Fig3 provides the container Scene (capitalization) of type
THREE.Scene.
Objects need to be added to this scene to become visible, and need to be given a renderOrder
, such that transparency is handled properly. The scene is then displayed by an instance of
THREE.SVGRenderer
.
Textures, shadows, and shading are not supported by this workflow.
The "plate" establishes a plane x ∈ [-5, 5], z ∈ [-5, 5] at y=0; coordinate directions are indicated. The scene is to be constructed using those coordinates, typically in some region around the origin. The plate renders with order 0; objects with higher renderOrder
are drawn later.
Note that the figure code is interpreted in the same script-environment that also handles the operation of the Fig3 web-page. To avoid a clash of names, variables and functions in the figure code should preferably not start with an underscore _
.
Fig3 includes the following wrappers for some elementary objects. Mostly, these functions generate the drawable objects in some default position. For further positioning, the many methods of the general
THREE.Object3D
are available.
Among these are
rotateX
,
rotateY
,
rotateZ
for rotating, and
translateX
,
translateY
,
translateZ
for translating the object, in both cases with respect to its local axes.
Objects can then be added conveniently to the Fig3-scene with the Draw
-function.
Rad(d)
⟶ NumberP3(x, y, z)
⟶ THREE.Vector3
Linestyle(c, w)
⟶ THREE.LineBasicMaterialLine(p, ls)
⟶ THREE.LineEllipse(rx, ry, a0, a1, n, ls)
⟶ THREE.LineCurve(p, n, ls)
⟶ THREE.LineArrow(p0, p1, ls, l, w)
⟶ THREE.ArrowHelperMedium(c, o)
⟶ THREE.MeshBasicMaterialBox(wx, wy, wz, m)
⟶ THREE.MeshPolyeder(p, m)
⟶ THREE.MeshP2(x, y, z)
⟶ THREE.Vector2Shape(p)
⟶ THREE.ShapeRing(r0, r1, a0, a1, n)
⟶ THREE.ShapeExtruded(s, l, m)
⟶ THREE.MeshEdges(o, ls)
⟶ THREE.LineSegmentsDraw(b, o)
Label(t, p, a, c, s)
Text(t, x, y, a, c, s)
Note that Label
and Text
add the labels directly to the figure. These labels are not part of the scene, but become part of the SVG-image in separate groups.
They appear in front of all other objects.
Texts and Labels accept standard HTML character entities: α β γ δ ⟶ α β γ δ. The HTML-tags <sub></sub> and <sup></sup> can be used for formatting subscripts and superscripts, respectively: |E<sub>y</sub>|<sup>2</sub> ⟶ |Ey|2.
Lineup of some Fig3 elementary objects, use of the wrapper functions
Pacman in 3D
Geometry of a dielectric optical rib waveguide
A dielectric step for semi-guided optical waves, schematically
An integrated optical microresonator with racetrack-shaped cavity