Javascript 调整移动和桌面框架大小时出现的问题

我想我的框架自动调整高度到。。。当屏幕宽度小于。。。（就像这里的sketchfab，我记录了：）

这就是我能走多远：

var container, stats, loader;
var camera, cameraControls, scene, renderer;
init();
animate();


function init() {

container = document.createElement('div');
document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(45, 700 / 450, 1, 10000);
camera.position.z = 1500;
renderer = new THREE.WebGLRenderer( { antialias: false, alpha: false } );
renderer.setClearColor( 0x000000 );
renderer.setSize( 700, 450 );

controls = new THREE.OrbitAndPanControls( camera, renderer.domElement );


// scene

scene = new THREE.Scene();
scene.add( camera );
var ambientLight = new THREE.AmbientLight( 0x273e10 );
            scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 1.2, 100000 );
            pointLight.position.set( -100, 400, 200 );

            camera.add( pointLight );

            var ambient = 0xffffff, diffuse = 0xffffff, specular = 0x585858, shininess = 100;

            var shader = THREE.ShaderLib[ "normalmap" ];
            var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

            uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/512 NORMAL_normals.jpg" );
            uniforms[ "uNormalScale" ].value.set( 1, 1 );

            uniforms[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/datma1k4 copy.jpg" );

            uniforms[ "enableDiffuse" ].value = true;

            uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
            uniforms[ "uSpecularColor" ].value.setHex( specular );
            uniforms[ "uAmbientColor" ].value.setHex( ambient );

            uniforms[ "uShininess" ].value = shininess;


            var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
            var material = new THREE.ShaderMaterial( parameters );


            loader = new THREE.JSONLoader( true );
            loader.load( "obj/leeperrysmith/datmascale.js", function( geometry ) { createScene( geometry, 100, material ) } );
            container.appendChild( renderer.domElement );
            window.addEventListener('resize', onWindowResize, false);}
 function createScene( geometry, scale, material ) {

            geometry.computeTangents();
            geometry.computeVertexNormals();
            mesh = new THREE.Mesh( geometry, material );
            mesh.position.y = - 0;
            mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
            scene.add( mesh );
          }

function onWindowResize() {

if (  window.innerWidth < 650 ) {
    camera.aspect = window.innerWidth / 350;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, 350);

    if ( window.innerWidth < 500 ) {
           camera.aspect = window.innerWidth / 250;
           camera.updateProjectionMatrix();
           renderer.setSize(window.innerWidth, 250);
    }
}
else {
    camera.aspect = 700 / 450;
    camera.updateProjectionMatrix();
    renderer.setSize(700, 450);
    }}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}

function render() {

renderer.render(scene, camera);
}

var容器、stats、loader；
var摄影机、CameraControl、场景、渲染器；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像机=新的三个透视摄像机（45700/450,11000）；
摄像机位置z=1500；
renderer=new THREE.WebGLRenderer（{antialas:false，alpha:false}）；
renderer.setClearColor（0x000000）；
渲染器。设置大小（700450）；
控件=新的三个.OrbitAndPanControls（摄影机、渲染器.doElement）；
//场面
场景=新的三个。场景（）；
场景。添加（摄影机）；
var环境光=新的三个环境光（0x273e10）；
场景。添加（环境光）；
var pointLight=新的三点光源（0xffffff，1.210000）；
点光源。位置。设置（-100400200）；
添加（点光源）；
var环境光=0xffffff，漫反射=0xffffff，镜面反射=0x585858，光泽度=100；
var shader=3.ShaderLib[“法线贴图”]；
var uniforms=THREE.UniformsUtils.clone（shader.uniforms）；
制服[“tNormal”]。值=三个.ImageUtils.loadTexture（“obj/leeperrysmith/512 NORMAL_normals.jpg”）；
制服[“非标准刻度”]。数值。集合（1，1）；
制服[“tDiffuse”].value=THREE.ImageUtils.loadTexture（“obj/leeperrysmith/datma1k4 copy.jpg”）；
制服[“enableDiffuse”]。值=真；
制服[“uDiffuseColor”].value.setHex（漫反射）；
制服[“uSpecularColor”]。值。setHex（镜面反射）；
制服[“uAmbientColor”].value.setHex（环境光）；
制服[“Ushiness”]。价值=光泽；
var参数={fragmentShader:shader.fragmentShader，vertexShader:shader.vertexShader，制服：制服，灯光：true}；
var material=新的三个.ShaderMaterial（参数）；
loader=new THREE.JSONLoader（true）；
load（“obj/leeperrysmith/datmascale.js”，函数（几何）{createScene（几何，100，材质）}）；
container.appendChild（renderer.doElement）；
addEventListener（'resize'，onWindowResize，false）；}
函数createScene（几何体、比例、材质）{
几何。计算切线（）；
geometry.computeVertexNormals（）；
网格=新的三个网格（几何体、材质）；
mesh.position.y=-0；
mesh.scale.x=mesh.scale.y=mesh.scale.z=scale；
场景。添加（网格）；
}
函数onWindowResize（）{
如果（窗内宽度<650）{
camera.aspect=window.innerWidth/350；
camera.updateProjectMatrix（）；
渲染器.setSize（window.innerWidth，350）；
如果（窗内宽度<500）{
camera.aspect=window.innerWidth/250；
camera.updateProjectMatrix（）；
渲染器.setSize（window.innerWidth，250）；
}
}
否则{
相机宽高比=700/450；
camera.updateProjectMatrix（）；
渲染器。设置大小（700450）；
}}
函数animate（）{
请求动画帧（动画）；
控件更新（）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}

我通过iframe将其嵌入到我的网页：

<iframe src="/full/1.html" width="80%" height="450" allowfullscreen="allowfullscreen" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

问题是当框架高度调整得更小时，会留下一个空间

截图：

当宽度限制但不象sketchfab那样留下空间时，如何将框架高度调整得更小

---

谢谢。

这是因为在html中创建iFrame时，您将iFrame高度固定为450px：

<iframe src="/full/1.html" width="80%" height="450"....

也许能解决你的问题

---

希望这有帮助

谢谢你的回答，我完全按照你说的做了，我得到了这个错误：Uncaught TypeError:cannotread属性'style'为null。你能纠正这个错误吗？@n2g6t1q1我的第一个猜测是，你的html代码是在调用javascript之后加载的，然后在第一次调用时就无法识别id“myFrame”。您可以将js移动到html的末尾，或者使用“onLoad”函数确保在页面完全加载后调用js。希望这个帮助AWW，我不知道如何在我的代码中添加onLoad函数，你能把它编辑到我的代码中吗？@n2g6t1q1:这只是一个猜测。您是否尝试将代码移动到html的末尾？我想这是解决你的错误的最简单的方法。告诉我它是否有效，如果无效，发布你的全部代码。我认为这里有一个混乱。事实上，您有两个html页面。因此，必须编写2个onResize函数。包含iframe的页面上的第一个将调整框架大小。embbed页面上的第二个在调整视口大小时调整视口大小。如果还不够清楚，告诉我，我会发布另一个答案。

<iframe id="myFrame" src="/full/1.html" width="80%" height="450"....

document.getElementById("myFrame").style.height = 200px; ...