Creating VR 3D rotations (Virtual reality 3D)

Like if this Guide is helpful

Create 3D rotating images to display products on webpages

See an example at: www.anitareay.com/360/frogvase

I use a software program called 3D Rotate Tool (www.yofla.com) to create the 360 degree animation
You will also need:
A camera with a 'continuous shoot' option (use a smaller image size if you don't have a fast card)
Tripod
Battery operated turntable (used for collectable/jewellery displays)
Lighting (unless you shoot in a well lit spot outdoors)
Photoshop (or similar with batch editing capability)
Web hosting

Set up the shoot with the camera focused on the piece and turn the turntable switched on, hold down the button on the camera (in continuous shoot mode) until the object has completed one full rotation

Before you can begin the editing on the images you will need to create some photoshop actions, this only needs to be done once (except for 'crop' which you will need to create for each new subject as collectables are not always the same size and shape)

To create a Photoshop Action:

(You will need to have an image open in order to create the actions)

From the window menu choose  Actions
The action window will open


Select New Action (top right corner)


Give the action a meaningful name, in this case we are going to create an action for auto contrast


Perform the action (ie select Image/ Auto Contrast)


Then press the square button at the bottom of the Action Window (this will stop any further recording for this action)


You will also need to create an action for any other editing you might require for your images such as Crop, Size (I choose to resize to 500W or 400H), Save to Web (the 'save to web 'action will need a dedicated folder created (I named my folder 360), also in the action include 'close without saving changes'.


Once you have your actions created you can batch edit your photos,

Open all of the photos from the continuous shoot (minimum number of images 18.. otherwise the animation appears too jerky)

Now you can batch edit:

From the File menu choose  Automate/ Batch


Select the action you wish to perform and click OK

All of the open images will now be edited identically

The last three batch edits you perform should be Crop, Size, Save for web

Once you have your images edited you can import them into 3D Rotate Tool

Select "Drop images here or click for load" and locate the folder that is storing the edited images


Then you can change the speed of the rotation, the advance settings let you choose which buttons viewers can use (I choose none)
Change the output size to custom and type in the size of your images


After creating the animation navigate to the folder just created (if you didn't choose a name it will be New Folder)

The folder will contain the following files, the folder and all the files will have to be uploaded to your web host, the index file is the only file you might want to edit.

To place the animation on in an ebay listing copy and paste the following code, replace 'yoursite.com/folder' with your hosting details, change the width and height to match your animation.
<div id="envelope">
<div id="flashwrapper" style="width: 400px; height: 324px;">
<div id="flashContent" style="width: 400px; height: 324px">
<div align="center">
<object id="player1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="324" name="player1">
<param name="movie" value="http://www.yoursite.com/folder/rotateTool.swf" />
<param name="allowfullscreen" value="true" />
<param name="scale" value="noScale" />
<param name="salign" value="lt" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="path=http://www.yoursite.com/folder/" />
<embed id="player1" width="400" height="324" src="http://www.yoursite.com/folder/rotateTool.swf" flashvars="path=http://www.yoursite.com/" allowfullscreen="true" allowscriptaccess="always" name="player1" scale="noScale" salign="lt"></embed>
</object>
</div>

I also provide a link to the site it's on as Safari users are unable to view flash animations.
See an example at: www.anitareay.com/360/frogvase

Have something to share, create your own Guide... Write a Guide
Explore more Guides