Need help with this script, I couldnt import mesh

chrome_CmclYXi6Dg !

<HEAD>

    <meta charset="UTF-8">

    <title>BabylonJS Demo</title>

    <script src="babylon.max.js"></script>

    <style>

        #canvas {

            width:100%;

            height:100%;

        }

    </style>

</HEAD>

<body>

    <canvas id="canvas"></canvas>

    <script>

        window.addEventListener("DOMContentLoaded", function() {

            var canvas = document.getElementById("canvas");

            var engine = new BABYLON.Engine(canvas,true);

            var createScene = function () {

                var scene = new BABYLON.Scene(engine);

                scene.clearColor = new BABYLON.Color3.White();

                var camera = new BABYLON.ArcRotateCamera("arcCamera",

                BABYLON.Tools.ToRadians(45),

                BABYLON.Tools.ToRadians(45),

                10.0, box.position,scene);

                camera.setTarget(BABYLON.Vector3.Zero());

                camera.attachControl(canvas,true);

                

                var light = new BABYLON.DirectionalLight("light1", new BABYLON.Vector3(-2, -6, -2), scene);

                light.position = new BABYLON.Vector3(20, 60, 20);

                light.shadowMinZ = 30;

                light.shadowMaxZ = 180;

                light.intensity = 5;

                BABYLON.SceneLoader.ImportMesh("","","TankChallenger.babylon",scene,

                

                function(newMeshes){

                    newMeshes.foreach(function(mesh){

                        mesh.rotation = new BABYLON.Vector3(

                            BABYLON.Tools.ToRadians(45),

                            0,

                            0);}

                        )

                    })

                

                return scene;

            }

            var scene = createScene();

            engine.runRenderLoop(function(){

                scene.render();

            });

        });

    </script>

</body>

?

box is not defined

in your code, you try to use “box.position” while creating a camera, box is not defined. :slight_smile:

1 Like

Thanks! my mistake, I have got rid of box and replaced with BABYLON.Vector3.Zero()
var camera = new BABYLON.ArcRotateCamera(“arcCamera”,

                BABYLON.Tools.ToRadians(45),

                BABYLON.Tools.ToRadians(45),

                10.0,BABYLON.Vector3.Zero(),scene);

                camera.setTarget(BABYLON.Vector3.Zero());

I am getting the following error

chrome_DZxv2Ux24q

@vchia
You can’t access filesystem directly from javascript, this is a browser security feature.
You need a webserver (local or hosted)

See How to setup a local webserver for BabylonJs - Babylon.js Documentation for nodeJs
but you can also use any other webserver to your liking (e.g. Xampp if you plan to use PHP backend).

1 Like

Is it possible to use babylon js offline? I saved the babylon.max.js on my desktop and followed the tutorial on youtube and made a box first, i use
instead of the cdn url , when I saw the box appeared on chrome, I thought I could do the same for my own mesh but sadly it didnt work. My main intention is to use babylon js engine to create a 3d interactive scene for courses, so students will have more interest to learn by clicking parts of the mesh and labels show up. I thought the html I created together with the asset can then be imported into an authoring tool like activepresenter eLearning Authoring Software & Training Video Editor

Sorry if I have done anything stupid in coding, still a newbee. Thanks

@vchia
To use importMesh,
you will need a local webserver, a local webserver is “offline” as it runs on your own pc :slight_smile:
typically you will use localhost or 127.0.0.1 to access it in your browser,
so instead of https://babylonjs.com to reach the BabylonJs site,
you would navigate to http://localhost/ to reach your local server

1 Like

it works! thank you! I would like to ask questions about creating labels, I was watching this video on youtube, Infographics 3d website using Blender & Babylonjs - YouTube
is it possible to create custom label designs in Babylon js or maybe import labels created in adobe illustrator? I would like to make something similar like the video above with my own label designs.

You can use the gui for this: Use the Babylon GUI - Babylon.js Documentation

why does my model have weird shading on it?

Looks like an issue with the normals of the model which are wrapping ???

it is the normal issue, in blender I have auto smooth turned on, but strangely obj or glb I saved doesnt include auto smooth ? how do I have this enabled in babylon js?

I solved it with edge split modifier.

1 Like