У меня есть следующий код для отображения трехмерного объекта: -
this.col=new Color().set(this.colorname);
this.renderer = new WebGLRenderer({alpha:true,canvas:this.myCanvas.nativeElement});
this.renderer.setSize(window.innerWidth/2,window.innerHeight/2);
this.scene=new Scene();
this.scene.background=new Color(0xFFFFFF);
this.camera=new
PerspectiveCamera(this.perspective,window.innerWidth/window.innerHeight,0.01,10000);
this.camera.position.set(500,500,500);
this.camera.aspect=window.innerWidth/window.innerHeight;
this.scene.add( new AmbientLight(0x222222));
this.scene.add( this.camera );
var light = new PointLight( 0xffffff, 0.8 );
light.position.z=500;
light.position.y=500;
this.camera.add( light );
var controls = new OrbitControls(this.camera,this.renderer.domElement);
controls.autoRotate = true;
controls.autoRotateSpeed = 3.0;
loader.load(this.filename,geometry =>{
var material = new MeshPhongMaterial( { color: this.col });
var mesh = new Mesh( geometry, material );
this.scene.add(mesh);
})
this.animate(controls);
}
animate(controls:OrbitControls) {
this.camera.lookAt( this.scene.position );
this.renderer.render(this.scene, this.camera);
controls.update();
window.requestAnimationFrame(_ => this.animate(controls));
}
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize( window.innerWidth/2, window.innerHeight/2);
}
}
Объект при увеличении не центрируется на холсте. Как я могу сохранить объект всегда в центре средства визуализации и выполнять такие задачи, как увеличение и уменьшение масштаба?