Sharing and embeddingWhen you publish an animation, you are given a unique
handle, for example LTQyNjcyMjI
You may embed a publication into your own website or blog using the following code: <iframe width="640" height="480" src="https://3dthis.com/play.htm?h=handle&autostart&nocontrols" frameborder="0" allowfullscreen></iframe> You may change width and height at your convenience. Note: There is no control over adult posts when you share an
animation. It is your responsibility to make sure that adult posts are
allowed when you share such content. |
The PhotoAnim JavaScript API V3.0
With the PhotoAnim JavaScript API, you may display and customize animations previously published on 3Dthis or you may create animations from scratch. Downloadable resources:
|
Starting from animations previously published on 3Dthis.comThis is the simplest way of using the PhotoAnim API: You first publish an animation created with one of our various online 3Dthis apps, you download it and play it as follows:
|
|
The easy way: standard player in an <iframe>Download following 2 files and save them to the same folder as your
html page: width and height may be adjusted to match your page layout. Following options can be added to the paplayer.htm query string: Example:
|
|
Implementing your own playerImplementing your own player allows customizing your animation:
You may define your own start/stop buttons, add additional controls like
brightness, contrast, implement collision detection, give user control
to different objects... Possibilities are endless... | |
Example 1: Implementing Start/Stop buttons and Brightness/Contrast
sliders
|
|
Example 2: Collision detection Two spheres are produced with
PhotoAnim for Windows and randomly animated using the 3Dthis animation
editor. A collision detection is added, when a sphere hits the other
one... It happens that spheres capture each other, which produces
funny effects... |
|
Example 3: Individual objects detection and move A static
sphere and cylinder are produced with PhotoAnim for Windows. Mouse
capture is implemented to detect when mouse is over an object. The
object can then be dragged.
|
|
Creating animations from scratch This is best explained using a few examples. You will find the
full PhotoAnim API reference
here and the
JavaScript API file here. | |
Example 1: The minimum animation In this example, we will simply rotate a square picture around the Y
axis (horizontal rotation). |
|
header The bgrdcolor property is mandatory, format is [r, g, b, a] (red, green, blue, alpha), with values from 0 to 1. alpha defines the full animation opacity. vertices Each entry into vertices is 7 values, namely x, y, z, trajx, nx, ny, nz. x, y, z, define a point in space coordinates, nx, ny, nz, corresponding normals, trajx is used for trajectories (see reference). Coordinates are relative to scenery center, with x pointing right, y pointing up, z pointing towards viewer, in the range 0 to 1. Normals can be set to 0 and computed using method calcNormals(vertices), see Example 2. In the above example, 4 vertices are defined, one at each corner of a square. texcoord - texture coordinates Each entry into texcoord is 2 values, namely u,v and total number of entries should be same as in vertices. u, v define a point from the texture image, u, v coordinates are relative to texture top left, u towards right and v towards bottom, in the range 0, 1. In the above example, 4 texture points are defined, one at each corner of the square texture image. triangles Triangles join vertices together to define surfaces. Each entry into triangles is 3 values, indexes into vertices/7, namely vx1, vx2, vx3. Triangles should be oriented external face CCW for lighting purposes. In the above example, 2 triangles are defined to form a square. mesh |
|
Example 2: Displaying and animating an STL model STL is a very
simple 3D file format, mainly used by 3D printers. This script converts
a binary STL file and
displays the model. |
|
STL files define volume only, not textures. The PhotoAnim API always
need textures, even to display solid colors. So in this case we use a
small 16x16 texture image "yellow.png" and set all texcoord to .5, .5
(middle of texture). Untextured objects need light to be displayed properly, so we define light properties "shading" and "specular". startWebGL is called when the stl file is loaded and parsed. LoadStlFile does an Ajax request to load the "duck.stl" file as a byte array parseBinStl gets vertices x, y, z values and adds triangles. As we need vertices normals, the triangle normals from the stl file are ignored and the method calcNormals is called once, followed by refreshVertices to update the graphic card. For a good computation of vertices normals, duplicated vertices are removed in addVertex. Also, the model is centered and scaled with normVertices |
|
Example 3: Adding a background image and updating texture
|
|
More examples from the API documentation |
|
LicensingThe PhotoAnim API is licensed under Creative Commons CC BY You are free to:
If you use the PhotoAnim API, then we kindly request you to give credit
to 3Dthis.com, by copy/pasting the following piece of code to your site: |