gbball

Thanks @kongondo I'm willing to approach it either way, but there will be case where the script is vastly different in which case I think it would be more flexible if I could just substitute the entire block of Babylon code to suit different situations. and @bernhard, I will take a look at this as well, but where would this code live? In my template file? To both of you, when you say to use $config->js() is that referring to the field that I created on my template called js or is there something else already in processwire with the same name that you're referring to? I'm relatively inexperienced with anything more than basic web development, but I have a decent grasp of coding concepts and good enough javascript abilities to get by. I have very little experience with php, but I'm willing to learn. I've heard of json before, but never used it. You've both given me a lot to investigate. Also, can you recommend documentation on this site to look at best practices with regards to what I want to do, or is modular javascript cumbersome at this point? Would it be a good idea to make a module or use a hook for example? Or should I just handle everything in the template file. And is json just like a kind of data type or variable? Does it need to be a separate file? Or is it like javascript in the sense that it can be embedded into a file or handled as a separate file? I'm sure it will come up as I do more research, but it's always faster to ask people who know. Thanks again. I greatly appreciate the help!

Hopefully this is the right place to ask this question, if not, please direct me to a better place. I've been trying for a few weeks to figure this out and I keep getting blocked by one thing or another. What I'm trying to do is use Bablyon.js, the html5 game engine to create a 3d interactive comic on my processwire site. What I was hoping to achieve is something where I could have a template file called comic-post.php that has a canvas element in it where the 3d scene would load. <canvas id="renderCanvas"></canvas> Then in the template add a Unknown/Text field called js that would contain the javascript. Also in the comic-post.php file, I also would have the following. <script> <?php $page->js ?> </script> And the script, which I would input through the js field I created looks like this. //get canvas element from the page by it's id var canvas = document.getElementById("renderCanvas"); var createScene = function () { var scene = new BABYLON.Scene(engine); //Adding a light var light = new BABYLON.HemisphericLight(); //Adding an Arc Rotate Camera var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); // The first parameter can be used to specify which mesh to import. Here we import all meshes BABYLON.SceneLoader.Append("<?php urls()->templates?>babylon/glb", "Silo.glb", scene, function (newMeshes) { scene.activeCamera = null; scene.createDefaultCameraOrLight(true); scene.activeCamera.attachControl(canvas, false); }); return scene; }; var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); var scene = createScene(); engine.runRenderLoop(function () { if (scene) { scene.render(); } }); // Resize window.addEventListener("resize", function () { engine.resize(); }); This line below is looking for a glTF file called Silo.glb in my templates directory under babylon/glb BABYLON.SceneLoader.Append("<?php urls()->templates?>babylon/glb", "Silo.glb", scene, function (newMeshes) I'm working with the uikit blog template and I'm using the blog-post.php template as a basis. I've also added a _uikit-comic.php file that loads after _init.php and _uikit.php. So after doing all this, I can't seem to get it working the way I want and the javascript won't load it seems. The canvas is there, but it is blank. I can get it to work properly if I put the javascript directly into the comic-post.php directly, but then I have the problem of not being able to reuse the template for different scenes. Is there a certain way I need to set up the parameters for the textarea field in order for the page to load and run the javascript correctly, or is this something that is not possible? Thanks! -G

Great topic! I am somewhat familiar with processwire, and I love it, despite not being fully proficient. The uikit integration adds a layer of complexity that I'm starting to figure out, but still struggling with. That being said, I have a question, that hopefully someone can answer. I am trying to render a canvas element within a modified blog-post template which in turn uses a modified version of the ukBlogPost and ukBlogPosts functions in _uikit.php. The problem I'm running into is getting some Bablylon.js code to render on the page. I'm wonder what is the best way to insert a canvas element on the pages in order to do some webgl using Bablylon.js. Currently, I'm trying to insert the following into a textarea field with content type set to Unknown/Text <canvas id="renderCanvas" touch-action="none"></canvas> <script> /// <reference path = "./ts/babylon.module.d.ts"/> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI/2, Math.PI/2, 2, new BABYLON.Vector3(0,0,5), scene); camera.attachControl(canvas, true); var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1,1,0), scene); var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0,1,-1), scene); var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene); return scene; } var scene = createScene(); engine.runRenderLoop(function (){ scene.render(); }); window.addEventListener("resize", function (){ engine.resize(); }); </script> No canvas is showing on the screen as is. I've put all the Bablylon libraries in the header of the _main.php. Where should I put a canvas element in the project should it be directly in the modified blog-post template? Should it be in a custom field added to the template? Or should it go in the _main.php file? I also need to reference the canvas element for Bablylon.js and include some javascript. I'm going to continue working towards the solution, but I thought I'd put this out there since there is such a great wealth of knowledge and experience on this forum. Thanks!

