Below, you’ll find a detailed guide on how to add the 3D viewer – Embed 3D Models on WordPress Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the 3D viewer – Embed 3D Models on WordPress Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the 3D viewer – Embed 3D Models on WordPress Plugin and the shortcodes it provides:
"3D Viewer – Embed 3D Models on WordPress is a dynamic plugin that empowers you to seamlessly integrate and display 3D models within your WordPress site. Perfect for artists, architects, and 3D enthusiasts."
- [3d_viewer]
- [3d_viewer_product]
3D viewer – Embed 3D Models on WordPress [3d_viewer] Shortcode
The 3D Viewer shortcode is a feature that allows embedding of 3D models in your WordPress posts. It extracts attributes such as id, source, alt, width, height, auto-rotate, camera controls, zooming, loading, and poster. The shortcode fetches the post type and checks if it’s a 3D model viewer or product. If the post uses Gutenberg, it renders the block. The shortcode also retrieves meta data for the 3D model, including source type, model links, and posters. It then prepares the final data array with all necessary parameters. Lastly, it outputs a div with the 3D model viewer and enqueues necessary scripts and styles.
Shortcode: [3d_viewer]
Parameters
Here is a list of all possible 3d_viewer shortcode parameters and attributes:
id– Unique identifier of the 3D modelsrc– Source URL of the 3D modelalt– Alternative text for the 3D modelwidth– Width of the 3D viewerheight– Height of the 3D viewerauto_rotate– Auto-rotate setting for the 3D modelcamera_controls– Camera control settings for the 3D viewerzooming_3d– Zoom setting for the 3D viewerloading– Loading setting for the 3D viewerposter– Poster image for the 3D viewer
Examples and Usage
Basic example – Display a 3D model by referencing its ID.
[3d_viewer id=1 /]Advanced examples
Display a 3D model by referencing its ID, and define the source, alt text, width and height.
[3d_viewer id=1 src="model.obj" alt="3D Model" width="500px" height="500px" /]Display a 3D model with auto-rotate enabled, camera controls, and a custom loading message.
[3d_viewer id=1 auto_rotate="yes" camera_controls="yes" loading="Loading 3D model..." /]Display a 3D model with a poster image that is displayed before the model is loaded.
[3d_viewer id=1 poster="poster.jpg" /]Display a 3D model with zooming enabled.
[3d_viewer id=1 zooming_3d="yes" /]PHP Function Code
In case you have difficulties debugging what causing issues with [3d_viewer] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('3d_viewer', [$this, 'bp3dviewer_cpt_content_func']);Shortcode PHP function:
function bp3dviewer_cpt_content_func( $atts ){
extract( shortcode_atts( array(
'id' => '',
'src' => '',
'alt' => '',
'width' => '100%',
'height' => 'auto',
'auto_rotate' => 'auto-rotate',
'camera_controls' => 'camera-controls',
'zooming_3d' => '',
'loading' => '',
'poster' => ''
), $atts ));
if(!$id){
return false;
}
$post_type = get_post_type($id);
$isGutenberg = get_post_meta($id, 'isGutenberg', true);
if(!in_array($post_type, ['bp3d-model-viewer', 'product'])){
return false;
}
if($isGutenberg){
$blocks = Block::getBlock($id);
return render_block($blocks);
}
ob_start();
$data = wp_parse_args( get_post_meta( $id, '_bp3dimages_', true ), $this->get3DViewerDefaultData());
if($data['bp_3d_src_type'] == 'upload'){
$modelSrc = $data['bp_3d_src']['url'];
}else {
$modelSrc = $data['bp_3d_src_link'];
}
$models = [];
if(isset($data['bp_3d_models']) && is_array($data['bp_3d_models'])){
foreach($data['bp_3d_models'] as $index => $model){
$models[] = [
'modelUrl' => $model['model_link'],
"useDecoder" => "none",
];
if(isset($data['bp_3d_posters'][$index]['poster_img'])){
$models[$index]['poster'] = $data['bp_3d_posters'][$index]['poster_img'];
}
}
}
$poster = $data['bp_3d_poster']['url'] ?? '';
$finalData = [
"align" => $data['bp_3d_align'],
"uniqueId" => "model$id",
"currentViewer" => $data['currentViewer'],
"multiple" => $data['bp_3d_model_type'] !== 'msimple',
"model" => [
"modelUrl" => $modelSrc,
"poster" => $poster
],
"O3DVSettings" => [
"isFullscreen" => $data['bp_3d_fullscreen'] == '1',
"isPagination" => $this->isset($data, 'show_thumbs', 0) === '1',
"isNavigation" => $this->isset($data, 'show_arrows', "1") === '1',
"camera" => null,
"mouseControl" => $data['bp_camera_control'] == '1',
],
"models" => $models,
"lazyLoad" => $data['bp_3d_loading'] === 'lazy', // maybe not needed
"loading" => $data['bp_3d_loading'], // maybe not needed
"autoplay" => (boolean) $data['bp_3d_autoplay'],
"shadow" => $data['3d_shadow_intensity'] != 0,
"autoRotate" => $data['bp_3d_rotate'] === '1',
"zoom" => $data['bp_3d_zooming'] === '1',
"isPagination" => $this->isset($data, 'show_thumbs', 0) === '1',
"isNavigation" => $this->isset($data, 'show_arrows', "1") === '1',
"preload" => 'auto', //$data['bp_3d_preloader'] == '1' ? 'auto' : $poster ? 'interaction' : 'auto',
'rotationPerSecond' => $data['3d_rotate_speed'],
"mouseControl" => $data['bp_camera_control'] == '1',
"fullscreen" => $data['bp_3d_fullscreen'] == '1',
"variant" => false,
"loadingPercentage" => $data['bp_model_progress_percent'] == '1',
"progressBar" => $data['bp_3d_progressbar'] == '1',
"rotate" => $data['bp_model_angle'] === '1',
"rotateAlongX" => $data['angle_property']['top'],
"rotateAlongY" => $data['angle_property']['right'],
"exposure" => $data['3d_exposure'],
"styles" => [
"width" => $data['bp_3d_width']['width'].$data['bp_3d_width']['unit'],
"height" => $data['bp_3d_height']['height'].$data['bp_3d_height']['unit'],
"bgColor" => $data['bp_model_bg'],
"progressBarColor" => $data['bp_model_progressbar_color'] ?? ''
],
"stylesheet" => null,
"additional" => [
"ID" => "",
"Class" => "",
"CSS" => $data['css'] ?? '',
],
"animation" => (boolean) false,
"woo" => (boolean) false,
"selectedAnimation" => ""
];
?>
<div class="modelViewerBlock" data-attributes='<?php echo esc_attr(wp_json_encode($finalData)) ?>'></div>
<?php
wp_enqueue_script('bp3d-front-end');
wp_enqueue_style('bp3d-custom-style');
wp_enqueue_style('bp3d-public');
return ob_get_clean();
}
Code file location:
3d-viewer/3d-viewer/inc/Shortcode/Shortcode.php3D viewer – Embed 3D Models on WordPress [3d_viewer_product] Shortcode
The 3D Viewer Product shortcode is a powerful tool for displaying 3D models of products on your WordPress site. This shortcode extracts the product ID and width from the attributes, checks if the post type is a product, and then starts output buffering. It then requires a config file from the WooCommerce directory. If there are no models or the array size is less than 1, it cleans the output buffer and returns. The shortcode enqueues necessary styles and scripts, and depending on the number of models and whether the carousel is enabled, it requires a different template file. The shortcode then generates a 3D model viewer with various custom attributes and options, including fullscreen mode. The output is then cleaned and returned.
Shortcode: [3d_viewer_product]
Parameters
Here is a list of all possible 3d_viewer_product shortcode parameters and attributes:
id– Unique identifier of the product post type.width– Defines the width of the 3D viewer display.
Examples and Usage
Basic example – Show a 3D model for a product by referencing the product ID.
[3d_viewer_product id=1 /]Advanced examples
Display a 3D model for a product by referencing the product ID and setting the width to 50%.
[3d_viewer_product id=1 width='50%' /]Display two 3D models for two different products by referencing their product IDs and setting the width to 75%.
[3d_viewer_product id=1 width='75%' /]
[3d_viewer_product id=2 width='75%' /]Display a 3D model for a product by referencing the product ID and setting the width to 100% (full width).
[3d_viewer_product id=1 width='100%' /]PHP Function Code
In case you have difficulties debugging what causing issues with [3d_viewer_product] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('3d_viewer_product', [$this, 'product_model_viewer']);Shortcode PHP function:
function product_model_viewer($attrs){
extract( shortcode_atts( array(
'id' => null,
'width' => '100%'
), $attrs ));
$post_type = get_post_type($id);
if(!in_array($post_type, ['product'])){
return false;
}
ob_start();
require(__DIR__).'./../Woocommerce/config.php';
if( !is_array($models) || sizeof($models) < 1){
return ob_get_clean();
}
wp_enqueue_style('bp3d-custom-style');
wp_enqueue_script('bp3d-slick');
wp_enqueue_script('bp3d-public');
?>
<!-- 3D Model html -->
<?php if( sizeof($models) > 1 && $carousel_enabled){
require(BP3D_TEMPLATE_PATH.'woocommerce_carousel.php');
} else {
?>
<div class="bp_grand" style="width:<?php echo esc_attr($width) ?>">
<div class="bp_model_parent b3dviewer-wrapper">
<model-viewer data-items="<?php echo esc_attr(wp_json_encode($models)) ?>" class="model" id="bp_model_id_<?php echo esc_attr($id); ?>" <?php echo esc_attr($model_autoplay); ?> ar shadow-intensity="<?php echo esc_attr($model_Shadow); ?>" src="<?php echo esc_url($models[0]['model_src'] ?? ''); ?>" alt="<?php echo esc_attr($alt); ?>" <?php echo esc_attr($camera_controls); ?> <?php echo $camera_orbit; ?> <?php echo esc_attr($zooming_3d); ?> loading="<?php echo esc_attr($loading); ?>" <?php echo esc_attr($auto_rotate); ?> <?php echo esc_attr($rotation_speed); ?> <?php echo esc_attr($rotation_delay); ?>
<?php
if(is_array($attribute)){
foreach($attribute as $key => $value){
echo "$key='$value'";
}
} ?>
>
<?php
if($settings_opt['bp_3d_progressbar'] !== '1') { ?>
<style> model-viewer<?php echo '#bp_model_id_'.esc_attr($id); ?>::part(default-progress-bar) {display:none;}</style>
<?php
}
?>
</model-viewer>
<?php foreach( $models as $model ){ ?>
<?php } ?>
<!-- Button -->
<?php if( $settings_opt['bp_3d_fullscreen'] == 1){ ?>
<?php require(BP3D_TEMPLATE_PATH.'fullscreen_buttons.php'); ?>
<?php } ?>
</div>
</div> <!-- End of Simple Model -->
<?php } ?>
<!-- Model Viewer Style -->
<style>
<?php echo '#bp_model_id_'.esc_attr($id); ?> {
width: 100%;
min-height: 340px;
background-color: <?php echo esc_attr($modeview_3d['bp_model_bg'] ?? '#fff'); ?>;
}
.fullscreen <?php echo "#bp_model_id_".esc_attr($id); ?>{
height: 100%;
}
model-viewer.model {
--poster-color: transparent;
}
</style>
<?php
return ob_get_clean();
}
Code file location:
3d-viewer/3d-viewer/inc/Shortcode/Shortcode.phpConclusion
Now that you’ve learned how to embed the 3D viewer – Embed 3D Models on WordPress Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply