admin管理员组

文章数量:1414908

I have this really weird (possibly intended?) bug with my three js canvas. I want to have it not fill the plete page and center the canvas inside a div.

As you can see in the code below, the canvas is inside the div. I even added some test headings to make sure I'm not going crazy here, but the canvas seems to move itself outside the div and I have no idea how to fix this.

<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
            border: 1px solid red;
        }
    </style>
    <style type="text/css" src="css/main.css"></style>
</head>
<body>
    <div id="test">
        <h1>test1</h1>
        <canvas id="canvasID"></canvas>
        <h2>test2</h2>
    </div>  
    <script src=".js/blob/master/examples/js/Detector.js"></script>
    <script src="three.js-master/build/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        var canvas = document.getElementById("canvasID");
        var renderer = new THREE.WebGLRenderer({ canvas: canvas });

        renderer.setSize( window.innerWidth*0.9, window.innerHeight*0.9 );
        document.body.appendChild( renderer.domElement );

        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;
        function render() {
            requestAnimationFrame( render );
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render( scene, camera );
        }
        render();

        if (Detector.webgl) {
            init();
            animate();
        } else {
            var warning = Detector.getWebGLErrorMessage();
            document.getElementById('container').appendChild(warning);
        }
    </script>
</body>

As you can see, the canvas has "magically" moved outside of its parent div

I have this really weird (possibly intended?) bug with my three js canvas. I want to have it not fill the plete page and center the canvas inside a div.

As you can see in the code below, the canvas is inside the div. I even added some test headings to make sure I'm not going crazy here, but the canvas seems to move itself outside the div and I have no idea how to fix this.

<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
            border: 1px solid red;
        }
    </style>
    <style type="text/css" src="css/main.css"></style>
</head>
<body>
    <div id="test">
        <h1>test1</h1>
        <canvas id="canvasID"></canvas>
        <h2>test2</h2>
    </div>  
    <script src="https://github./mrdoob/three.js/blob/master/examples/js/Detector.js"></script>
    <script src="three.js-master/build/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        var canvas = document.getElementById("canvasID");
        var renderer = new THREE.WebGLRenderer({ canvas: canvas });

        renderer.setSize( window.innerWidth*0.9, window.innerHeight*0.9 );
        document.body.appendChild( renderer.domElement );

        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;
        function render() {
            requestAnimationFrame( render );
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render( scene, camera );
        }
        render();

        if (Detector.webgl) {
            init();
            animate();
        } else {
            var warning = Detector.getWebGLErrorMessage();
            document.getElementById('container').appendChild(warning);
        }
    </script>
</body>

As you can see, the canvas has "magically" moved outside of its parent div

  • javascript
  • css
  • canvas
  • three.js
Share Improve this question asked May 17, 2017 at 15:44 Eddy VinckEddy Vinck 4501 gold badge5 silver badges17 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

In your code you have this line document.body.appendChild( renderer.domElement ); which appends the canvas to the end of the <body> tag. So you are adding the canvas outside of your required div.

You can add your canvas inside that div with a simple javascript selector like: document.getElementById('test').appendChild( renderer.domElement );

or

document.querySelector('#test').appendChild( renderer.domElement );

That way you are adding the renderer inside the div with the id="test". Let me know if it worked.

本文标签： javascriptHow to center the three js canvasStack Overflow

版权声明：本文标题：javascript - How to center the three js canvas? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745157944a2645288.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。