aldin_abdagic

Babylon.js render canvas not open in tab?

Recommended Posts

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>

Share this post


Link to post
Share on other sites
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>


 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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


 

Share this post


Link to post
Share on other sites

The script in your first post

tabcontent.style.display = "none";

and the script in the W3schools link are not the same. As I said you cannot set style to an array

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.