Clever Geek Handbook

ページをリロードせずに複数の3Dシーンを作成した経験（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 , :







. . !



More articles:


All Articles