This plugin uses the WebGL technology to display 3D models on web pages. At this page, you find a quick guide for it’s mechanism and use cases.

See Full Playlist  Subscribe

How it Works #

This plugin is developed to help you load 3D models on any part of your website’s front-end. Loading a model is as easy as inserting a shortcode in the content. The shortcode you want to use is [aml]. Then you can customize the output with too many options that you see on the “Options” column.

Each option has a default value. Meaning if you don’t use that option in your shortcode, the default value of that option will be applied. But, when you set an option in the shortcode, its value will override the default value for that specific output.

Example #1 #

The shortcode below loads a 3D model from the address “wp-content/uploads/3d/example.glb”:

[aml model=”wp-content/uploads/3d/example.glb”]

Example #2 #

You can use as many options as needed for customizing the output to match it with the desired apppearance fully. In the example below we are using multiple options and leave the rest. The un-assigned options will automatically use the default values.

[aml model=”wp-content/uploads/3d/example.glb” position=”fixed” top=”0″ left=”0″ z_index=”9″ fov=”0.5″]

In the example above, we have use the “model” and “fov” (Field of View) options that affects on the WebGL part of the code and “position”, “z_index”, “top”, and “left” options that changes the style of the output. So, we have control over both JavaScript and CSS of the canvas.

Note #

• The 3D models supported by this plugin are .glb and .gltf that are the common formats for WebGL.
• This plugin uses Babylon.js to handle the output and since it’s a JavaScript framework, the output may not work in the browsers with JavaScript disabled.
• 3D models are heavy in size. The best practice is making sure the file sizes are optimized and the models are low poly enough to be loaded via the internet in a reasonable time.

Options #

Option	Default
model	assets/3d/default.glb
position	relative
display	block
top	auto
right	auto
bottom	auto
left	auto
width	100%
height	100%
z_index	1
light	hemispheric
light_intensity	0.7
canvas_background	rgba(0, 0, 0, 1)
canvas_opacity	1
model_size	1
model_position	0,0,0
model_rotation	0,0,0
model_auto_rotation	false
model_auto_rotation_speed	0.01
model_animation	false
min_zoom	2
max_zoom	20
min_polar_angle	0
max_polar_angle	3.14
zoom_speed	1
fov	0.8
double_sided	true