Coding Crusader's

I’ve started to develope a plugin called the Shopware 6 Babylon.js Viewer – a lightweight yet powerful solution to integrate 3D models directly into the shop products. With this plugin, you can upload a .glb file and assign it to a product. Customers can then view the 3D model interactively – rotate it, zoom in and out – right in the browser.

Source Code: CodingWizzard/shopware-babylon-viewer

face tracking made with Trickle & Augment Plugin VS-Code

CodingWizzard/faceTracking

1 Like

What’s wrong with that? Babylon Viewer

1 Like

My Babylon-Viewer is a Plugin for Shopware 6. I am not sure if someone can use your mentioned viewer simply in Shopware. One has to consider some concepts to integrate external libraries.

Cool! Probably worth noting as @a.dzhakhangirov mentioned, I would expect you could use the official Babylon Viewer (@babylonjs/viewer) for this scenario rather than go down to the core and loaders libraries directly. You would most likely end up with a smaller, faster, more power efficient, and feature rich viewer integration. @labris did something like this for Wordpress: New Babylon Viewer v2 Wordpress 3D Plugin

Thank you for turning my head in that direction twice. Now i understand!

Wow, that’s just a single line of code! :smiley:

<html lang="en">
    <body>
        <script type="module"> import "@babylonjs/viewer"; </script>
        <babylon-viewer source="https://playground.babylonjs.com/scenes/BoomBox.glb"></babylon-viewer>
    </body>
</html>
2 Likes

Lightmap Generator made with Trickle & Augment

Look at the lightmap for the sphere. It looks promissing. :slight_smile:

CodingWizzard/lightmap

Usage:

            const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 3, 8, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);

            // const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

            let mat = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
            mat.backFaceCulling = false;
            mat.emissiveTexture = new BABYLON.Texture("media/lightmapSphere.png", scene);

            const mesh = BABYLON.MeshBuilder.CreateSphere("wall", { diameter: 1 }, scene);
            mesh.material = mat;

1 Like

A New Adventure Begins!
I’m embarking on an exciting new project – my Patreon page is currently under construction. Here, I’ll be sharing exclusive content and updates as I work on creative and exciting projects. My supporters will not only get access to the source code of both small and large projects, but they will also have the chance to submit their own project ideas! Members can propose projects and actively contribute to the creation of new works. Join me and support this creative journey!

ccBB

2025-04-12--babylonjs-demo-collection-j-promo-card

4 Likes

Babylon Quiz (basic framework)

bbQuiz.zip (5.3 KB)

Laser & Mirrors

Inspired by the trailer to “Tracing Light”

Laser & Mirrors | Babylon.js Playground

Youtube Search & Videoplayer
Made with Loveable, fixed with Augment

You need to create a “.env” file and set your API Key from google


“Schlüssel anzeigen” === “show key”

repo

BabylonGPT
create a Grok API key

repo