0

我希望我的框架自动将高度调整为...当屏幕宽度小于...时（就像这里的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那样离开空间时，如何将框架高度调整为更小？

谢谢。

4

1 回答 1

0

这是因为您在 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; ...

可能会解决您的问题。

希望这可以帮助

于 2013-11-08T15:58:16.427 回答