WEBGL真实烟雾实现

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

HR_Reborn

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

阅读量327

点赞数

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

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

版权

WEBGL 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

<!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 camera, scene, renderer,
        geometry, material, mesh;

    init();
    animate();

    function init() {
        clock = new THREE.Clock();

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 1000;
        scene.add(camera);

        geometry = new THREE.CubeGeometry(200, 200, 200);
        material = new THREE.MeshLambertMaterial({
            color: 0xaa6666,
            wireframe: false
        });
        mesh = new THREE.Mesh(geometry, material);
        cubeSineDriver = 0;

        THREE.ImageUtils.crossOrigin = ''; //Need this to pull in crossdomain images from AWS

        textGeo = new THREE.PlaneGeometry(300, 300);

        light = new THREE.DirectionalLight(0xffffff, 0.5);
        light.position.set(-1, 0, 1);
        scene.add(light);

        smokeTexture = THREE.ImageUtils.loadTexture("/example/textures/Smoke-Element.png");
        smokeMaterial = new THREE.MeshLambertMaterial({
            color: 0xfffff0,

            map: smokeTexture,
            transparent: true
        });
        smokeGeo = new THREE.PlaneGeometry(300, 300);
        smokeParticles = [];

        for (p = 0; p < 150; p++) {
            var particle = new THREE.Mesh(smokeGeo, smokeMaterial);
            particle.position.set(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 1000 - 100);
            particle.rotation.z = Math.random() * 360;
            scene.add(particle);
            smokeParticles.push(particle);
        }
        document.body.appendChild(renderer.domElement);
    }

    function animate() {
        delta = clock.getDelta();
        requestAnimationFrame(animate);
        evolveSmoke();
        render();
    }

    function evolveSmoke() {
        var sp = smokeParticles.length;
        while (sp--) {
            smokeParticles[sp].rotation.z += (delta * 0.2);
        }
    }

    function render() {
        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;
        cubeSineDriver += .01;
        mesh.position.z = 100 + (Math.sin(cubeSineDriver) * 500);
        renderer.render(scene, camera);
    }
</script>

</body>
</html>

HR_Reborn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WEBGL真实烟雾实现

<!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"> <styl.
复制链接

扫一扫