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.
this.renderer.setPixelRatio(window.devicePixelRatio);
this works for me.