Using PlayCanvas Engine Offline

Help & Support
1

I wanted to use playcanvas completely offline, i came to know that editor is not available offline but the engine can be installed. I couldnt find any documentation or tutorials on how to use the engine offline. For now, I have downloaded the engine and used npm i and npm build and the build is complete. If anyone could guide me on creating a basic blank scene from here, it would be much appreciated. I dont have much prior knowledge in js and js libraries. Thank you :slight_smile:

1 Like
2

Hi @Afeloth,

You can start with the most basic example on how to render a simple scene that includes a camera, light and a cube here:

When working directly with the engine the best place to find relevant code is the engine examples page here:
https://playcanvas.github.io/

All examples use the same React boilerplate template which may be useful to take a look at:

3 Likes
3

Here’s a single file example of how to use the engine. Save it as index.html and load into your browser:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayCanvas Hello Cube</title>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src='https://code.playcanvas.com/playcanvas-stable.min.js'></script>
</head>
<body>
    <canvas id='application'></canvas>
    <script>
        // create a PlayCanvas application
        var canvas = document.getElementById('application');
        var app = new pc.Application(canvas, { });
        app.start();

        // fill the available space at full resolution
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        // ensure canvas is resized when window changes size
        window.addEventListener('resize', function() {
            app.resizeCanvas();
        });

        // create box entity
        var cube = new pc.Entity('cube');
        cube.addComponent('render', {
            type: 'box'
        });

        // create camera entity
        var camera = new pc.Entity('camera');
        camera.addComponent('camera', {
            clearColor: new pc.Color(0.1, 0.1, 0.1)
        });

        // create directional light entity
        var light = new pc.Entity('light');
        light.addComponent('light');

        // add to hierarchy
        app.root.addChild(cube);
        app.root.addChild(camera);
        app.root.addChild(light);

        // set up initial positions and orientations
        camera.setPosition(0, 0, 3);
        light.setEulerAngles(45, 0, 0);

        // register a global update event
        app.on('update', function (deltaTime) {
            cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
        });
    </script>
</body>
</html>
3 Likes
4

Thank you

5

Is there any way to use the editor locally, Like a organizational plan that lets you work completely locally without storing any data online. Would like to know more about this.

6

Hi @anamally and welcome,

Check this post for a more in depth answer: Offline editor engine - #10 by will

7

Just to add that our plans have not changed since Will’s post and for the planned future, won’t be releasing an offline version of the Editor.

We are going to open source as much as possible of our stack though over the next year though following our work with Model Viewer, Texture Tool, PCUI, PCUI Graph etc

1 Like