Canvasio3D | next generation
3D-Viewer for WordPress05.02.2021 updated
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
Canvasio3D is an easy to install plugin, with that can you show and configure 3D-Models in your own WordPress website.*
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"
After creating a "New scene" or "Scene select" can you use the Menu button above: "Model Settings"
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
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
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.
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.
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.)
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 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.)
The response is not a valid JSON response:
You can try to ignore this message, or switch to the classic WordPress Editor
Layout & Graphic problems after update:
-Simple clear the browser cache and reload the page
If you need a 3D-Model for testing:
Click here to download
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
- The Model scaling 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, so maybe this tutorial will help you
- 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
Rotation of the Model are not correct:
Canvasio3D rotate ever the camera around the x,y,z world coordinates. Read our blog entry for more: About camera and model rotation
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
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- or more 3D-Models
-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
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