Как исправить панорамирование после control.reset () в three.js - PullRequest
2 голосов
/ 30 апреля 2019

После загрузки файла 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()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...