Jump to content

How to setup Babylon?


Kwame
 Share

Recommended Posts

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <script src="dist/babylon.2.3.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        window.addEventListener('DOMContentLoaded', function(){
            // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            var engine = new BABYLON.Engine(canvas, true);

            // createScene function that creates and return the scene
            var createScene = function(){
                // create a basic BJS Scene object
                var scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());

                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                // create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;

                // create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                // return the created scene
                return scene;
            }

            // call the createScene function
            var scene = createScene();

            // run the render loop
            engine.runRenderLoop(function(){
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
        });
    </script>
</body>
</html>

This is my index.

the script is in dist/babylon.2.3.js.

is this correct? when i run this it is just a blank white page.

i have the full babylon js master zip file. what do i do?

Link to comment
Share on other sites

6 hours ago, davrous said:

Yes, please press the F12 key to open the dev tools and tell us what's logged into the console. You'll probably find the other there. ;)

 

18 hours ago, JohnK said:

Did you expand the zip file? Do you know how to open the browser console? As max123 suggested check any errors in the console.

Yes i did.

22 hours ago, max123 said:

Your code works fine in BJS 2.4.
What's your console output? Any errors?

file:///C:/Users/Richard/Downloads/Babylon.js-master/Babylon.js-master/dist/babylon.2.3.js Failed to load resource: net::ERR_FILE_NOT_FOUND
index.html:31 Uncaught ReferenceError: BABYLON is not defined

 

i dont know if i did set it up correctly. i tried doing this tutorial https://doc.babylonjs.com/

and i followed these offical steps 0b679f93d54fa80b396b6aba44afe9b3.png

Link to comment
Share on other sites

8 minutes ago, aWeirdo said:

get a local apache server to run it from :)

 

6 minutes ago, aWeirdo said:

and make sure the path to babylon.js is correct, aswell as name, etc

if you recently downloaded the project from github, it should be "babylon.2.4.js" btw

OK i did both and made sure it was correct and now it works. thank you everyone for helping

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...