webgl火焰特效（证实可用）

最新推荐文章于 2024-04-25 16:43:58 发布

HR_Reborn

最新推荐文章于 2024-04-25 16:43:58 发布

阅读量409

点赞数

分类专栏： WEBGL 文章标签： javascript three.js

本文链接：https://blog.csdn.net/HR_Reborn/article/details/119945649

版权

WEBGL 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

1、代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <style>
        body{
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }
        a{
            color: #0078ff;
        }
    </style>
</head>
<body onload="draw();">
</body>
<script src="../build/three.js"></script>
<script src="../node_modules/three/examples/js/renderers/Projector.js"></script>
<script src="../node_modules/three/examples/js/renderers/CanvasRenderer.js"></script>
<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>
<script src="../node_modules/three/examples/js/libs/tween.min.js"></script>
<script src="../THREE.MeshLine/demo/js/dat.gui.min.js"></script>var
<script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script>
    var container;
    var renderer;
    //鼠标坐标
    var mouseX = 0,mouseY = 0;
    //窗口中心点
    var windowHalfX = window.innerWidth /2;
    var windowHalfY = window.innerWidth /2;
    //初始化空的容器，装在粒子
    {
        var krq = new THREE.Object3D();
        krq.position.z = -200;
        krq.rotateZ(1);
    }

    function initRender(){
        //创建容器div并添加到document中
        container = document.createElement('div');
        document.body.appendChild(container);
    }

    var camera;
    function  initCamera() {
        camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,5000);
        camera.position.z = 1000;
    }

    var scene;
    function initScene()
    {
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000040);
        scene.add(krq);
    }

    var light;
    function initLight(){  //初始化光
        scene.add(new THREE.AmbientLight(0x404040));
        light = new THREE.DirectionalLight(0xffffff);
        light.position.set(1,1,1);
        scene.add(light)
    }

    function initModel(){  //初始化轴辅助
        var object = new THREE.AxesHelper(500);
        scene.add(object);
    }

    var stats;
    function initStats() {
        stats = new Stats();
        container.appendChild(stats.dom);
    }

    var fireConGui;
    var cloud;
    function initGui() {  //初始化gui
        fireConGui = {
            //"粒子尺寸" : 2,
            //"背景透明" : true,
            //"vertexColor" : true,
            //"粒子速度" : 8,
           // "粒子颜色" : 0Xffffff,
            //"sizeAttenuation" : true,
            //"rotateSystem" : false,
            redraw : function () {
                if(cloud){
                    scene.remove(cloud);
                }
                createParticles( fireConGui.粒子尺寸, fireConGui.背景透明, fireConGui.粒子速度,fireConGui.粒子颜色);
            }
        };
        var datGui = new dat.GUI();
        //datGui.add( fireConGui,'粒子速度',8,40).onChange( fireConGui.redraw);
       // datGui.add( fireConGui,'粒子尺寸',1,10).onChange( fireConGui.redraw);
        //datGui.add( fireConGui,'背景透明').onChange( fireConGui.redraw);
        //datGui.addColor( fireConGui,'粒子颜色').onChange( fireConGui.redraw);
        fireConGui.redraw();
    }

    //生成粒子的方法
    function createParticles(size, transparent, speed,color) {
        var material = new THREE.SpriteMaterial({    //sprite材质{
            size : size,
            transparent : true,
            opacity : 0.08,
            color : color,
            map : new THREE.CanvasTexture(generateSprite()),
            blending: THREE.AdditiveBlending,
        });
        for(var i = 0; i < 1500; i++){
            var particle = new THREE.Sprite(material);
            initParticle(particle, i*10 );
            krq.add(particle);
        }
        //生成模型，添加到场景当中
        renderer = new THREE.CanvasRenderer();
        //设置像素比
        renderer.setPixelRatio(window.devicePixelRatio);
        //设置大小
        renderer.setSize(window.innerWidth,window.innerHeight);
        //添加render到容器
        container.appendChild(renderer.domElement);

        //窗口大小检测
        window.addEventListener('resize',onWindowResize,false)
    }

    function onWindowResize() {
        windowHalfX = window.innerWidth /2;
        windowHalfY = window.innerHeight /2;
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth,window.innerHeight);
    }

    function generateSprite() {
        //创建 canvas并设置大小
        var canvas = document.createElement('canvas');
        canvas.width = 16;
        canvas.height = 16;
        //得到2d，canvas
        var context = canvas.getContext('2d');
        //渐变方式
        var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
        gradient.addColorStop(0, 'rgba(255,97,0,5)');
        gradient.addColorStop(0.6, 'rgba(178,34,34,5)');
        gradient.addColorStop(0.8, 'rgba(255,128,0,1)');
        gradient.addColorStop(1, 'rgba(255,0,0,1)');

        //#ff9500
        //填充方式
        context.fillStyle = gradient;
        //context.setFillStyle = gradient;
        //填充矩形
        context.fillRect(0, 0, canvas.width, canvas.height);
        return canvas;
    }

    function initParticle(particle,delay) {
        //粒子
        var particle = this instanceof THREE.Sprite ? this : particle;
        var delay = delay !== undefined ? delay : 0;
        //粒子大小以及位置
        particle.position.set(0,0,0);
        particle.scale.x = particle.scale.y = Math.random() * 32 + 16;
        //下面是一系列动画
        var xx= Math.random() * 400 - 200;
        var yy= - Math.cos((Math.PI/400)*xx)* 500;
        //位移
        new TWEEN.Tween(particle.position)
        .delay(delay)
        .to({
            x:xx,
            y:yy,
            z:Math.random()*-100 + 50
        },3000)
        .start();
        if(Math.abs(xx) > 150){
            new TWEEN.Tween(particle)
            .delay(delay)
            .to({},0)
            .onComplete(initParticle)
            .start();
        }else{
            new TWEEN.Tween(particle)
                .delay(delay)
                .to({},2000)
                .onComplete(initParticle)
                .start();
        }
        //大小
        new TWEEN.Tween(particle.scale)
        .delay(delay)
        .to({x:0.01,y:0.01},2000)
        .start();
    }

    function render() {
        renderer.render(scene,camera);
        TWEEN.update();
        if(krq.position.z !=0){
            krq.position.z += 1;
            krq.position.x;
        }else{
            krq.rotation.z = 3;
        }
        renderer.render(scene,camera );
    }

    var controls;
    function  initControls() {
        controls = new THREE.OrbitControls(camera,container);
        controls.enableDamping = true;
        controls.enableZoom = true;
        controls.autoRotate = false;
        controls.enablePan = true;
    }

    function  animate() {
        requestAnimationFrame(animate);
        render();
        controls.update();
        stats.update();
    }

    function draw() {
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();
        initGui();
        animate();
        window.onresize = onWindowResize();
    }
</script>
</html>

HR_Reborn

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webgl火焰特效（证实可用）

1、代码如下<!DOCTYPE html><html lang="en"> <head> <title>TJH ar.js</title> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta
复制链接

扫一扫