Canvasio3D | next generation

3D-Viewer for WordPress

14.11.2020 updated

Thank you for your interest on our 3D-Plugin for WordPress

If you have any questions that are beyond the scope of this documentation, please feel free to contact us via email

Your team from virtuell werk | germany

Table of Contents

Back to Top

Plugin installation

Canvasio3D is an easy to install plugin, with that can you show and configure 3D-Models in your own WordPress website.*

  • Login to the dashboard of your Wordpress website (Thanks Wim!)
  • Go to the Plugins
  • Deactivate any existing Canvasio3D plugins
  • Click Add New plugin
  • Copy or type this text "Canvasio3D Light" and paste it in the search field
  • After installation and plugin activation should you now see “Canvasio3D Options” below on every edit page. (Scroll down to find it!)
  • To register: Click on the question mark and enter your license key to download
  • To activate: Go back to the plugins page and activate the latest installed plugin
  • After upgrade from Canvasio3D Light: Activate Canvasio3D in the plugins menu

Note: Canvasio3D did not run with the Block Editor. Please use the classic editor for WordPress with Canvasio3D!

Back to Top

First start with Canvasio3D

Canvasio3D is a 3D-Viewer that show your single 3D-Model or 3D-Scene interactive in your WordPress pages.

At first open- or create a new page in WordPress and scroll down to the Tab: "Canvasio3D Options"

  • Click than on "New scene" or "Scene select"
  • Click over New scene on "Model Settings" to upload or select a Model
  • Set the Model size / Down & Up if you needed
  • Click left top on "Scene Manager" and Save the scene
  • Copy & Paste the short-code entry in a page to show your Model
  • and click top right on "update" to save the page in WordPress
  • A short-code example to insert in your page: [Canvasio3D Scene=1]

After creating a "New scene" or "Scene select" can you use the Menu button above: "Model Settings"

Model upload:

To upload a Model for the selected scene, insert all data for one Model in a single folder and save this folder as zip-file, than click on the button:"3D-Object Upload (.zip)"

More infos: Model Zip-Folder

Model settings:

Also can you set in this menu the Model Size, the position with Down / Up and the Brightness for the uploaded model.

Back to Top

Canvasio3D | Plus and Pro version

Canvasio3D Plus and Pro supports more than one short-code entrys per page. So you can insert many 3D-Models in one page, but be careful not to load too much data, as this can slow down the loading time of the website considerably.

We recommended for a single model a size maximal of 15MB as zip-file or 30MB for a unpacked Model!

Width / Height: Set here the Window size in pixel (px) or in percent (%)

Color: Select a color for the background of your scene

Image: Select a image for the background of your scene

Color | Image: Select which background will shown

Camera Pan: With this switch can you enabled the right mouse to move the scene around

Camera Lock: This switch lock the camera view, so that a model floor cannot be viewed


In the Menu: "Button Settings" can you enable also the Wireframe view for the frontend

Back to Top

Canvasio3D | Pro and Woo version

Edit Material

Most models have one or more materials for different model parts. For example, in a car, one material set for the body in blue and another for all four wheels in black rubber.

Click a model part with the right mouse button to change its material set. Note that you always edit one material set that could also be assigned to different parts of your model!

After a right click can you change the selected material with the values of: roughness, metallic, transparency or color.

Edit Environment and Effects

Select here your Light-Set of your choice and scale the brightness


The Panorama that you can here load should be a 360° image for the background. We have prepared some pictures that you can found here: Panorama images download | Easy to un-zip and upload to your WordPress Media


If you looking for more panorama images visit a website like e.g. hdrihaven and select there ever the "8K Tonemapped JPG" to download



Animations with the glTF / glb file format

If you have 3D-Models with animation data loaded, can you setup it with the "Button Setup" top in the main menu


Thumbnails and Images to load a scene

You can use any WordPress image to load a different scene.

For this, enter at least one Canvasio3D short-code into your page and insert an image from your WordPress media in your page too. Than edit the alt entry like this: alt="area=1,scene=1" or alt="scene=1" if you have only one 3D-Area window in your page.

Also need you add caImage in the class entry of this image like class="caImage ..."

After updaten the Page can you now click this image in the Frontend, to load the scene that is enter in the "alt" value.


Model upload for login user

In the button menu can you now activate the model upload for the Frontend, where login user can upload there own model as zip file. Also you get an eMail by this upload with the upload url.

Back to Top

Canvasio3D | Woo version

Your 3D-Item in WooCommerce with 360° smooth rotation and zooming

To use Canvasio3D with your WooCommerce shop is real very easy.

Open a WooCommerce product page and configure your items in WooCommerce, like you always do.

Insert a short code in the product page in the text field on the top and change the scene number entry to: "WooCommerce". For example: [Canvasio3D Scene=WooCommerce] and save your page.

After configure you WooCommerce Items, click on the Woo-Icon in Canvasio3D to open the menu. (This Icon is only shown, if you have a product page open.)

For a single item only, click in the Canvasio3D Menu on: "Assign Scene to product". (If you have only a Single product, do you need not to use the Canvasio3D drop down: "Main product item". Load here only a saved Scene like "Scene 1" and click on the button: "Assign to product" and than save your product page.)

To use 3D-Models with WooCommerce variations, simpel select your WooCommerce Item in the drop-down menu of Canvasio3D and than select the Scene for it and click on "Assign Scene to product". After it, save your product page.

Also is it possible to display of high-quality diamonds for your 3D-Jewelry. For this load your 3D-Model, click on "Crystal material select" and select a "Diamant"-Part of your model. Than save- and reload your Model.

If several 3D parts are to be "diamonds" in Canvasio3D, all these parts must have the same initial name and an underlined after it e.g. diamant_ - What comes after the underline does not matter, just like the initial name itself.

If you like to show a Video in you 3D-Scene are there two ways: First upload you Video with the WordPress media manager. Open than the Canvasio3D Effects menu, select your Video and switch the Video plane on.

Or you can use a Video Texture of your own 3D-Model after uploading your Video in WordPress. For this open your 3D-Model in a 3D-Program like Blender and edit there the Material of a Model part. Than enter the material name: "caVideo" for this part. The Video plays automatically, when your 3D-Model is loaded in Canvasio3D only if a Video URL is inserted in the Effects menu!

Please note: The Canvasio3D 3D-Feature for WooCommerce can only be displayed in the front page, if the standard function of the WooCommerce product image has not been changed! (This can happen for example by using a special WooCommerce template or plugin.)

Back to Top

Problem solutions

Block Editor message:
Canvasio3D did not run with the Block Editor. So please switch to the classic WordPress Editor, that you can download here.

Layout & Graphic problems after update:
-Simple clear the browser cache and reload the page

Uploaded Model not loaded:
- Canvasio3D has a upload limit of 70MB for an zip-file
- 3D-Model data with 100MB or more do not run in most browser
- Model can be to big or small, for this use the scale slider to adapt it
- The data is packed in a subdirectory of the zip-file, so Canvasio3D can not find it
- Sometimes can the data be broken, so test it with a free programm like Blender
- The name of an .obj file should be the same, e.g. myModel.obj and myModel.mtl - Loading the 3D-Models takes far too long and maybe this tutorial will help you
- [Please make sure that there are no spaces in the name of the file, ...
... this sometimes confuses the file system of WordPress and is not yet ...
... "intercepted" by Canvasio3D.]
- By loading problems with Firefox can you try an addon called “CORS Everywhere” (Thanks Dustin)


Model is only black after loading (.obj format)
The .obj file format stores all material information in a separate .mtl file, where also are the entries for textures. By exporting of an model can it be, that this entries are not correct. To check it, open the .mtl file with a standard text editor like notepad and search for entries that begins with: map_Kd. After it should only be the name of the texture like e.g.: map_Kd modelTexture.jpg

The response is not a valid JSON response:
Switch to the classic WordPress Editor (Canvasio3D did not run with the Block Editor)

Rotation of the Model are not correct:
Canvasio3D rotate ever the camera around the x,y,z world coordinates, so maybe it can help to set the 3D-Model in a better position with e.g. Blender
Back to Top

Model file formats in Canvasio3D

STL file format:

This format is a simply geometry format and has no material entries for e.g. colors, but you can set one Material for it with Canvasio3D Pro


OBJ & MTL file format:

This format is not the best for online presentation in browsres but it is popular and can be most simply export with many 3D-Programs. Animation data are here not included and the settings for the material entries are stored in the separat .mtl file.

Sometimes can it be with this format, that the 3D-Model shown only black. Mostly comes this when the texture entries in the .mtl file are not correct or the .mtl file was not right exported.


glTF and GLB file format:

This compact format was developed for some time specifically to display in browser and we would like recommended it for the most 3D-Model presentation in Canvasio3D. It has good material settings and can also stored animation data that you can use in Canvasio3D.

More informations about this file format can you find here

Back to Top

Model data in a Zip-Folder

Many 3D-Models are very large in MB and therefore it takes a long time to upload them. Therefore we have decided to upload the 3D-models only via zip-file, that will stored in the upload directory of your WordPress website.

It is simple to made a zip file for your 3D-Model:
-First create a new folder
-Insert here all the data for one 3D-Model
-Make sure that the data is not in a subfolder!
-Create only this folder to a zip-file and that's it!
-Now you can upload this zip-file to Canvasio3D
Back to Top

Software Disclaimer

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


*Since March 2011, WebGL is supported by Google’s Chrome and Mozilla’s Firefox Web browser, and is enabled by default in browser prerelease versions of Safari and Opera. WebGL requires a 3D hardware acceleration (3D graphics card / 3D chip). Source: Wikipedia