Canvasio3D Light | English Documentation

Thank 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 email via our user page contact form here.

Your team from virtuell werk

More information about Canvasio3D Online Visit or Website Contact Us

Install the 3D-Plugin 3D-Model Upload Software Disclaimer

A new 3D object window Adaptation of a 3D object window New in Version 1.2.4

Text commands: Object window Text commands: 3D-Model Code example

Plugin installation:

Canvasio3D is an easy to install Plugin that you can show 3D models of various formats in WordPress*. Now Responsive and with Touch Screen function.

Login to your WordPress admin area
Move the mouse left to the menu: Plugins
Click on the popup: Add New
On the next page under the title "Install Plugins" click on Upload
Then click the button: "Browse ..."
and select the file "canvasio3D.zip"
Activate the Canvasio3D Plugin after installation

Before any further install, please deactivated and delete the latest version of Canvasio3D plugin!

Upload a 3D-Model:

To upload a 3D-Model, select left on the WordPress Menu the Media-Button and then click "Add New".

A 3D model can consist of multiple files, that you can simply upload with the Media Manager of WordPress. Possible 3D formats are:

.stl
.obj
.mtl
.dae
.js (Three.js)

and the usual image formats such as: .jpg / .png, or .gif.

The file name of a 3D model in the format: .obj with associated .mtl file must be the same, such as: 3D_Model.obj and 3D_Model.mtl.

When a 3D model is displayed only black, it might be due to a texture that can not be loaded. Pay attention to uppercase and lowercase letters of the file name of the model texture, especially in the ending such as:. .Jpg or .JPG.

A new 3D object window:

Create a new page in WordPress and click the top of the menu selection on the tab "Visual".
A click in the icon list on the right icon: "3D" adds that text in your wordpress page:

Highlight with your mouse to only three points in objPath "..." and click the WordPress button "Add Media".

After selection of a 3D object in the WordPress Media Manager, the URL is inserted at the position of the three points.

Save the page and look at the preview.

Eventually, the 3D model is represented too large or too small and is therefore not to be seen. For a good view of the 3D object, you simply change the value of objScale = "0.50" into a far higher or lower value, for example: 5.00 or 0.05.

Adaptation of a 3D object window:

Every 3D object window in Canvasio3D needs a simple Text area to display a 3D-Model in a WordPress side. Every text area begins with:
[canvasio3D ... ] and ends with: [/canvasio3D]. Instead of the ... you can write single text commands like: color="#FFFFFF"

Canvasio3D offers many opportunities customize object windows. Just add more text commands, or remove existing ones for a single 3D-Object window. You might want a frame around a window object? Then simply write: border = "2" inside the text area for a Canvasio3D object window, thus:
[canvasio3D border=“2“ ][/canvasio3D]

The value 2 here indicates the strength with which the frame is to be shown.

All text commands needs a blank to separation and a single text command are ever: command = "value"

3D-Window
3D-Model

3D-Window | Shortcode commands:

