三個 JS 畫布未調整到移動設備窗口寬度

Question

我正在學習如何使用 Three JS 制作 3D 動畫，並且我正在嘗試使用多個旋轉立方體制作一個。 問題是當放大或縮小或在移動設備上查看頁面時，整個畫布不會調整大小，似乎相機裁剪了場景，因為對象保持相同的大小並且只顯示部分動畫。 我想讓整個畫布的寬度等於瀏覽器窗口的寬度，高度與任何屏幕寬度的比例尺寸以及用戶是否嘗試放大或縮小。 有人可以幫忙嗎？ 提前致謝。

<html>
    <head>

        <style>
            body { margin: 0; }
        canvas { 
            width: inherit !important;
            height: inherit !important;
            margin: 0 auto; 
            min-width: 300px;
            min-height: 100px;
            max-height: 485px;
            max-width: 900px;
        }
        #anim{
            margin: 0 auto;
            max-width: 900px !important;
            width: 100%;

            background-color: grey;
        }
    </style>
</head>
<body>
    <script src="js/three.min.js"></script>
    <div id="anim">
    </div>
    <script>

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 8, window.innerWidth/window.innerHeight, 1, 1000 );
        var div = document.getElementById("anim");

        var renderer = new THREE.WebGLRenderer();
        div.appendChild(renderer.domElement)
        document.body.appendChild( div );
        var cubes =[];
        for ( i = 0; i <= 9; i++) {
            var geometry = new THREE.BoxGeometry( 0.3, 0.3, 0.3 ); 
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe:true } );
            var cube = new THREE.Mesh( geometry, material );
            if(i<5){
                cube.position.set(-1+(i/2),-0.4,0);
            }else{
                cube.position.set(-3.5+(i/2),0.4,0);
            }


            cubes[i] = cube;
            scene.add(cubes[i]);
        }
        camera.position.z=10;
        function render() {

            for ( var i = 0 ; i < scene.children.length; i ++ ) {

                var object = scene.children[ i ];

                object.rotation.x += 0.01;
                object.rotation.y += 0.1;


            }


            requestAnimationFrame( render );
            renderer.render(scene, camera);

        };

        renderer.setSize( window.innerWidth, window.innerHeight);
        function onWindowResize() { 
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth,  window.innerHeight);

        }
        window.addEventListener( 'resize', onWindowResize, false );

        render();
        </script>
    </body>
</html>

Answer 1

當我將此代碼用於我的畫布以響應所有窗口大小時，您可以在下面查看我的代碼。

 function render() { if (resize(renderer)) { camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } renderer.render(scene, camera); requestAnimationFrame(render); } function resize(renderer) { const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } window.addEventListener( 'resize', function() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ) })

三個 JS 畫布未調整到移動設備窗口寬度

問題描述

1 個解決方案

解決方案1
0 2020-04-15 12:52:24

三個 JS 畫布未調整到移動設備窗口寬度

問題描述

1 個解決方案

解決方案1 0 2020-04-15 12:52:24

解決方案1
0 2020-04-15 12:52:24