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!

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.

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

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.

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.)

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

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.

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

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.