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