Include self hosted PlayCanvas in WordPress installation

bjorn.syse · August 10, 2018, 9:03am

Hi!

I have the need to include an animated interactive 3D model to a wordpress installation. I have identified the options of using Sketchfab, Unity or playcanvas. I’ve tried sketchfab which provide an easy embed code and also give me transparent background. I tried using the hosted playcanvas in an iframe but I feel it’s somewhat limited since I’m stuck with an iframe. I’d like to try and see if a self hosted version of the same work better.

However, I’m clueless on how to get the neccessary code into wordpress. I’m using a theme called Divi and they provide a nice Code module where I can place any code. It works fine for the embed and the iframe, but my question comes down to the self hosting of the assets. What’s the best practice on where and how should I place them (javascrip files and 3d assets and textures and everything) in order to refer to them in the Code module while editing my wordpress page?

Best regards.

Björn

jonalexfilms · August 11, 2018, 12:43am

You could potentially break down index.htnl into dependencias and the call function.

Add the engine and loading script through the wp_enqueue_script, and within your page build the actual scene through a Raw Script widget. You might need to replace relative paths for absolutes on your raw script widget.

Your assets folder should exist somewhere on your server.

Sorry for not being specific with the script names but I’m on my cell…

You could have in your WordPress root folder:

playcanvas/
   |__ scripts/ (all the common .js files)
   |__ scenes/ 
   ....|__6578906 (playcanvas scene folder)
    .........|__ game-script_.js
    .........|__ files/

bjorn.syse · August 13, 2018, 9:06am

Thanks @jonalexfilms for that answer, seems dooable! I’m trying right now but have a few followup questions.

This is what I’ve done so far:

I created a child theme and edited functions.php to include the following code. Suppose I can add more scripts or possibly other assets (css, json etc) using this method?

add_action('wp_enqueue_scripts', 'add_scripts');

function add_scripts(){
    wp_register_script( 'playcanvas-stable', '/playcanvas/playcanvas-stable.min.js', false, null, true);
    wp_enqueue_script( 'playcanvas-stable' );
}

I uploaded the entire playcanvas-folder to my wordpress intstallation root as such. I only have one scene, perhaps it looks bit different from yours then.

playcanvas/
   |__ files/ (all the assets)
   ....|__assets 
   .........|__ 10273296
   .........|__ 10273297 
   |__ game-script_.js
   |__ start__.js
   |__ loading__.js
   |__ etc...

This is my index.html:.

<!doctype html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="manifest" href="manifest.json">
    <style></style>
    <title>SIMS cube</title>
    <script src="playcanvas-stable.min.js"></script>
    <script>
        ASSET_PREFIX = "";
        SCRIPT_PREFIX = "";
        SCENE_PATH = "573169.json";
        CONTEXT_OPTIONS = {
            'antialias': true,
            'alpha': true,
            'preserveDrawingBuffer': false,
            'preferWebGl2': true
        };
        SCRIPTS = [ 10273369, 10273366, 10273389, 10273350, 10273313, 10273374, 10273373, 10273314, 10273372, 10273390, 10273326, 10273348, 10273312, 10273301, 10273292, 10273294, 10273293 ];
        CONFIG_FILENAME = "config.json";
        pc.script.legacy = false;
    </script>
</head>
<body>
    <script src="__start__.js"></script>
    <script src="__loading__.js"></script>
</body>
</html>

Out of this code, do I get it right if I need to include the following using wp_enqueue_script:

<script src="playcanvas-stable.min.js"></script>
Perhaps I need that inline code block, I could put it in a file called scene.js and enqueue I assume?
…?

And what do I need to include in the raw script widget which Divi calls the Code module?

Best regards

Björn

jonalexfilms · August 13, 2018, 1:11pm

That looks good.

I would add __start__.js and __loading__.js to the wp_enqueue_script as well. Those should be common too.

I know there is a way to have those 2 scripts load in your footer… But can’t think of the script now.

This should be your embeded raw script:

<script>
        ASSET_PREFIX = "/playcanvas/scenes/10273296/";
        SCRIPT_PREFIX = "/playcanvas/scenes/10273296/";
        SCENE_PATH = "/playcanvas/scenes/10273296/573169.json";
        CONTEXT_OPTIONS = {
            'antialias': true,
            'alpha': true,
            'preserveDrawingBuffer': false,
            'preferWebGl2': true
        };
        SCRIPTS = [ 10273369, 10273366, 10273389, 10273350, 10273313, 10273374, 10273373, 10273314, 10273372, 10273390, 10273326, 10273348, 10273312, 10273301, 10273292, 10273294, 10273293 ];
        CONFIG_FILENAME = "/playcanvas/scenes/10273296/config.json";
        pc.script.legacy = false;
    </script>

