RaananW Posted November 16, 2017 Share Posted November 16, 2017 Hi boys and girls, I don't know if you noticed, but the repository has a new directory called "Viewer" : https://github.com/BabylonJS/Babylon.js/tree/master/Viewer The viewer is a simple way of displaying a model without the need of JavaScript at all. It (obviously) uses babylon, and can be customized to your needs using HTML tags and HTML attributes. The only two important lines in your page would be: <babylon model="https://playground.babylonjs.com/scenes/Rabbit.babylon"></babylon> <script src="https://viewer.babylonjs.com/viewer.min.js"></script> Which will result in this: https://viewer.babylonjs.com/basicexample You can read about how to use it and how to customize it here - http://doc.babylonjs.com/extensions/the_babylon_viewer It is currently in a very early stage. The (public) project can be found here - https://github.com/BabylonJS/Babylon.js/projects/6 , including future plans. I am in the process of simplifying the development, build, and deploy process and it will soon be available on NPM as well, if anyone wishes to embed it using webpack/imports/require/whatever V!nc3r, inteja, Vousk-prod. and 10 others 10 3 Quote Link to comment Share on other sites More sharing options...
Raggar Posted November 16, 2017 Share Posted November 16, 2017 I can see how this could be useful in a lot of applications other than games. It seems to have an issue with fullscreen in Firefox(56.0.2 - 64bit). Works in Chrome. Quote Link to comment Share on other sites More sharing options...
RaananW Posted November 16, 2017 Author Share Posted November 16, 2017 Got it, will be fixed soon. Thanks! Quote Link to comment Share on other sites More sharing options...
brianzinn Posted November 17, 2017 Share Posted November 17, 2017 When deltakosh showed the viewer in his talk today - I was like "how did I not know about this?" So, it's NEW! The other html files in the /dist/ folder are available, too. ie:http://viewer.babylonjs.com/domexamplehttp://viewer.babylonjs.com/eventsexample GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
RaananW Posted November 17, 2017 Author Share Posted November 17, 2017 Everything is available in the repo, we tend to keep everything as open-source as possible Quote Link to comment Share on other sites More sharing options...
RaananW Posted November 17, 2017 Author Share Posted November 17, 2017 Firefox fullscreen was fixed. As I always love to say - gotta love web "standards"! Wingnut 1 Quote Link to comment Share on other sites More sharing options...
V!nc3r Posted November 20, 2017 Share Posted November 20, 2017 I was wondering, watching github notifications, what are these interesting "viewer" task & issues, so here it is! This tool will be very useful, for example for easily doing a custom "sketchfab-like" 3d viewer on artists folio websites. Thanks! RaananW and GameMonetize 2 Quote Link to comment Share on other sites More sharing options...
efxlab Posted January 18, 2018 Share Posted January 18, 2018 (edited) Hello, I was using viewer recently, great babylonJS extension guys and PBR are awesome ! I was trying to play with json config but I I got an error: TypeError: undefined is not an object (evaluating 'cacheReference') line 107028 in viewer.js I followed the doc here : https://doc.babylonjs.com/extensions/configuring_the_viewer -> 'Configuring using external JSON" I can't understand the issue, here the html code and the viewerconfig.json file setup : https://bin.fuelphp.com/snippet/view/OD I think viewer doesn't find the file or not read the format, the viewerconfig.json file is in root with html thanks Edited January 18, 2018 by efxlab I switched on non compressed viewer.js for have more accurate error Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 18, 2018 Share Posted January 18, 2018 Pinging @RaananW Quote Link to comment Share on other sites More sharing options...
RaananW Posted January 18, 2018 Author Share Posted January 18, 2018 Hi @efxlab, I tried loading the configuration file (http://babel.dev/viewerconfig.json) and couldn't. I am being redirected to https://babel.dev/viewerconfig.json . I can ping the server, so I guess something is wrong with the link (or with what I am doing ) . Any chance of seeing a live version of this? I will check it locally as well, but I want to check with your configuration to see and be able to debug this. Thanks! Quote Link to comment Share on other sites More sharing options...
efxlab Posted January 19, 2018 Share Posted January 19, 2018 sorry It was the file in local, here the online version : HTML loader: https://bin.fuelphp.com/snippet/view/OE Online test: http://efxdesign.fr/babylonjs/loadconfig/ The config.json content: { "scene": { "debug": true } } Quote Link to comment Share on other sites More sharing options...
RaananW Posted January 19, 2018 Author Share Posted January 19, 2018 Thanks! Bug found, I will push a fix very very soon efxlab 1 Quote Link to comment Share on other sites More sharing options...
RaananW Posted January 19, 2018 Author Share Posted January 19, 2018 So, quick fix : http://viewer.babylonjs.com/basicexample if you want you can get the latest viewer.js from the babylon repo or simply reference this one instead - http://viewer.babylonjs.com/viewer.js efxlab 1 Quote Link to comment Share on other sites More sharing options...
efxlab Posted January 19, 2018 Share Posted January 19, 2018 Working Perfect Raanan, thanks its great ! RaananW 1 Quote Link to comment Share on other sites More sharing options...
efxlab Posted January 20, 2018 Share Posted January 20, 2018 Hello, Can I use a jpegs skybox with _nx, _ny, _nz, _px, _py and _pz names in skybox file in viewer ? I tried to call in skybox folder : "cubeTexture": { "url": "environment/skybox/skybox", } it say Error loading model. How I can follow babylonia with viewer : var skyboxTexture = new BABYLON.CubeTexture(rootUrl, scene, ["skybox_px.jpg", "skybox_py.jpg", "skybox_pz.jpg", "skybox_nx.jpg", "skybox_ny.jpg", "skybox_nz.jpg"]); ? Quote Link to comment Share on other sites More sharing options...
efxlab Posted January 20, 2018 Share Posted January 20, 2018 I think, BJS viewer deal only with DDS, I finally found how create them with unix tool : Quote Link to comment Share on other sites More sharing options...
RaananW Posted January 22, 2018 Author Share Posted January 22, 2018 Hi, The viewer does support the default naming (["_px.jpg", "_py.jpg", "_pz.jpg", "_nx.jpg", "_ny.jpg", "_nz.jpg"]) when cubeTexture.url is a string (the rootUrl). If you want to provide specific files for each of the sides, cubeTexture.url can also be an array, with a list of files (in the right order). What error do you get? If you want to show me an example where it doesn't work (or forces you to use DDS, which it shouldn't), please do! P.S. - in the future, please ask your question in the Q&A, so we can easily follow up on the different questions. Thanks efxlab 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.