Need help with this script, I couldnt import mesh

Questions
1

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>
2

?

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
3

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

4

@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
5

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

6

@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
7

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.

8

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

9

why does my model have weird shading on it?

chrome_PgadcO57al
chrome_PgadcO57al968Ă—768 450 KB

10

Ad30CRppWm
Ad30CRppWm968Ă—768 463 KB

11

blender_SXJefRbfx9
blender_SXJefRbfx91412Ă—803 382 KB

12

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

13

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?

14

I solved it with edge split modifier.

1 Like