После загрузки файла OBJ, панорамирование для 3D-модели работает хорошо.
Three.JS Конфигурация как показано ниже
Camera : Orthographic camera
Controls: Orbit Controls
Loader : OBJ Loader2
bounding box : Box3
Я использую приведенный ниже код для загрузки 3D-модели
OBJLoader2Example.prototype.initGL = function () {
this.renderer = new THREE.WebGLRenderer( {
canvas: this.canvas,
antialias: true,
autoClear: true,
preserveDrawingBuffer: true
} );
this.renderer.setClearColor( 0xcccccc );
this.scene = new THREE.Scene();
this.camera = new THREE.OrthographicCamera( 1.2 * frustumSize * aspect / - 2, 1.2 * frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, this.cameraDefaults.near, this.cameraDefaults.far );
this.resetCamera();
this.camera.z = 200;
// this.camera.zoom = 5;
this.camera.position.z = 400;
this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
var control_factor = 1;
this.controls.rotateSpeed = 1.5* control_factor;
this.controls.zoomSpeed = 1.2*control_factor;
this.controls.panSpeed = 1*control_factor;
this.controls.noZoom = false;
this.controls.staticMoving = true;
this.controls.enablePan = true;
this.controls.noPan = false;
this.controls.enableDamping = false;
this.controls.dynamicDampingFactor = 0.3;
this.controls.keys = [ 65, 83, 68 ];
var ambientLight = new THREE.AmbientLight( 0x404040 );
var directionalLight1 = new THREE.DirectionalLight( 0xC0C090 );
var directionalLight2 = new THREE.DirectionalLight( 0xC0C090 );
directionalLight1.position.set( -100, -50, 100 );
directionalLight2.position.set( 100, 50, -100 );
this.scene.add( directionalLight1 );
this.scene.add( directionalLight2 );
this.scene.add( ambientLight );
};
OBJLoader2Example.prototype.initContent_bar = function () {
var modelName = 'bars';
var scope = this;
var objLoader = new THREE.OBJLoader2();
var callbackOnLoad = function ( event ) {
scope.bars_object = event.detail.loaderRootNode;
for(var i=0; i < scope.bars_object.children.length; i++){
scope.bars_object.children[i].material.shading = THREE.FlatShading;
}
var demo_angle = parseFloat(searchToObject().demo);
if(isNaN(demo_angle) == false ){
var angle_radians = (demo_angle * Math.PI)/180;
scope.bars_object.rotateX(angle_radians);
}
scope.bars_object.castShadow = true;
scope.scene.add( scope.bars_object );
console.log( 'Loading complete: ' + event.detail.modelName );
//scope._reportProgress( { detail: { text: '' } } );
var box = new THREE.Box3().setFromObject(scope.bars_object);
scope.bars_object.position.y = -box.getSize().y / 2 - 10;
scope.bars_object.position.z = -box.getSize().z ;
scope.bars_object_size = box.getSize();
scope.bars_object_max = box.max;
var dist = 400;
var height = box.getSize().y + 10;
console.info(height);
var fov = 2 * Math.atan( height / ( 2 * dist ) ) * ( 180 / Math.PI ); // in degrees
console.info(fov);
app.camera.fov = 45;//fov;
app.camera.position.z = height+(height/2);
var strdemo = searchToObject().demo;
app.resizeDisplayGL();
$('#RngWindowYposition').attr({min:0, max:scope.bars_object_size.y});
};
var onLoadMtl = function ( materials ) {
objLoader.setModelName( modelName );
objLoader.setMaterials( materials );
objLoader.setLogging( true, true );
objLoader.load( 'models/model_proper_origin.obj', callbackOnLoad, null, null, null, false );
};
objLoader.load( 'models/model_proper_origin.obj' , callbackOnLoad, null, null, null, false );
};
После нажатия кнопки я перезагружаю вид, как показано ниже
OBJLoader2Example.prototype.resetView = function () {
this.controls.reset();
this.controls.noPan = false;
this.controls.panSpeed = 2; // Setting to previous value but not working
}
var frontview = document.getElementById('front');
frontview.addEventListener("click", function(){ // Action for Front view button click
app.resetView(); // control reset
app.bars_object.setRotationFromAxisAngle (new THREE.Vector3(0,0,0),0);
var angle_radians = (209.5 * Math.PI)/180;
var angle_radians2 = (0 * Math.PI)/180;
var angle_radians3 = (0 * Math.PI)/180;
app.bars_object.rotateX(angle_radians);
app.bars_object.rotateY(angle_radians2);
app.bars_object.rotateZ(angle_radians3);
app.camera.zoom = 0.9;
app.controls.panSpeed = 2;
app.controls.update();
app.camera.updateProjectionMatrix();
});
Но после вызова control.reset()
панорамирование очень медленно для больших трехмерных объектов. Хотя я устанавливаю panSpeed = 2, он не работает, как раньше. Однако вращение 3D-модели работает хорошо до и после control.reset()