Javascript 三个js渲染器大小问题。试着设定一个完美的尺寸_Javascript_Html_Css

Javascript 三个js渲染器大小问题。试着设定一个完美的尺寸

javascript html css

Javascript 三个js渲染器大小问题。试着设定一个完美的尺寸,javascript,html,css,Javascript,Html,Css,我一直在研究三个js模型，将模型嵌入到我的网站中。终于成功了，但只有一个问题。我无法使renderer.setSize（）适合我的div。换句话说，我可以看到我不想看到的滚动条。如何设置大小使其完全适合我的画布我看到一篇关于同样问题的帖子，他也想避免滚动。我试着按照帖子上的回答去做，但什么也没发生。然后，我开始阅读三个js文档，并遵循其中的说明 .setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : nul

我一直在研究三个js模型，将模型嵌入到我的网站中。终于成功了，但只有一个问题。我无法使renderer.setSize（）适合我的div。换句话说，我可以看到我不想看到的滚动条。如何设置大小使其完全适合我的画布

我看到一篇关于同样问题的帖子，他也想避免滚动。我试着按照帖子上的回答去做，但什么也没发生。然后，我开始阅读三个js文档，并遵循其中的说明

.setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : null

还是想不出来。为什么文档中的代码都不起作用？但是，我不确定是否找到了窍门，我只是在玩设置大小的值

renderer.setSize( window.innerWidth * 0.99 ,window.innerHeight * 0.99);

如你所见，我添加了*0.99，不再有滚动条了！我不是故意这样做的，但是调整它的正确代码是什么？这是我的密码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>THEE JS BOX APP</title>
        <style>
            body { margin: 0; width: 100%; height: 100% }

        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/OrbitControls.js"></script>
        <script src="js/OBJloader.js"></script>
        <script>

            // CREATING AN EMPTY SCENE
            var scene = new THREE.Scene();

            // CAMERA
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
            camera.position.z = 200;

            // ORBIT CONTROL
            var controls = new THREE.OrbitControls( camera );

            // RENDERER
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor("#ffffff");
            renderer.setSize( window.innerWidth * 0.99 ,window.innerHeight * 0.99);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFShadowMap;


            // APPEND RENDERER TO DOM
            document.body.appendChild( renderer.domElement );

            // WINDOW RESIZE
            window.addEventListener( 'resize', onWindowResize, false );

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

            // instantiate a loader
            var loader = new THREE.OBJLoader();

            // load a resource
            loader.load(
                // resource URL
                'img/logovoivode1.obj',
                // called when resource is loaded
                function ( object ) {
                    scene.add( object );
                },
                // called when loading is in progresses
                function ( xhr ) {
                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
                },
                // called when loading has errors
                function ( error ) {
                    console.log( 'An error happened' );
                }
            );

            // ***************************** LIGHTING **********************************//

            // White directional light at half intensity shining from the top.
            //var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 );
            //scene.add( directionalLight );

            var light = new THREE.AmbientLight( 0xffffff, 0.5); // soft white light
            scene.add( light );

            var pointlight = new THREE.PointLight( 0xffffff, 0.5, 1000);
            light.position.set(10, 0, 25);
            scene.add(pointlight);

            //var DLight = new THREE.DirectionalLight( 0xffffff, 50);
            //scene.add(DLight);

            // var spotlight = new THREE.SpotLight( 0xffffff, 0.5, 1000, 0.3);

            // ************************ END-OF-LIGHTING *****************************//

            // CREATING A BOX
            // var geometry = new THREE.BoxGeometry(1, 1, 1);
            // var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe:true});
            // var cube = new THREE.Mesh( geometry, material);


            // ADD CUBE TO THE SCENE
            // scene.add(cube);
            // ANIMATION LOOP

            function animate() {
                requestAnimationFrame( animate );
                //scene.rotation.x += 0.01;
                //scene.rotation.y += 0.01;
                renderer.render( scene, camera );
            }
            animate();
        </script>
    </body>
</html>


电子盒应用程序
正文{边距：0；宽度：100%；高度：100%}
//创建空场景
var scene=new THREE.scene（）；
//摄像机
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.1，9000）；
摄像机位置z=200；
//轨道控制
var控制装置=新的三个轨道控制装置（摄像机）；
//渲染器
var renderer=new THREE.WebGLRenderer（）；
renderer.setClearColor（“#ffffff”）；
renderer.setSize（window.innerWidth*0.99，window.innerHeight*0.99）；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFShadowMap；
//将渲染器附加到DOM
document.body.appendChild（renderer.doElement）；
//调整窗口大小
addEventListener（'resize'，onWindowResize，false）；
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
//实例化加载程序
var loader=new THREE.OBJLoader（）；
//加载资源
装载机(
//资源URL
“img/logovoivode1.obj”，
//在加载资源时调用
功能（对象）{
场景。添加（对象）；
},
//正在加载时调用
函数（xhr）{
log（（xhr.loaded/xhr.total*100）+'%loaded'）；
},
//加载有错误时调用
函数（错误）{
log（'发生错误'）；
}
);
//*************************************照明**********************************//
//半强度的白色平行光从顶部照射。
//var方向灯=新的三个方向灯（0xffffff，5）；
//场景。添加（方向光）；
var灯光=新的三个环境灯光（0xffffff，0.5）；//柔和的白光
场景。添加（灯光）；
var pointlight=新的三点光源（0xffffff，0.51000）；
光。位置。设置（10，0，25）；
场景。添加（点光源）；
//var DLight=新的三方向光（0xffffff，50）；
//场景。添加（DLight）；
//var聚光灯=新的三个聚光灯（0xffffff，0.51000，0.3）；
//*******************************末端照明*****************************//
//创建长方体
//var geometry=新的3.BoxGeometry（1,1,1）；
//var material=new THREE.MeshBasicMaterial（{color:0xffffff，线框：true}）；
//var cube=新的三个网格（几何体、材质）；
//将立方体添加到场景中
//场景.添加（立方体）；
//动画循环
函数animate（）{
请求动画帧（动画）；
//scene.rotation.x+=0.01；
//scene.rotation.y+=0.01；
渲染器。渲染（场景、摄影机）；
}
制作动画（）；

您的问题是由“内部元素空白”引起的

当html解析器解析您的源代码时，它还将标记之间的空格/entets/制表符解析为文本，然后将其缩小到只有1个空格。这1个空格是您问题的原因，但了解原因是解决问题的第一步

原始问题，供参考：

正文{
保证金：0；
宽度：100%；
身高：100%；
}


//创建空场景
var scene=new THREE.scene（）；
//摄像机
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.1，9000）；
摄像机位置z=200；
//轨道控制
var控制装置=新的三个轨道控制装置（摄像机）；
//渲染器
var renderer=new THREE.WebGLRenderer（）；
renderer.setClearColor（“#ffffff”）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFShadowMap；
//将渲染器附加到DOM
document.body.appendChild（renderer.doElement）；
//调整窗口大小
addEventListener（'resize'，onWindowResize，false）；
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
添加（新的THREE.Mesh（新的THREE.CubeGeometry（100130,70），新的THREE.MeshBasicMaterial（{color:0x444444}））；
函数animate（）{
请求动画帧（动画）；
渲染器.render(