Blog

Web Player JSON: Publishing Projects

2017-01-19

I think that we all can agree that it is indeed very easy to work with a WebPlayer JSON project. The two previous articles (first and second) should have already dispelled any myths about complexity. But in case they didn’t, simply read on.

So, the most exciting part of the development process is project publication. And it is here where problems start to occur and various beginner questions start to pop up, namely the questions of what, where and how. But let’s proceed in the right order...

Preparing the Project

The developers did their best to make life easier for the users, and among other things they supplied the framework with a tool for building projects. You only have to click the deploy project link, and the program will create an archive that includes all necessary files. Then, you can simply download this archive.

Such an archive typically includes HTML and CSS files, engine builds and exported scene files (JSON and BIN). Depending on what resources you have used in your scenes, it can also include textures, sounds or other media files.

Your fingers are probably itching to see your creation in action, but if you try to unpack the archive and open the webplayer.html file in a web browser, you will get a grey screen with a warning message. This is because webplayer.html only starts the viewer, and it doesn’t know anything about your scene.

Blend4Web’s WebPlayer works with a URL address field of a web browser, and it has its own set of commands. The most important of them is the load command, as it is used to specify the path to a JSON scene file. If all the files are contained in a single directory (as it is by default), change the URL address in the following way:

webplayer.html?load=scene.json

WebPlayer also has other commands that can be useful as well. You can find the full list here, but remember that commands in the address should be separated by the & symbol. For example, if you want to disable automatic rotation, add the autorotate command to the address:

webplayer.html?load=scene.json&autorotate

Publishing the Project

If you want other people to appreciate your project, you have to publish it somewhere on the Internet. There are many ways to do this: you can post it in a social network, embed a page to a popular blog or add it to a stand-alone site. But, in any case, you will need to physically place your files somewhere.

I will not go into details about creating web sites or registering domains, as you can easily find lots of online tutorials on these subjects. I only want to cover some basic points. This part of the article is intended for people who aren’t really familiar with the very process of site hosting.

A hosting service provides a place on a remote server for websites to be stored and function. There are lots of hosting providers on the Internet, and they all offer something different. Choosing a hosting service is a flame-bait topic that has already led to massive causalities. If you don’t want to make a mistake, let’s define basic criteria:

 1. Geographic location. Many site owners don’t take this into account, which is not a good idea. Assuming, for example, that your site is physically hosted in the Netherlands and most of your clients come from USA, they will experience significant delays loading the content despite high connection speed. So the most logical thing to do is to host the site in the location most of your potential customers come from.

 2. Technical requirements. Deploying Blend4Web projects doesn’t present any significant requirements to the hosting service. Of course, if you are making an MMO game with hundreds of unique visitors, you probably should look for something expensive, or maybe even rent a server. In more simple cases, you can choose a more reasonably priced option. Only, look out for possible traffic restrictions.

 3. Prices. We all try to save money and to choose a less expensive solution, if there is any. But is it always reasonable? I can give you only one piece of advice: go for a hosting service that accepts payment in your national currency. If you, for example, live in Russia and pay for your hosting in Euros, you are wasting a lot of money.

 4. Domain maintenance. The domain is the name of your site. Sometimes, a hosting service might offer you to purchase a domain from it and maintain it along with the hosting itself. The advantage here is the simplicity. You choose a name for your site, the system checks it and lets you register, if the name isn’t already used. Sometimes, the domain name is even offered for free.

 5. FTP access. Every hosting service has a file manager embedded in the control panel. You can use these to upload your projects to the server. But it can be done even easier if you have FTP access. FTP is a specific Internet protocol used to directly exchange files with a server. There are many FTP clients, but personally I would recommend FileZilla. You only have to set it up once, and then you can forget about it.

So you purchased yourself a hosting and made either a complex web site or a simple greeting card-type one. Now, it is time to plug in your project.

The easiest way to do it is to upload the files from the archive to a dedicated folder on the server. Now you can place a link to the webplayer.html file on a page you need. Here is an example of how it might look:

<a href="http://www.mysite.com/folder/webplayer.html?load=scene.json">My Awesome Project!</a>

