Question

当屏幕宽度小于...时，我希望我的框架自动调整高度...（就像sketchfab这里，我记录：http://www.youtube.com/watch?v=_y5ckVFGHKU&feature=youtu.be）

这是我能走多远：

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);
}

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

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

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

屏幕截图：

http://i.stack.imgur.com/IEOz2.jpg

当宽度限制但如何不像Sketchfab那样留下空间时，如何调整框架高度的大小？

感谢。

Answer 1

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

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

在onResize函数中，您正在更新视口高度，而不是帧高度。

在您的框架中添加ID，如下所示：

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

使用以下调用更新onResize函数中帧的高度：

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

可能会解决您的问题。

希望这有帮助

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

1 个答案: