خبرة في إنشاء عدة مشاهد ثلاثية الأبعاد دون إعادة تحميل الصفحة (three.js)

ماذا أفعل

بالنسبة لمشروع شخصي ، كنت بحاجة إلى إيجاد حل للعمل مع عدد من طرز gltf المختلفة.

كان لدي القليل من الخبرة مع three.js ، لذلك بعد قراءة أمثلة GLTFLoader ، تم اختيار هذه المكتبة الخاصة.

يتم تخزين بيانات المشهد في ملف json منفصل وتحتوي على معلومات حول المسار إلى المشهد والإضاءة ومسار الكاميرا وما إلى ذلك. ولكن في هذه المادة تهمنا بدرجة أقل.

من الناحية النظرية ، كان من الضروري رسم عدة مشاهد متتالية. في الممارسة العملية ، تبين أن كل شيء أكثر تعقيدًا إلى حد ما.

كيف أفعل

الة تصوير

كانت الصعوبة الأولى هي رسم طريق للكاميرا للتحرك. من متطلبات

الكاميرا والحركة:

• يجب أن تتحرك الكاميرا على طول النقاط الرئيسية ، واستكمال النقاط الوسيطة ؛
• يجب أن تعتمد الكاميرا على تمرير عجلة الماوس (التحرك للأمام والخلف ، على التوالي) ؛
• يجب على الكاميرا "الفرامل" بسلاسة وتسهيل حركتها.

لبناء المسار واستيفائه ، ابتكر CatmullRomCurve3 طريقة getPoint () ، التي بنت منحنى سلس إلى حد ما. لم ترسم بقية فئات المنحنى ، مثل Curve أو CubicBezierCurve3 ، النقاط الوسيطة بسلاسة كافية. يجب أن يؤخذ هذا في الاعتبار.

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

. 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 , :

. . !