There is also another method which gives you an option to embed the web player window right in a web page. For this, you have to use the IFRAME tag, which allows you to specify the dimensions of the window.

<iframe allowfullscreen src="http://www.mysite.com/folder/webplayer.html?load=scene.json" width="800" height="500"></iframe>

Of course, this method allows you to embed your web pages with links to web player on other sites as well.

A Bit of Practice

Let me show you a living example of how a WePlayer JSON project can be published. This is a tutorial, after all.

So, there is this site: www.prandgames.com/. Do you know, whose it is? Well, it belongs to yours truly. There are a few games, simple blog with a handful of notes, and a portfolio. Let me tell you a little secret: it is made with WordPress. And WordPress is a popular CMS often used for rapid website development.

So, our goal is to create a blog entry which will contain, along text and images, a web player window with a «live» 3D model.

For this purpose I’ve created a new project with the Project Manager and set it up in the following way:

The program has created a new project folder titled “enemy1”, and this folder is located in the Projects user directory (in the root folder of the Blend4Web SDK).

The structure of a JSON project usually looks like this:

 The Assets folder contains media resources such as images, sounds and video files, as well as exported scene files.

 The Blender folder contains Blender source files.

To export the scene to JSON, we have to select the File | Export | Blend4Web (.json) option from the Blender menu and save the scene to the Assets folder.

Now is the time to publish the project. Build it using the deploy project option in the Project Manager and download the project archive to your hard drive. Then, extract it to any suitable place.

What we need to do next is to upload the project folder to the server. I personally use the program called FileZilla. It is a free manager that is available for various platforms and is used to access web servers through FTP.

To connect to a web server, you need to know:

 1. The title of the site and its IP address.

 2. The name of the user that has the access to the server through FTP.

 3. The FTP user password.

You may ask who is this FTP user? As I mentioned above, many hosting companies provide access through this protocol. So you will need to search for something FTP-related in the hosting control panel. The control panel most likely already has a username and a password for FTP access. And as a last resort, you can always contact hosting service’s technical support.

These are the FileZilla settings for establishing an FTP connection with a server. Enter the title of the site and its IP address, a login and a password. Then, press Quick Connect. If everything has gone off without a hitch, then the server’s file structure will appear it the program’s right window. Open the folder that contains the site (it shares its name with the site) and move your project folder from the left panel to the right.

Our further task is to deploy the project to a web page on the site. Let me remind you that my site uses WordPress CMS.

So, first of all, we need to place an IFRAME block into the page. We can use some third-party addon for this or just switch to the text mode and add the following line.

<iframe src = "http://www.prandgames.com/promo/revolt/enemy1/webplayer.html?load=enemy1.json&autorotate" width="800" height="500" allowfullscreen="allowfullscreen"></iframe>

Look at the IFRAME block. Along with the link to the web player and the scene, it also features the command for enabling autorotating. The width and height parameters control the size of the block, while allowfullscreen allows the player to be switched to the full screen mode.

By using these simple means, I was able to add a full-blown 3D model to my blog.

As you can see, there is nothing too complex about creating and publishing WebPlayer JSON projects. And if you intend to store multiple projects on one server, you can separate web player files from the files used by the projects. This will allow you to reduce disc space consumption on the server as well as output traffic and loading time. It is all up to you!

Comments
19 jan. 2017 15:58
Thanks for the article, really helpful!

So I am now able to integrate a viewer for the 3D Models I want.
But how can I interact with these Models in the webplayer with HTML5 Buttons etc.? If i chosse Engine Binding type: external am I going with Webplayer+JSON or do I have to tick Webplayer+JSON in Project Manager? Then I have to edit all the webplayer.html files in the blend4web_ce\apps_dev\webplayer folder, right?
19 jan. 2017 17:20
Hi!
You can use either External or Web Player engine binding types, but not both.
If you want to interact with the scene through custom html-elements, it is better to go with an application (External, Copy, Complie binding types).
09 feb. 2022 09:59
Rigid Candy Boxes-converted.pdf
15 feb. 2022 07:22
POWERFUL MAGIC ,RING+27604045173 TO BRING YOU INSTANT WEALTH PROTECTION MAGIC RING in USA GREAT BRITAIN , VENEZUELA, CAPE VERDE, YUGOSLAVIA, VIETNAM My MONEY Spells and BUSINESS Spells have a great impact in every one's ability to have a wealthy life, and include the following: Call or SMS +27604045173*DO U ALWAYS GET MONEY BUT WONDER HOW IT VANISHES!!??WINNING A TENDER?*LOTTO / BET SPELL *EXTREME WEALTH SPELL *COURT CASES *SUCCESS IN BUSINESS SPELL This spell helps to guide you in the direction of success by making you more aware of how to best take advantage of your business ideas. Don't be surprised if a lot of little "coincidences" start guiding you down a slightly different path that helps to increase your success. It's very important with this spell that you listen to and follow those hunches! This spell will work with your intuition to guide you down the right path. Also heightens your senses, increases your communication skills so as to be able to communicate more effectively with anyone connected with your business *POWERFUL JOB SPELL Cast powerful spells to be rich, powerful job spells to be rich and have money available. Are you worried or tensed?. Have you tried to get a descent Johannesburg Or What's App On +27604045173 .MMAMA ZENNA Email:mmamazenna@gmail.com https://web.facebook.com/PowerfulSangomahealer https://web.facebook.com/Stronglovesangoma
Web: https://www.safemagiclovespells.com
16 feb. 2022 11:47
Comprar solución de pentobarbital sódico nembutal
INFORMACIÓN DE CONTACTO: info@globalhomemed.com

Compre solución de pentobarbital sódico nembutal en línea
Dónde comprar una solución suicida de sodio sin mantequilla en línea
¿Estás enfermo, enfermo, deprimido y quieres dar tu vida por el mundo? ¿Ha estado buscando formas confiables y eficientes de vivir en paz sin perder dinero? ¿Alguna vez ha tomado una solución de pentobarbital sódico nembutal en un medicamento de eliminación pacífica? Estamos aquí para ofrecerle una solución pacífica y confiable. Si desea comprar nembutal en línea, entonces está en el lugar correcto para comprar. No busques más, contáctanos y compra nembutal online a muy buen precio. Tenemos más de 9 años de experiencia en la entrega de nembutal a EE. UU., Canadá, Europa, Australia, África, Asia y un 99,9 % de entrega exitosa. Estamos comprometidos a brindar a los pacientes la verdadera piedad y el descanso eterno. Vendemos olor a nembutal, líquidos orales de nembutal y tabletas de nembutal. Al especificar su edad y peso, podremos brindarle información precisa sobre el precio, la entrega y el pago. Tenga en cuenta que garantizamos 100 % de privacidad y entrega rápida a través de nembutal en toda la casa y aplicamos una política de devolución/reembolso de dinero para garantizar la máxima satisfacción del cliente. Si te tratamos mal, dínoslo, y si te tratamos, díselo al mundo. Estamos abiertos las 24 horas del día y responderemos todas sus preguntas relacionadas con la compra de productos no minerales en línea, dónde comprar productos no minerales, el mejor tipo de productos no minerales, etc. Simplemente envíenos un correo electrónico. correo electrónico y cualquiera de nuestros asesores de servicio al cliente se comunicará con usted de manera oportuna. Tenga en cuenta que garantizamos 100 % de privacidad y entrega rápida a través de nembutal en toda la casa y aplicamos una política de devolución/reembolso de dinero para garantizar la máxima satisfacción del cliente. Si te tratamos mal, dínoslo, y si te tratamos, díselo al mundo. Estamos abiertos las 24 horas del día y responderemos todas sus preguntas relacionadas con la compra de productos no minerales en línea, dónde comprar productos no minerales, el mejor tipo de productos no minerales, etc. Simplemente envíenos un correo electrónico. correo electrónico y cualquiera de nuestros asesores de servicio al cliente se comunicará con usted de manera oportuna. Tenga en cuenta que garantizamos 100 % de privacidad y entrega rápida a través de nembutal en toda la casa y aplicamos una política de devolución/reembolso de dinero para garantizar la máxima satisfacción del cliente. Si te tratamos mal, dínoslo, y si te tratamos, díselo al mundo. Estamos abiertos las 24 horas del día y responderemos todas sus preguntas relacionadas con la compra de productos no minerales en línea, dónde comprar productos no minerales, el mejor tipo de productos no minerales, etc. Simplemente envíenos un correo electrónico. correo electrónico y cualquiera de nuestros asesores de servicio al cliente se comunicará con usted de manera oportuna. Estamos abiertos las 24 horas del día y responderemos todas sus preguntas relacionadas con la compra de productos no minerales en línea, dónde comprar productos no minerales, el mejor tipo de productos no minerales, etc. Simplemente envíenos un correo electrónico. correo electrónico y cualquiera de nuestros asesores de servicio al cliente se comunicará con usted de manera oportuna. Estamos abiertos las 24 horas del día y responderemos todas sus preguntas relacionadas con la compra de productos no minerales en línea, dónde comprar productos no minerales, el mejor tipo de productos no minerales, etc. Simplemente envíenos un correo electrónico. correo electrónico y cualquiera de nuestros asesores de servicio al cliente se comunicará con usted de manera oportuna.

INFORMACIÓN DE CONTACTO: info@globalhomemed.com

Compre solución de pentobarbital sódico nembutal en línea
dosis suicida
cómo comprar nembutal en línea
comprar nembutal en línea
cómo pedir correo nembutal
la mejor medicina para la sobredosis de suicidio
donde comprar nembutal
pastillas de nembutal
Pastilla Nembutal a la venta en línea
proveedores con olor no butalinoso,

INFORMACIÓN DE CONTACTO: info@globalhomemed.com

donde puedo comprar nembutal
como comprar nembutal
ordenar nembutal en línea
Obtener nembutal en línea,
no butal,
internet nembutal,
Nembutal en venta,

https://globalhomemed.com/no/product-category/nembutal/
tabletas de nembutal
comprar nembutal en línea
comprar nembutal,
precio nembutal,
comprar nembutal,
Venta de pentobarbital nembutal,
comprar nembutal,

INFORMACIÓN DE CONTACTO: info@globalhomemed.com
cápsulas de nembutal,
Nembutal a la venta en línea
comprar en linea
sobredosis de nembutal
donde comprar nembutal por internet
comprar cápsulas para la piel
Venta de tabletas de Nembutal,
comprar nembutal en línea
embute de sodio para pentobarbital,
comprar pentobarbital sódico nembutal en línea
donde pedir nembutal
donde puedo comprar pastillas
Qué opinas,
clínicas veterinarias en línea,
suicidio despues de nembutal,

https://globalhomemed.com/de/product-category/nembutal/
nembutal secundario,
comprar nembutal sin receta
la sal de sodio de nembutal pentobarbital,
pastillas de nembutal
proveedores nembutal,
dosis suicida
solución de sodio no butal
pastillas para dormir,
nembutal con pedido por correo,
cuanto cuesta el nembutal
una fuente confiable de no mantequilla,

INFORMACIÓN DE CONTACTO: info@globalhomemed.com

https://globalhomemed.com/de/product-category/nembutal/
él Koks nembutal pentobarbitalis,
con Para qué se utiliza nembutal
uso de enfermedades urbanas,
como conseguir nembutal en australia
nembutal Muerte sin dolor,
medicamentos para la hemorragia
fabricante nembutal,

https://globalhomemed.com/dk/product-category/nembutal/
dosis letal de nembutal,
¿Cómo puedo obtener nembutal?
comprar nembutal en línea
comprar nembutal online sin receta
barbitúrico no butal,
¿Dónde puedo comprar nembutal en línea?
Donde comprar,
embolia pentagonal,
suicidio
como comprar nembutal
fa nembutal,
como conseguir nembutal
ordenar nembutal en línea

con que nembutal se usa
donde puedo conseguir nembutal
dosis vaginal
farmacología no butal,
pentobarbital no butal,
lo que el nembutal
dosis suicida
como tomar nembutal para morir
como conseguir pentobarbital

INFORMACIÓN DE CONTACTO: info@globalhomemed.com

