html粒子代码灵感。

作者：System 时间：2024年08月23日分类：所有,html 字数：2421



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Particle Code Inspiration</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .particles {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }
        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="particles" class="particles">
        <canvas></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/EffectComposer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/RenderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/postprocessing/ShaderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/shaders/CopyShader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/examples/js/shaders/DotScreenShader.js"></script>
    <script>
        const {
            Scene,
            PerspectiveCamera,
            WebGLRenderer,
            Mesh,
            MeshBasicMaterial,
            PlaneGeometry,
            Vector2,
            Raycaster,
            TextureLoader,
            BufferGeometry,
            BufferAttribute,
            PointsMaterial,
            Points,
            AdditiveBlending,
            Color,
            BackSide,
            SpotLight,
            MeshPhongMaterial
        } = THREE;
 
        let scene, camera, renderer, composer;
        const container = document.querySelector('.particles');
        const mouse = new Vector2();
        const raycaster = new Raycaster();
        const objects = [];
        const params = {
            exposure: 1,
            bloomStrength: 1.6,
            bloomThreshold: 0,
            bloomRadius: 0.
        };
 
        init();
        animate();
 
        function init() {
            scene = new Scene();
            camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
            c
html粒子代码灵感。

评论已关闭

推荐阅读
