angularjsthree.jsobjloader

ThreeJs OBJLoader output looks very pixelated


I am trying to load .obj file through OBJLoader in angularjs. But the output is very pixelated. obj output

Tried changing camera position & perspective(codes are commented), then it results in very smaller output, i need to zoom in through mouse in that case.But if i open the same .obj file in 3D Boulder or any other tools, it looks fine.

I have set camera & scene like this -

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

Loading .obj file like this -

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

what should be good camera & scene parameters so that it will work on all models & no need to zoom in or zoom out. Please Guide / Help.


Solution

  •     this.renderer.setPixelRatio(window.devicePixelRatio);
    

    this works for me.