Notice the paths to your playcanvas folder.

That should get you going.

bjorn.syse · August 13, 2018, 1:39pm

Ok interesting. Thanks. I’ve now updated my functions.php to include this instead:

<?php 

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' ); 
add_action('wp_enqueue_scripts', 'add_scripts');

function add_scripts(){
    wp_register_script( 'playcanvas-stable', '/playcanvas/playcanvas-stable.min.js', $deps = array(), $ver = false, $in_footer = false);
    wp_register_script( 'start', '/playcanvas/__start__.js.', $deps = array(), $ver = false, $in_footer = true);
    wp_register_script( 'loading', '/playcanvas/__loading__.js', $deps = array(), $ver = false, $in_footer = true);
    
    wp_enqueue_script( 'playcanvas-stable' );
    wp_enqueue_script( 'start' );
    wp_enqueue_script( 'loading' );
}

function my_enqueue_assets() { 
    wp_enqueue_style( 'playcanvas-style', '/playcanvas/styles.css' ); 

}

There is that $in_footer option which I added to the last two. Was that your intention?

in the Code module I’ve added this code, I never got why you used 10273296, can you please explain that? Those numbered folders in my files/assets/folder only carry 3d files and textures. I see no scripts in those.

<script>
  ASSET_PREFIX = "/dev/playcanvas/files/assets/";
SCRIPT_PREFIX = "/dev/playcanvas/files/assets/";
SCENE_PATH = "/dev/playcanvas/573169.json";
CONTEXT_OPTIONS = {
    'antialias': true,
    'alpha': true,
    'preserveDrawingBuffer': false,
    'preferWebGl2': true
};
SCRIPTS = [ 10273369, 10273366, 10273389, 10273350, 10273313, 10273374, 10273373, 10273314, 10273372, 10273390, 10273326, 10273348, 10273312, 10273301, 10273292, 10273294, 10273293 ];
CONFIG_FILENAME = "/dev/playcanvas/config.json";
pc.script.legacy = false;
</script>

Does this code make sense? (it dost not work right of the bat, perhaps I’m missing something).
Are you sure that inline script statement is what creates the canvas and places the webgl piece?

bjorn.syse · August 14, 2018, 7:54am

Hi again

Now I’ve managed to get further! This is the setup and code that is working for me:

Included in functions.php I’ve added only the playcanvas-stable and the stylesheet that came with the download of my playcanvas code. as such:

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' ); 

function my_enqueue_assets() { 

    wp_register_script( 'playcanvas-stable', '/playcanvas/playcanvas-stable.min.js', $deps = array(), $ver = false, $in_footer = false);
    wp_enqueue_script( 'playcanvas-stable' );
    wp_enqueue_style( 'styles', '/playcanvas/styles.css' );
}

Then, in the code module within my page builder in wordpress, I added this inline script and the reference to start and loading scripts:

<script>
ASSET_PREFIX = "/dev/playcanvas/";
SCRIPT_PREFIX = "/dev/playcanvas/";
SCENE_PATH = "/dev/playcanvas/573169.json";
CONTEXT_OPTIONS = {
    'antialias': true,
    'alpha': true,
    'preserveDrawingBuffer': false,
    'preferWebGl2': true
};
SCRIPTS = [ 10273369, 10273366, 10273389, 10273350, 10273313, 10273374, 10273373, 10273314, 10273372, 10273390, 10273326, 10273348, 10273312, 10273301, 10273292, 10273294, 10273293 ];
CONFIG_FILENAME = "/dev/playcanvas/config.json";
pc.script.legacy = false;
</script>

<script type='text/javascript' src='http://www.simsmining.eu/dev/playcanvas/__start__.js.?ver=4.9.8'></script>
<script type='text/javascript' src='http://www.simsmining.eu/dev/playcanvas/__loading__.js?ver=4.9.8'></script>

The application loads! no errors in the console.

Now however, I’m fighting with the CSS to figure out how to contain it in the page where I defined the code module. Seems by default it’s set to span the entire with and height of the windows somehow. Looks awful in my case.

Any clues? This is the styles.css included:

html {
    height: 100%;
    background-color: #1d292c;
}
body {
    margin: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #1d292c;
    font-family: Helvetica, arial, sans-serif;
    position: relative;
    width: 100%;

    -webkit-tap-highlight-color: transparent;
}

#application-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#application-canvas.fill-mode-NONE {
    margin: auto;
}
#application-canvas.fill-mode-KEEP_ASPECT {
    width: 100%;
    height: auto;
    margin: 0;
}
#application-canvas.fill-mode-FILL_WINDOW {
    width: 100%;
    height: 100%;
    margin: 0;
}

canvas:focus {
    outline: none;
}

Regards