width=" " ( Width of the 3D-Window – Number – Maximum: 940 )
height=" " ( Height of the 3D-Window – Number – Maximum: 940 )
text=" " ( Info text in the 3D-Window )
textCol=" " ( Text color in hex color value e.g.: #FF9900 )
border=" " ( Frame thickness e.g.: 3 – Number )
borderCol=" " ( Frame color in hex color value e.g.: #dddddd )
backCol=" " ( Background color of the 3D-Window in hex color value e.g.: #FFFFFF )
dropShadow=" " ( Frame shadow of the 3D-Window e.g.: 4 – Number )
loadingText=" " ( Alternative text instead of "Loading ..." )
Help=" " ( on / off - Shows errors over the 3D-Window )

3D-Model | Shortcode commands:

objPath=" " ( URL for a 3D-Model. File formats: .stl / Three-.js / .obj & .mtl / .dae )
mousewheel=" " ( on / off | disabled or enabled the mousewheel )
vector=" " ( on / off | show the model as wireframe / vector-model )
objScale=" " ( Size of the 3D-Model e.g.: 0.05 – Number )
objColor=" " ( Color of the 3D-Model into hex color value e.g.: #FFFFFF )
texturPath=" " ( URL for a texture – not possible for the STL-Format )
shine=" " ( Sheen in hex color value e.g.: #FFFFFF )
ambient=" " ( Brightness of the Model in hex color value e.g.: #FFFFFF )
lightSet=" " ( Different illuminations / 1 to 8 – Number )
mouse=" " ( On / Off – Mouse click & Mouse weel functions )
rollMode=" " ( Auto / MouseOver – Rotation of the 3D-Model | "off" for auto rotate without mouse move)
rollSpeedH=" " ( 0 to ca. 20 – Horizontal rotation - Number )
rollSpeedV=" " ( 0 to ca. 20 – Vertical rotation - Number )
zoom=" " ( Camera zoom – Number )
objPath=" " ( box, ball, panel, octa, torus - Implemented alternative 3D-Models)
floor=" " ( On / Off - Switch floor)
floorHeight=" " ( 42 is defaul - Number )
reflection=" " ( fire, marvel, points, ruge, silver, spot, stars, water, shine1, shine2, shine3 - Custom 3D-Model reflection )
refVal=" " ( 1 to 10 - Strength of the 3D-Model reflection )
objShadow=" " ( On / Off - Enabled the 3D-Model Shadow )
lightRotate=" " ( On / Off - Enabled rotation of the Light Sets )

Code example

In all code examples please replace the “…” with your URL! (Path for your 3D object / Texture)

Text entry for a standard object window :

[canvasio3D objPath="..." width="280" height="220" objScale="0.50" lightSet="1" Mouse="on"][/canvasio3D]

Object window with automatic Y-Rotation :

[canvasio3D objPath="..." width="280" height="220" objScale="0.50" lightSet="1" rollSpeedY="10" rollMode="auto"][/canvasio3D]

Object window with automatic X- and Y-Rotation with “mouse over” :

[canvasio3D objPath="..." width="280" height="220" objScale="0.50" lightSet="1" rollSpeedX="5" rollSpeedY="10" rollMode="MouseOver"][/canvasio3D]

Standard object window with frame, gray background and frame shadow :

[canvasio3D objPath="..." width="280" height="220" objScale="0.50" lightSet="1" Mouse="on" border="2" backCol="f6f6f6" dropShadow="4"][/canvasio3D]

Object window with frame, gray background, frame shadow and object reflection :

[canvasio3D objPath="..." width="280" height="220" objScale="0.50" lightSet="1" Mouse="on" border="2" backCol="f6f6f6" dropShadow="4" reflection="shine2" refVal="5"][/canvasio3D]

Object window with Reflection, Object Shadow and Floor :

[canvasio3D objPath="..." width="280" height="220" objScale="0.50" lightSet="5" reflection="shine3" refVal="5" floor="on" floorHeight="42"][/canvasio3D]

ChangeLog

Version 1.2.4 --------------------------------------------------------------------------------------------------------------------------------------------

- Update auf Three.js V73
- Bug removed for reflections
- Now compatible to Canvasio3D Pro

Version 1.2.3 --------------------------------------------------------------------------------------------------------------------------------------------

- Update to Three.js V71
- Added new command: "Help" for support
- Code optimize
- default .stl Model added

Version 1.1.8 --------------------------------------------------------------------------------------------------------------------------------------------

BugFixes:
- Fixed a bug when displaying "Loading ..."
- Representation corrects own object color for: .obj / .js
- Corrected values of the Light Sets

New functions:
- New Light Sets 9 and 10 added.
- Added Light-Rotation. New text command: lightRotate="on"

Version 1.1.7 --------------------------------------------------------------------------------------------------------------------------------------------

BugFixes:
- New Loaderfunction for 3D-Objects: .js / .obj

Neue Funktionen:
- Improved representation of the object material

Version 1.1.5 --------------------------------------------------------------------------------------------------------------------------------------------

BugFixes:
- Fixed startup problem on some templates
- Update to Three.js V66 -

Neue Funktionen:
- Load Custom background image for each object window (Change ... with Image-URL). New text command: backImg="..."

Version 1.1.3 --------------------------------------------------------------------------------------------------------------------------------------------

BugFixes:
- Loader speed optimize
- Optimized memory requirement
- ObjectWindow scaling improved (Responsive function)
- Update to Three.js V65 -

New functions:
- Standard entry extended (On press of the 3D-Icon in the text editor)
- rollSpeedX is no longer supported. New text command: rollSpeedV=" "
- rollSpeedY is no longer supported. New text command: rollSpeedH=" "

Version 1.1.2 --------------------------------------------------------------------------------------------------------------------------------------------

BugFixes:
- Loader for the .obj Format optimize
- LightSet 5,6,7 and 8 for shadow function adjusted
- Revised to display the floor

New functions:
- Floor height is now adjustable. New Command: floorHeight=" "
- Added object shadow. New Command: objShadow=" "

Version 1.1.0 --------------------------------------------------------------------------------------------------------------------------------------------

BugFixes:
- .obj Format corrected. Some .obj Format Files did not display correctly
- .obj Format / The command objCol works now correct together with a layer Texture
- The commands: loadingText, ambient and shine are now working in multiple Object Windows
- Speed obtimize for Object Windows
- All LightSets improved

New functions:
- LightSet 8 added
- Loading progress in percent implemented
- Custom Object Reflection added. New Commands: reflection =" " and refVal = " "

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