three实现外8字粒子流三维动画效果代码-html代码-BFW代码库

three实现外8字粒子流三维动画效果代码

代码语言：html

代码描述：three实现外8字粒子流三维动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 3D 炫酷粒子8字流动</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* 隐藏滚动条 */
            background-color: #000000; /* 纯黑背景 */
        }
        canvas {
            display: block; /* 移除 canvas底部的微小间隙 */
        }
    </style>
</head>
<body>
    <!-- 引入 Three.js (使用 CDN) -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>

    <script>
        // --- 1. 初始化场景、相机和渲染器 ---
        let scene, camera, renderer;
        let w = window.innerWidth;
        let h = window.innerHeight;

        function init() {
            scene = new THREE.Scene();
            // 添加一点黑色雾气，增加深度感
            scene.fog = new THREE.FogExp2(0x000000, 0.002);

            camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
            camera.position.z = 60; // 调整相机距离
            camera.position.y = 0;
            camera.lookAt(0, 0, 0);

            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            renderer.setSize(w, h);
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setClearColor(0x000000); // 确保背景是黑色的
            document.body.appendChild(renderer.domElement);

           .........完整代码请登录后点击上方下载按钮下载查看