Pengalaman dalam membuat beberapa adegan 3d tanpa memuat ulang halaman (three.js)

Apa yang saya lakukan

Untuk proyek pribadi, saya perlu menemukan solusi untuk bekerja dengan sejumlah model gltf yang berbeda.

Saya memiliki sedikit pengalaman dengan three.js, jadi setelah membaca contoh GLTFLoader, perpustakaan khusus ini dipilih.

Data pemandangan disimpan dalam file json terpisah dan berisi informasi tentang jalur ke pemandangan, pencahayaan, jalur kamera, dll. tetapi dalam materi ini mereka menarik kita pada tingkat yang lebih rendah.

Secara teori, perlu untuk menggambar beberapa adegan secara berurutan. Dalam praktiknya, semuanya ternyata menjadi lebih rumit.

Bagaimana saya

Kamera

Kesulitan pertama adalah merencanakan rute pergerakan kamera. Dari persyaratan

kamera dan pergerakan:

• Kamera harus bergerak di sepanjang poin-poin utama, menyelesaikan poin-poin perantara;
• kamera harus bergantung pada gulungan roda mouse (bergerak maju dan mundur, masing-masing);
• kamera harus "mengerem" dengan mulus dan memperlancar pergerakannya.

Untuk membangun dan menginterpolasi jalur, CatmullRomCurve3 hadir dengan metode getPoint (), yang membangun kurva yang cukup mulus. Kelas kurva lainnya, seperti Curve atau CubicBezierCurve3, tidak menggambar titik tengah dengan cukup mulus. Ini harus diperhitungkan.

. , ( ). ( ). , , , ( ) . , , .

. TrackballControls (0, 0, 0). (W, S, D, A ), , , ( ).

, fps . , - . . . .

, . , . , , . , GPU , .

three.js SPA ( ) , .

for (let i = mScene.scene.children.length - 1; i >= 0; i--) {
    mScene.scene.remove(mScene.scene.children[i]); //  ,    
}

. . dispose() :

In general, there is no definite recommendation for this. It highly depends on the specific use case when calling dispose() is appropriate. It's important to highlight that it's not always necessary to dispose objects all the time. A good example for this is a game which consists of multiple levels.

, dispose. ? ( ):

dispose_scene() {
    let self = this;
    self.scroll_timer_stop();
    this.scene.traverse(function (object) {
    self.scroll_timer_stop();
        if (object.type === "Mesh" || object.type === "Group") {
            self.dispose_hierarchy(object, self.dispose_node);
            self.scene.remove(object);
            object = null;
       }
    });
}

dispose_hierarchy(node, callback) {
    for (var i = node.children.length - 1; i >= 0; i--) {
        var child = node.children[i];
        this.dispose_hierarchy(child, callback);
        callback(child);
    }
}

dispose_node(node) {
        if (node.constructor.name === "Mesh") {
            node.parent = undefined;
            if (node.geometry) {
                node.geometry.dispose();
            }
            if (node.geometry) {
                node.geometry.dispose();
            }
            let material = node.material;
            if (material) {
                if (material.map) {
                    material.map.dispose();
                }
                if (material.lightMap) {
                    material.lightMap.dispose();
                }
                ...
                material.dispose();
                material = undefined;
            }
        } else if (node.constructor.name === "Object3D") {
            node.parent.remove(node);
            node.parent = null;
        }
}

dispose_postprocessing() { 
        this.postprocessing.rtTextureColors.dispose();
        this.postprocessing.rtTextureDepth.dispose();
        ...
        this.postprocessing.materialGodraysDepthMask.dispose();
        this.postprocessing.materialGodraysGenerate.dispose();
        ...
}

, three.js . this.postprocessing.dispose() , , dispose() , , . , , . . . Geforce 2070 super , :

. . !