19 回收粒子

作者: skoll | 来源:发表于2021-12-12 23:44 被阅读0次

19 回收粒子
粒子群优化算法（PSO）基础
第七章歼灭！
粒子效果-烟花
41 RS对象标签曲线和粒子
C4D TP粒子入门学习笔记-5：呲花炮
iOS-[QuartzCore框架](CAEmitterLaye
塑料打碎机刀片
第109节：细胞的良性粒子与恶性粒子
粒子引擎使用 ——

PCS和SPS这种有粒子总数的粒子系统，就需要回收，因为有总数，当粒子运动到视野外，如果需要在此使用这个粒子，就需要回收

<!DOCTYPE html>
<!-- 添加小人,使用序列图 -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!-- Link to the last version of BabylonJS -->
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
    <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
</head>
<style>
    html, body {
        overflow: hidden;
        width   : 100%;
        height  : 100%;
        margin  : 0;
        padding : 0;
    }

    #renderCanvas {
        width   : 100%;
        height  : 100%;
        touch-action: none;
    }
</style>
<body>
    <canvas id="renderCanvas" touch-action="none"></canvas>
<script>
        const canvas = document.getElementById("renderCanvas");
        var engine = null;
        // 这里还不能用let，不然就爆炸，获取不到engine
        var scene = null;
        var sceneToRender = null;
        const createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
        let createScene=async function(){
            // 关键函数都写在这个里面

            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.ArcRotateCamera("cam", -Math.PI / 2, Math.PI / 2.5,7, BABYLON.Vector3.Zero(), scene);    
            camera.attachControl(canvas, true);
            var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(1, 1, 0), scene);
            light.intensity = 0.5;

            var myTexture = new BABYLON.Texture("https://img0.baidu.com/it/u=1593955789,3403856786&fm=26&fmt=auto", scene);
            // 粒子应用的材质

            let pcs=new BABYLON.PointsCloudSystem('pcs',1,scene)

            pcs.updateParticle=function(particle){
                if(particle.position.y>particle.heightLim){
                    this.recycleParticle(particle)
                }
                particle.position.addInPlace(particle.velocity)
            }
            pcs.recycleParticle = function(particle) {
                particle.position = BABYLON.Vector3.Zero();
                particle.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), Math.random());
                particle.velocity = new BABYLON.Vector3(0.2 - 0.4 * Math.random(), 0.25 + 0.25 * Math.random(), 0.2 - 0.4 * Math.random());
                particle.heightLim = 4 + 0.5 * Math.random();
            }

            pcs.addPoints(10000,pcs.recycleParticle)
            pcs.buildMeshAsync()

            scene.registerBeforeRender(() => pcs.setParticles());
            return scene
        }

    window.initFunction=async function(){
        let asyncEngineCreation=async function(){
            try{
                return createDefaultEngine()
            }catch(e){
                return createDefaultEngine()
            }
        }

        window.engine=await asyncEngineCreation()
        if(!engine){
            throw('engine should not be null')
        }
        window.scene=createScene()
        
    }

    initFunction().then(()=>{
        scene.then((returnedScene)=>{
            sceneToRender=returnedScene
        })

        engine.runRenderLoop(function(){
            if(sceneToRender&&sceneToRender.activeCamera){
                sceneToRender.render()
            }
        })

    })

    window.addEventListener('resize',function(){
        engine.resize()
    })

</script>
<body>