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).
See the Three.js documentation first.
Fig3 provides the container Scene (capitalization) of type
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
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
rotateZ for rotating, and
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
P3(x, y, z)⟶
Linestyle(c, w)⟶ THREE.LineBasicMaterial
Line(p, ls)⟶ THREE.Line
Ellipse(rx, ry, a0, a1, n, ls)⟶ THREE.Line
Curve(p, n, ls)⟶ THREE.Line
Arrow(p0, p1, ls, l, w)⟶ THREE.ArrowHelper
Medium(c, o)⟶ THREE.MeshBasicMaterial
Box(wx, wy, wz, m)⟶ THREE.Mesh
Polyeder(p, m)⟶ THREE.Mesh
P2(x, y, z)⟶ THREE.Vector2
Ring(r0, r1, a0, a1, n)⟶ THREE.Shape
Extruded(s, l, m)⟶ THREE.Mesh
Edges(o, ls)⟶ THREE.LineSegments
Label(t, p, a, c, s)
Text(t, x, y, a, c, s)
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