Got it working. Thanks for the help! I think I was overthinking it a bit, but since php is resolved first, it's okay to put the processwire tags inside a javascript argument.

Thanks! I'll give it a try!

<script> //code <?php $glb = echo $config->urls->templates.'/glb' ?> // Append glTF model to scene. BABYLON.SceneLoader.Append(<?php $glb?>, "Silo.glb", scene, function (scene) { // Create a default arc rotate camera and light. scene.createDefaultCameraOrLight(true, true, true); //code </script> Could something like this work?

<script> //code // Append glTF model to scene. BABYLON.SceneLoader.Append("<?php echo $config->urls->templates?>/glb/", "Silo.glb", scene, function (scene) { // Create a default arc rotate camera and light. scene.createDefaultCameraOrLight(true, true, true); //code </script> I am trying to work with Bablylon.js to make a 3d comic on my Processwire site, but I need to pass a directory to the Bablylon scene loader inside of a string in the Bablylon Javascript function. How do I tell Babylon to locate the file correctly while referencing Processwire's template directory through php? Below is the documentation for the Bablylon Append method. Static Append Find examples in Playground Append(rootUrl: string, sceneFilename?: string | File, scene?: Nullable<Scene>, onSuccess?: Nullable<function>, onProgress?: Nullable<function>, onError?: Nullable<function>, pluginExtension?: Nullable<string>): Nullable<ISceneLoaderPlugin | ISceneLoaderPluginAsync>

Ok, Thanks berhard, I'll give that a try. I think a blank profile might be more straightforward at this point. Then I'll see if I can figure out how to plug it into the other setup. Cheers, Gavin

Also, I went through that tutorial when I first came across Processwire a few years ago. But I haven't spent much time using it since then. I could probably use a refresher. I think what I'd like to know if it's possible is. Can I make it so that I can just embed the javascript (three.js) into the a textarea field in a template that I can then display as a page? Maybe if I ensure that the dependencies are being met by the template file. Would that work? It seems there are few limitations in what is possible with the textarea and writing source code in that doesn't always display the way I intended on a page. Is there a setting that I can change for it to work properly? Also, how do I get the extra code to not show up at end of my template file when using the UIkit3 blog setup?

Thanks Berhard, I appreciate your patience. I think I might have some idea of what I'm doing wrong. I'm using the UIkit3 blog installation of processwire and it looks like there is a lot of code appended to the template I tried. I will have to sit down with it a bit longer and also learn more about how uikit is being integrated with processwire so that I get the correct head information with the right dependencies.

I did a crude test, taking one of the three.js example files and turning it into a template and it didn't work out properly.

Hi benbyf, I want to have several chapters of a comic which people can leave comments and feedback on, and a dev blog for the comic and the game. Using something like processwire will be harder to set up initially, but it will be more extensible in the long run. I'm not sure which webGl library I'll use yet. Need to do some tests, but I was thinking of three.js or doing webGL exports from Unreal since that's where I'm making the game. I also heard that Babylon.js is good for interactive projects. There is also Blend4web, which might be good because I use Blender for asset creation.

Hey, Just bumping this. Might not be relevant, but I am working on a 3d interactive online comic and I'd like to use processwire as my framework. I'm not sure how to integrate webgl into a processwire template. I'm more of an artist than a programmer and not super familiar with Processwire. But it seems like the right fit for what I want to do. Does anyone have some advice on working with a webgl js library in Processwire?