Jump to content

Babylonjs is not showing anything on Google chrome


mrm55
 Share

Recommended Posts

Hello guys i'm trying to use Babylonjs with visual studio but when i try to run my code on chrome this just seems empty without anything

i'm new whit babylon but i just can't figure out how to do this I have a project already but when i tryied to change to Visual studio things just went wrong i need help.

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SistemaSolar0._1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="hand.js"></script>
    <script src="babylon.js"></script>

</head>
<body>



    <style>
 html, body, div, canvas {
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 overflow: hidden;
 }

</style>
<div id="DivConCaracterística">
<canvas id="Modelado3D"></canvas>
</div>



    // Elemento canvas
var ElementoCanvas = document.getElementById("Modelado3D");

// Cargar BABYLON 3D en las canvas
var Motorbabylon = new BABYLON.Engine(ElementoCanvas, true);
var Escenario = new BABYLON.Scene(Motorbabylon);

//Cargar la cámara
var Camara = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), Escenario);

// Agregamos la luz
var Luz = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), Escenario);

// elemento 3D (esfera)
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, Escenario);
// Agregar la cámara al escenario
Escenario.activeCamera.attachControl(ElementoCanvas);

// Agregamos un render del escenario
Motorbabylon.runRenderLoop(function () {
Escenario.render();
});



    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

 

Link to comment
Share on other sites

Hi there mrm55 and welcome to the forum! :)

First of all, do you already know the documentation site? http://doc.babylonjs.com/ There are alot of awesome tutorials. There is one for a basic scene, too: http://doc.babylonjs.com/tutorials/Creating_a_Basic_Scene

When you start learning I recommend to use the names that have been used in the tutorial. Of course you can call a scene "Escenario" (and it may seem easier for you) but it makes it  hard to read your code (at least for me) and for you hard to follow a tutorial and to understand advise from others. Another hint: usually variables are named in lower camel case, that means they start with a lower case letter.

Next thing: do you know the playground? http://www.babylonjs-playground.com/ It's a pretty cool tool where you can show your scene and try things out. I tried to port your scene over there: http://www.babylonjs-playground.com/#1FBASY#0

So your code seems to work, but as Temechon already mentioned, you didn't put the code in any <script> tag. Something like that:

That way your browser knows what is html and what is javascript (and you get that fancy syntax highlighting in the forum ;) ). Edit: the language that i set for the code snipped keeps disapearing when I save to post, so no syntax highlighting, sorry :( 

<script type="text/javascript">

// Elemento canvas
var ElementoCanvas = document.getElementById("Modelado3D");

// Cargar BABYLON 3D en las canvas
var Motorbabylon = new BABYLON.Engine(ElementoCanvas, true);
var Escenario = new BABYLON.Scene(Motorbabylon);

//Cargar la cámara
var Camara = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), Escenario);

// Agregamos la luz
var Luz = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), Escenario);

// elemento 3D (esfera)
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, Escenario);
// Agregar la cámara al escenario
Escenario.activeCamera.attachControl(ElementoCanvas);

// Agregamos un render del escenario
Motorbabylon.runRenderLoop(function () {
    Escenario.render();
});

</script>

@jerome the canvas element is there, he called it Modelado3D (good example for how the custom name can confuse other people :D ):

Hope that helps, let us know if you still run into any problem! :)

Link to comment
Share on other sites

  • 3 weeks later...

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