Björn

bjorn.syse · August 14, 2018, 8:02am

I tried removing this part below and indeed the application moved to the bottom of the page.

    display: block;
    position: absolute;

Seems the code in start_.js creates the canvas as a direct child to the Body element, and I’d like it to follow page flow right where I put the script/code module in my wordpress page. How can that be achieved. Any clues @max ?

In the meantime I tried adding this code after my __start__.js and __loading__.js. Seems to change things indeed, but also feels like a hack somehow.

<div id="playcanvas-container"></div>
<script>
jQuery(document).ready(function ($) {
 $('#playcanvas-container').prepend($('#application-canvas'));
});
</script>

jonalexfilms · August 20, 2018, 3:20am

Hey @bjorn.syse ! sorry I was out for a bit, but glad to see that you’ve moved forward with this.

I visited http://www.simsmining.eu/dev/ and it seems you managed to get this working.

Tweaking loading.js and start.js is totally what I’ve done with most of my projects. That’s where I end up creating the style of my canvas and how it blends in with the rest of my project.

I’m actually in the middle of writing a webvr element into my current wordpress theme, where all the common assets are add through wp_enqueue and the rest is invoked per each page. I’ve even managed to create a form where I can input the starting scene, the assets/script path and the comma-separated list of scripts.

Much like you, I am now just tweaking CSS to get things play well together, but the hard part is done.

bjorn.syse · December 4, 2021, 1:08pm

Hi… I’m doing this exact setup now a couple of years later but things are not loading as they should. A problem with URL’s somehow. Wonder if someone please could help me shine a light on this. Has anything changed in how playcanvas tries to find it’s reference since a few years back or is this just a wordpress config issue?

Here is my code snippet I included where I would like the playcanvas component:

<script type='text/javascript' src='/nexgen/playcanvas/__settings__.js'></script>
<script type='text/javascript' src='/nexgen/playcanvas/__start__.js'></script>
<script type='text/javascript' src='/nexgen/playcanvas/__loading__.js'></script>
<div id="playcanvas-container"></div>

<script>
jQuery(document).ready(function ($) {
$("#application-canvas").detach().appendTo("#playcanvas-container");
});
</script>

playcanvas-stable.min and it’s styles.css is allready added since before in functions.php (wordpress) through my child theme. It looks like this:

<?php
function my_theme_enqueue_styles() { 
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_register_script( 'playcanvas-stable', '/playcanvas/playcanvas-stable.min.js', $deps = array(), $ver = false, $in_footer = false);
    wp_enqueue_script( 'playcanvas-stable' );
    wp_enqueue_style( 'styles', '/playcanvas/styles.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Wordpress is installed in /nexgenfolder in the www root. After that I have the playcanvas folder. However, The wordpress site it setup so that any direct visits to www.nexgensims.eu will end up in /nexgen installation.

I seem to be able to define the correc path for it to load the __settings__.js, __start__.js and __loading__.js BUT I get hundreds or errors in the console where it can’t find most of the assets since the path is not correct.

What can I do to get these relative path defined correctly?

yaustar · December 4, 2021, 3:47pm

I’ve not configured PlayCanvas with Wordpress before but setting the ASSERT_PREFIX and SCRIPTS_PREFIX in __settings__.js should work.

What is the current content for __settings__.js and where are the assets hosted?

bjorn.syse · December 5, 2021, 7:31am

THANK you @yaustar, I had completely missed those two varibles were moved to __settings__.js but only added the prefix on the SCENE_PATH side. Now when I added /playcanvas/ to the prefixes things work as expected. Full __settings__.js:

ASSET_PREFIX = "/playcanvas/";
SCRIPT_PREFIX = "/playcanvas/";
SCENE_PATH = "/playcanvas/1258069.json";
CONTEXT_OPTIONS = {
    'antialias': true,
    'alpha': false,
    'preserveDrawingBuffer': false,
    'preferWebGl2': true,
    'powerPreference': "default"
};
SCRIPTS = [ 58492522, 58492423, 58492391, 58492440, 58492421, 58492367, 58492327, 58492524, 58492564, 58492520, 58492444, 58492407, 58492434, 58492408, 58492439, 58492322, 58492472, 58492379, 58492378, 58492370, 58492563, 58492356, 61600834, 58492521 ];
CONFIG_FILENAME = "/playcanvas/config.json";
INPUT_SETTINGS = {
    useKeyboard: true,
    useMouse: true,
    useGamepads: false,
    useTouch: true
};
pc.script.legacy = false;
PRELOAD_MODULES = [
];

bjorn.syse · December 5, 2021, 9:44am

Follow-up question. I saw this addition under PRELOAD_MODULES when i added basis. Will I have to add the prefix in these places too or will it be prefixed?