Threejs Mesh缩放到渲染器而不保留纵横比

时间:2014-09-23 07:18:09

标签: javascript three.js

我正在使用来自threejs github的STLLoader插件

这是我的代码段

this.loadSTL = function(scene, stlFile){
      var loader = new THREE.STLLoader();
      loader.addEventListener('load', function(geometry, materials){
        var geometry = geometry.content;
        var material = new THREE.MeshPhongMaterial({ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200});
        var mesh = new THREE.Mesh(geometry, material);

        mesh.position.set(0, -0.9, 0);
        mesh.rotation.set(0, 0, 0);
        mesh.scale.set( 0.012, 0.012, 0.012);

        scene.add(mesh);
      });
      loader.load(stlFile);
    }

这里的问题是我通过stl文件加载的对象根据窗口分辨率增加/减少高度。我们需要设置一些东西来保持网格的宽度/高度不变,而不是随屏幕/窗口分辨率而变化。

2 个答案:

答案 0 :(得分:3)

也许您应该处理窗口调整大小事件并执行以下操作:

function OnResize ()
{
    camera.aspect = canvas.width / canvas.height;
    camera.updateProjectionMatrix ();
    renderer.setSize (canvas.width, canvas.height);
};

答案 1 :(得分:0)

设置camera.aspect = 1解决了这个问题。正确的解决方案是设置

camera.aspect = $container.width/$container.height