Optimal Bir statik sahne için Three.JS işlem süresi

Question

15-20 nesne, 4 ışık içeren bir sahne var. İşlenecek parçanın özellikleri

function getRenderer(container, width, height) { 
    var renderer; 

    renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true, preserveDrawingBuffer: false }); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(width, height); 
    container.appendChild(renderer.domElement); 
    renderer.shadowMapEnabled = true; 
    renderer.shadowMapType = THREE.PCFSoftShadowMap; 
    renderer.setClearColor(new THREE.Color(0xCCE0FF), 1); 
    renderer.gammaInput = true; 
    renderer.gammaOutput = true; 
    renderer.clear(); 

    return renderer; 
} 

Her işlem döngüsüm, görüntüyü saniyede işler.

function renderLoop() { 
    this.renderer.render(this.scene, this.camera); 
    setTimeout(function() { 
     renderLoop(); 
    }, 1000); 
} 

Karşılıklı sorun this.renderer.render(this.scene, this.camera) sahne işlemek için yaklaşık 100 ms alıyor ama ben en az 30 fps kare hızına sahip olabilir, böylece aşağıda 33ms olmak istiyorum.

Oluşturucu performansını herhangi bir yolla (herhangi bir özelliği veya bir şeyi değiştirmek gibi) optimize etmenin bir yolu var mı?

Çalışma ortamım statik olduğundan ve karmaşık hesaplamalar içermediğinden, worker.js'yi kullanmak istemiyorum.

Answer 1

Statik bir sahneniz varsa, bir animasyon döngüsüne sahip olmanız için bir neden yoktur. Sadece sahneden sonra bir kez - ve tüm varlıklarınız - yüklemeniz gerekir.

Bu nedenle, yükleyici işlevleri için geri aramalar vardır. Ve bu yüzden bir THREE.LoadingManager var.

Çok sayıda kullanım durumu vardır. Özel kullanım durumunuz için çözümler bulmak üzere üç.js örneğini inceleyin. Kamerayı kontrol etmek OrbitControls kullanıyorsanız

, bir zorlayabilir yeniden-işlemek zaman şöyle kamera hamle,: Bütün amaçlı [içinde

controls = new THREE.OrbitControls(camera, renderer.domElement); 
controls.addEventListener('change', render); // use if there is no animation loop 

Three.js r.75