21three.js粒子系统（一）

作者: 狂暴机甲 | 来源:发表于2018-05-04 23:28 被阅读3次

21three.js粒子系统（一）
Unreal万能材质球模板参考0120bate1
粒子系统与创建克隆
音视频开发之旅（15） OpenGL ES粒子系统 - 喷泉
粒子动画的使用和原理
粒子系统
粒子系统参数详解
iOS-[QuartzCore框架](CAEmitterLaye
粒子
遍历修改粒子系统渲染材质的问题

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21three.js粒子系统</title>
    <script src="lastjs/three.js"></script>
    <script src="js/TrackballControls.js"></script>
    <script src="js/stats.js"></script>
    <script src="js/dat.gui.js"></script>
    <style>
        body{margin: 0;overflow: hidden;position: relative}
    </style>
</head>
<body>
<div style="position: absolute">粒子系统</div>
<div id="webgl-output"></div>
<script type="text/javascript">

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000);
    camera.position.set(0,0,150);
    camera.lookAt(scene.position);
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor('#a5efa5');
    renderer.setSize(window.innerWidth,window.innerHeight);
    var axes = new THREE.AxisHelper(10);
    scene.add(axes);
    var amblight = new THREE.AmbientLight(0x666666);
    scene.add(amblight);
    var spotllight = new THREE.SpotLight(0xCCCCCC);
    spotllight.position.set(0,50,0);
    scene.add(spotllight);

    document.getElementById('webgl-output').appendChild(renderer.domElement);

    createSprites();
    function createSprites() {
        var material = new THREE.SpriteMaterial();
        for (var x = -5; x < 5; x++) {
            for (var y = -5; y < 5; y++) {
                var sprite = new THREE.Sprite(material);
                sprite.position.set(x * 10, y * 10, 0);
                scene.add(sprite);
            }
        }
    }
    createParticles();
    function createParticles() {
        var geom = new THREE.Geometry();
        var material = new THREE.PointCloudMaterial({
           size:4,
           vertexColors:true,color:0xffffff
        });
        for (var x = -5; x < 5; x++) {
            for (var y = -5; y < 5; y++) {
                var sprite = new THREE.Vector3(x * 10, y * 10, 10);
                geom.vertices.push(sprite);
                geom.colors.push(new THREE.Color(Math.random()*0xffffff));
            }
        }
        var cloud = new THREE.PointCloud(geom,material);
        scene.add(cloud);
    }


    renderer.render(scene,camera);

    var trackballControls = new THREE.TrackballControls(camera);
    var clock = new THREE.Clock();

    function run() {
        var delta = clock.getDelta();
        trackballControls.update(delta);
        requestAnimationFrame(run);
        renderer.render(scene,camera);
    }
    run();

    window.addEventListener('resize',onResize,false);
    function onResize() {
        camera.aspect = window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth,window.innerHeight);
    }
</script>
</body>
</html>