Question

当浏览器窗口缩放时，如何使用以下three.js代码比例进行渲染，即随着浏览器窗口变小，文本会变小？

或者，你能提出另一种方法吗？我尝试使用iframe（使用适当的样式代码使iframe缩放作为浏览器窗口缩放）引用具有three.js渲染的网页。这种方法适用于桌面浏览器，但不适用于iPhone。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="helvetiker_bold.typeface.js"></script>
<script type="text/javascript">
var camera, renderer;
function init3d() {
    var container = document.getElementById('3d');              
    camera = new THREE.PerspectiveCamera( 45, 747 / 531, 1, 2400 );
    camera.position.set( 0, 300, 900 );
    var scene = new THREE.Scene();
    camera.lookAt( scene.position );
    var ambient = new THREE.AmbientLight( 0x606060 );
    scene.add( ambient );
    var spotLight = new THREE.SpotLight( 0xffffcc );
    spotLight.position.set( -1000, 2400, 2400 );
    scene.add( spotLight );

    var textGeo = new THREE.TextGeometry( "HELLO", {
        size: 100,
        height: 20,
        curveSegments: 12,
        font: "helvetiker",
        weight: "bold",
        style: "normal",
        bevelThickness: 2,
        bevelSize: 5,
        bevelEnabled: true
    });
    textGeo.computeBoundingBox();   
    var centerOffset = -0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

    var textMaterial = new THREE.MeshPhongMaterial( { color: 0x80a0c0, specular: 0xffffff } );
    var mesh = new THREE.Mesh( textGeo, textMaterial );
    mesh.position.x = centerOffset;
    mesh.position.y = -10;
    var text = new THREE.Object3D();
    text.add( mesh );
    scene.add( text );

    renderer = new THREE.WebGLRenderer( {antialias:true} );         
    renderer.setClearColor( 0x204060 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );

    container.appendChild( renderer.domElement ); 
    window.addEventListener( 'resize', onWindowResize, false );

    renderer.render( scene, camera );
}

function onWindowResize() {
    camera.aspect = document.getElementById("3d").offsetWidth /document.getElementById("3d").offsetHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( document.getElementById("3d").offsetWidth, document.getElementById("3d").offsetHeight );
}

window.addEventListener ? window.addEventListener("load",init3d,false) : window.attachEvent && window.attachEvent("onload",init3d);
</script>
</head>
<body style="background-color:#339966">
<div style="max-width:747px; max-height:531px; width:100%">
  <div id="3d" style="width:100%"></div>
</div>
</body>
</html>

如何使three.js渲染与响应式设计兼容

0 个答案: