Question

我的三个js画布我有这个非常奇怪（可能是有意？）的错误。我希望它不会填满整个页面并将画布放在div中。

正如您在下面的代码中看到的那样，画布位于div中。我甚至添加了一些测试标题，以确保我不会在这里发疯，但画布似乎在div之外移动，我不知道如何解决这个问题。

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

正如您所看到的，画布已“神奇地”移动到其父div之外

Answer 1

在您的代码中，您有一行document.body.appendChild( renderer.domElement );，它将画布附加到<body>标记的末尾。所以你要在你所需的div之外添加画布。

您可以使用简单的javascript选择器在该div中添加画布，例如： document.getElementById('test').appendChild( renderer.domElement );

或

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

这样您就可以使用id="test"在div中添加渲染器。如果有效，请告诉我。

如何将三个js画布居中？

1 个答案: