ThreeJs OBJLoader output looks very pixelated

Question

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

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.

before you `this.scene.add(object);` I think you can `object.scale(3)` or something like that — Jay Li, Feb 06 '20 at 06:30
Why did you comment out `this.renderer.setSize();`? That's the line that sets the resolution of the renderer, that's why it's pixelated. — M -, Feb 06 '20 at 06:34
@Marquizzo Thank you so much for pointing out. I checked & That's the issue. Actually I am showing that in a modal, not in full widow, that's why i had commented it to fit it into canvas. — Jay Prakash Thakur, Feb 06 '20 at 07:38
@Marquizzo one more issue if you could help in this question tag itself. Some models are too large & some are very small. Larger models don't come in center of screen. What to do so that it will work on all types of models? — Jay Prakash Thakur, Feb 06 '20 at 07:43

score 0 · Accepted Answer · answered Feb 18 '20 at 14:24

0

    this.renderer.setPixelRatio(window.devicePixelRatio);

this works for me.

answered Feb 18 '20 at 14:24

Jay Prakash Thakur

545
7
20

ThreeJs OBJLoader output looks very pixelated

1 Answers1