https://globalhomemed.com/it/product-category/nembutal/
como conseguir un segundo
nembutal con pedido por correo,
Nembutal en venta,
internet nembutal,
Tienda en línea Nembutal
ordenar nembutal en línea
Venta de pentobarbital nembutal,
Venta de tabletas de Nembutal,
La fragancia Nembutal se vende en línea,
precio nembutal,
dosis suicida

https://globalhomemed.com/it/product-category/nembutal/
Obtener nembutal en línea,
venta de vapores de pentabarbital,
comprar nembutal en línea
pentobarbital de sodio,
eutanasia con pentobarbital sódico,
Vendo pentobarbital sódico,

INFORMACIÓN DE CONTACTO: info@globalhomemed.com

https://globalhomemed.com/se/product-category/nembutal/
sodio para comprar pentobarbital,
suicidio de pentobarbital de sodio,
proveedores de pentobarbital sódico,
donde puedo comprar nembutal
donde comprar pentobarbital de sodio
donde comprar nembutal por internet
donde conseguir pentobarbital
comprar nembutal online en estados unidos

INFORMACIÓN DE CONTACTO: info@globalhomemed.com

Comprar solución de pentobarbital sódico nembutal
Somos un proveedor legítimo de Nembutal. Termine con el sufrimiento, termine con el dolor y termine con la pena comprando Nembutal en línea de los mejores proveedores de nembutal. 100% rápido, confiable, confiable, producto de alta calidad, ubicuo, ultrapuro olor Nembutal así como líquido y tabletas, la mejor solución. Morir con paz, morir con arroz, Calma eutanasia, calma mente. Configure el consumo y ordene según la flecha.

https://globalhomemed.com/
https://globalhomemed.com/de/


https://globalhomemed.com/es/
https://globalhomemed.com/fr/
https://globalhomemed.com/sk/
https://globalhomemed.com/zh/

https://globalhomemed.com/no/
https://globalhomemed.com/se/
https://globalhomemed.com/it/negozio/

4 aco dmt kaufen
https://globalhomemed.com/dk/
https://globalhomemed.com/it/
¿Es seguro comprar Nembutal en línea?
venta de pentobarbital nembutal,

https://globalhomemed.com/product/buy-nembutal-liquid/
pastillas de nembutal en línea,
como conseguir pentobarbital de sodio,
comprar pentobarbital de sodio,
que fatal es el Nembutal,
venta de pentobarbital nembutal,
donde conseguir pentobarbital,
precio de nembutal,
Pastillas de Nembutal para la venta,
proveedores de polvo nembutal,

INFORMACIÓN DEL CONTACTO: info@globalhomemed.com

https://globalhomemed.com/product/buy-nembutal-pills/
orden nembutal,
Compre pentobarbital sódico en línea,
Comprar pentobarbital sódico,
Ordenar eutanasia con pentobarbital sódico,
proveedores de pentobarbital sodtobarbital sódico,
suicidio con pentobarbital sódico,
Comprar pentobarbital sódico para perros,

https://globalhomemed.com/product/buy-nembutal-powder/
Dosis suicida de pentobarbital con nembutal,
pedido por correo nembutal,
Dónde conseguir Pentobarbital Nembutal,
Seconal sodio para la venta Australia,
Consigue pentobarbital asesino,
Los mejores barbitales,
Cómo comprar Nembutal en línea,

INFORMACIÓN DEL CONTACTO: info@globalhomemed.com

https://globalhomemed.com/it/product/comprare-nembutal-polvere/
Nembutal para la venta,
como hacer nembutal,
¿Para qué sirve Nembutal?
nembutal reino unido,
Nembutal Reino Unido 2022,
fuente confiable nembutal,
definicion de nembutal,

https://globalhomemed.com/es/product/comprar-pildoras-de-nembutal/
Nembutal Pentobarbital Reseñas,
donde comprar nembutal reddit,
comprar pentobarbital en línea en Europa,
Comentarios sobre la tienda en línea changal,
Nembutal Italia 2022,
Nembutal pentobarbital para la venta Europa,

INFORMACIÓN DEL CONTACTO: info@globalhomemed.com

