Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Babylon.js render canvas not open in tab?

aldin_abdagic

By aldin_abdagic,
in Questions & Answers

 Share

Recommended Posts

aldin_abdagic Newbie

aldin_abdagic

Posted
Posted

Hi my webgl work fine.

I add render canvas in tab but not showing object. If i add render canvas in different html element work fine..help?

 

<!DOCTYPE html>
<html>
<head>
     <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script>
     <script src="https://preview.babylonjs.com/cannon.js"></script>
     <script src="https://preview.babylonjs.com/oimo.js"></script>
     <script src="https://preview.babylonjs.com/babylon.js"></script>
<style>
#renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
                background-color: #f2f2f2;
            }
body {font-family: "Lato", sans-serif;}
 
/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}
 
/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}
 
/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}
 
/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}
 
/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

</style>
</head>
<body>
<p>In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
     <h3>London</h3>
</div>
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
</div>
<div id="Tokyo" class="tabcontent">
     <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
     </div>
</div>
 
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent.style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks.className = tablinks.className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
       
            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
       
            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);
       
            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("", "anatomy3d/", "skull.babylon", scene, function (newMeshes) {
                // Set the target of the camera to the first imported mesh
                camera.target = newMeshes[0];
            });
   
       
            // Move the light with the camera
            scene.registerBeforeRender(function () {
                light.position = camera.position;
            });
       
            return scene;
        }
       
        var scene = createScene();
        engine.runRenderLoop(function () {
            scene.render();
        });
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
    
</body>
</html>
Link to comment
Share on other sites
aldin_abdagic Newbie

aldin_abdagic

Posted
  • Author
Posted
16 hours ago, davrous said:

Hi,

Sorry but I don't understand your question or problem. Can you please share either an online reproduction sample or use our Playground to illustrate your issue: http://playground.babylonjs.com/

Thanks,

David 

Try to clarify. If I insert a render canvas into tabcontent, then nothing appears on the screen, and if I insert a render canvas anywhere in html it works normally ...

<div id="Tokyo" class="tabcontent">
     <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
     </div>
</div> 


 
Link to comment
Share on other sites
JohnK Newbie

JohnK

Posted
Posted

Hi and welcome to the forum and Babylon.js.

Unfortunately I have to tell you there are many  errors in your Javascript code. Really you need help with Javascript at this point not with Babylon.js so perhaps another forum might be more appropriate. Until you get this part of the code correct I would not insert a renderCanvas and try to use Babylon.js but rather replace renderCanvas with text and get your code working correctly to view the text. Change 

4 hours ago, aldin_abdagic said:

<div id="Tokyo" class="tabcontent">
     <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
     </div>
</div>

to 

<div id="Tokyo" class="tabcontent">
     Can I see this text?
</div>

However this time I will give you some pointers.

You start out with all divs with class tabcontent as display:none and there is nothing in your code that changes that. 

tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent.style.display = "none";
    }

tabcontent is an array of elements with classname "tabcontent". You cannot set a style to an array but you can to an element of this array.

Same issue with tablinks.

Link to comment
Share on other sites
aldin_abdagic Newbie

aldin_abdagic

Posted
  • Author
Posted
12 minutes ago, JohnK said:

Hi and welcome to the forum and Babylon.js.

Unfortunately I have to tell you there are many  errors in your Javascript code. Really you need help with Javascript at this point not with Babylon.js so perhaps another forum might be more appropriate. Until you get this part of the code correct I would not insert a renderCanvas and try to use Babylon.js but rather replace renderCanvas with text and get your code working correctly to view the text. Change 

to 


<div id="Tokyo" class="tabcontent">
     Can I see this text?
</div>

However this time I will give you some pointers.

You start out with all divs with class tabcontent as display:none and there is nothing in your code that changes that. 


tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent.style.display = "none";
    }

tabcontent is an array of elements with classname "tabcontent". You cannot set a style to an array but you can to an element of this array.

Same issue with tablinks.

 

Thank you for your reply. How to make a tab I took with w3schools and doing fine. If I put text, image link, or whatever else is doing well. When I put a canvas render and click on the tablinks, just open an empty field.

<div id="Tokyo" class="tabcontent">
     <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
     </div>
</div>

https://www.w3schools.com/howto/howto_js_tabs.asp

the whole code is above.

Sory for my bad english 


 
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
Go to topic listing

  • Recently Browsing   0 members

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