ThreeJs OBJLoader 输出看起来非常像素化

Question

我正在尝试通过 angularjs 中的 OBJLoader 加载 .obj 文件。但是输出非常像素化。

尝试更改 camera position & perspective（代码已注释），结果输出非常小，我需要通过鼠标放大 case.But 如果我打开3D Boulder 或任何其他工具中的相同 .obj 文件，它看起来不错。

我是这样设置相机和场景的 -

    this.renderer = new THREE.WebGLRenderer({ canvas: this.canvasRef.nativeElement });
    // this.renderer.setSize( window.innerWidth, window.innerHeight );
    // this.renderer.setSize(640, 720);

    // scene
    this.scene = new THREE.Scene();
    this.renderer.setClearColor(0xcdcbcb, 1);

    // camera
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
    // this.camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.01, 10000);
    this.camera.position.set(1, 1, 1);
    // this.camera.position.set(0, 0, 1);
    // this.camera.position.set(113, 111, 113);

    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.scene.add(new THREE.AmbientLight(0x222222));
    this.scene.add(this.camera); // required, because we are adding a light as a child of the camera

    // controls
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);

    // lights
    var light = new THREE.PointLight(0xffffff, 0.8);
    this.camera.add(light);

    var geometry = new THREE.BoxGeometry(1,1,1);

像这样加载 .obj 文件 -

    var objLoader = new OBJLoader();
    objLoader.load("../../assets/temp_data/11.obj", function (object) {
      console.log(object);
      this.scene.add(object);
    }.bind(this));
    this.animate();

什么应该是好的相机和场景参数，以便它适用于所有模型并且无需放大或缩小。请指导/帮助。

Answer 1

    this.renderer.setPixelRatio(window.devicePixelRatio);

这对我有用。

ThreeJs OBJLoader 输出看起来非常像素化

ThreeJs OBJLoader output looks very pixelated

angularjs

three.js

objloader