https://globalhomemed.com/es/product/comprar-liquido-nembutal/
punto de venta internacional de nembutal,
Alemania Nembutal,
comprar Nembutal en venta,
donde comprar pentobarbital para perros,
Nembutal líquido para la venta,
Nembutal que significa 2022,
efectos secundarios del pentobarbital,
advertencias de pentobarbital,

https://globalhomemed.com/de/product/kaufen-nembutal-pillen/
pentobarbital suiza,
dosis de pentobarbital eutanasia,
Comprar Seconal Sodio,
venta de barbitúricos,
infusión de nembutal,

INFORMACIÓN DEL CONTACTO: info@globalhomemed.com

https://globalhomemed.com/it/product/comprare-nembutal-pillole/
fuente, pentobarbital,
dosis de pentobarbital eutanasia,
Nembutal Australia en venta,
Nembutal revisa los Estados Unidos,
venta de pentobarbital,
nembutal australia,
cómo funciona el pentobarbital sódico,
Proveedores de Pentobarbitalogista Nembutal,
edad pentobarbital,
era nembutal,

https://globalhomemed.com/it/product-category/nembutal/
Dosis Nembutal Francia,
definicion de nembutal,
donde comprar nembutal reddit,
Nembutal barato,
Nembutal barato Italia, mecanismo de acción del pentobarbital,

dosis de pentobarbital,
para que sirve el nembutal
16 feb. 2022 11:48
Globalhomed.com je vysoko hodnotená jednou z najlepších webových stránok s liekmi, ktoré ponúkajú tablety proti bolesti na predaj, nakupujú tablety proti bolesti, výskumné chemikálie a kanabinoidy na predaj

https://globalhomemed.com/
https://globalhomemed.com/de/

amfetamínový kaufen

https://globalhomemed.com/es/
https://globalhomemed.com/fr/
https://globalhomemed.com/sk/
https://globalhomemed.com/zh/

https://globalhomemed.com/no/
https://globalhomemed.com/se/
https://globalhomemed.com/it/negozio/

4 ako dmt kaufen
https://globalhomemed.com/dk/
https://globalhomemed.com/it/
https://globalhomemed.com/shop/

https://globalhomemed.com/de/product/mephedron-pulver-kaufen/

https://globalhomemed.com/fr/product/cristal-de-3-mmc-3-methylmethcathinone/

https://globalhomemed.com/product/a-pvp/
https://globalhomemed.com/product/buy-mdma-crystal-online/
https://globalhomemed.com/product/buy-5-meo-dmt-online/

https://globalhomemed.com/sk/predajna/
https://globalhomemed.com/fr/shop/
https://globalhomemed.com/product/ketamine-hcl-for-sale/
https://globalhomemed.com/product/buy-3-fmc/
https://globalhomemed.com/product/buy-nm-2-ai/
https://globalhomemed.com/product/buy-3-cmc-crystal-online/

nembutal na predaj

https://globalhomemed.com/product-category/nembutal/
https://globalhomemed.com/dk/butik/
https://globalhomemed.com/de/product/kaufen-sie-mdma-pillen/
https://globalhomemed.com/product/buy-nembutal-pills/

https://globalhomemed.com/de/product/kaufen-sie-amphetamin-pulver/
https://globalhomemed.com/de/product/3-mmc-kristall-3-methylmethcathinon/
https://globalhomemed.com/de/product/methamphetaminpulver-und-crystal-meth-online/

Kúpiť 3-mmc
Kúpiť 3-cmc

https://globalhomemed.com/product/buy-3-fluorophenmetrazine-3-fpm-online/
https://globalhomemed.com/product/fentanyl-liquid/

https://globalhomemed.com/es/tienda/
16 nov. 2022 14:37
Publishing projects are how we share content with the world and therefore, how they get to know us. Publishing projects are one way we can showcase our work and what makes us unique. The public audience is your opportunity to be a part of the conversation. Here you can check EduGeeksClub for more new things about education. Publishing projects are fantastic to have your name on. It's great to be able to put your name on something as well-known as a book or magazine, but there are lots of different types of publishing projects and they don't all work the same.
Please register or log in to leave a reply.