<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程048 - 创建粒子模拟下雨雨滴效果</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>

<body>
    <script>
        var myRenderer, myCamera, myScene, myPoints;
        //创建渲染器
        function initRender() {
            myRenderer = new THREE.WebGLRenderer({ antialias: true });
            myRenderer.setClearColor(new THREE.Color(0xffffff));
            myRenderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(myRenderer.domElement);
            myCamera = new THREE.PerspectiveCamera(45,
                window.innerWidth / window.innerHeight, 1, 200);
            myCamera.position.set(0, 20, 100);
            myCamera.lookAt(new THREE.Vector3(0, 30, 0));
            myScene = new THREE.Scene();
        }
        //创建粒子(雨滴)
        function createParticles(size, transparent, opacity,
            vertexColors, sizeAttenuation, color) {
            var myTexture = new THREE.TextureLoader().load("images/img057.png");
            var myGeometry = new THREE.Geometry();
            var myMaterial = new THREE.PointsMaterial({
                size: size, transparent: transparent, opacity: opacity,
                vertexColors: vertexColors, sizeAttenuation: sizeAttenuation,
                color: color, map: myTexture, depthTest: false
            });
            var myRange = 120 * 3;
            for (var i = 0; i < 9500; i++) {
                var myPoint = new THREE.Vector3(Math.random() * myRange - myRange / 2,
                    Math.random() * myRange - myRange / 2, Math.random() * myRange - myRange / 2);
                myPoint.velocityY = 0.1 + Math.random() / 5;
                myPoint.velocityX = (Math.random() - 0.5) / 3;
                myGeometry.vertices.push(myPoint);
                var myColor = new THREE.Color(0xffffff);
                myGeometry.colors.push(myColor);
            }
            myPoints = new THREE.Points(myGeometry, myMaterial);
            myScene.add(myPoints);
        }
        //渲染粒子(雨滴)
        function animate() {
            var myVertices = myPoints.geometry.vertices;
            //实现雨滴下落动画
            myVertices.forEach(function (v) {
                v.y = v.y - (v.velocityY) * 3;
                v.x = v.x - (v.velocityX) * .5;
                if (v.y <= -60) v.y = 60;
                if (v.x <= -120 || v.x >= 120) v.velocityX = v.velocityX * -1;
            });
            //实时更新雨滴位置信息
            myPoints.geometry.verticesNeedUpdate = true;
            myRenderer.render(myScene, myCamera);
            requestAnimationFrame(animate);
        }
        initRender();
        createParticles(6, true, 0.8, true, true, 0xffffff);
        animate();
    </script>
</body>

</html>

# javascript # 开发语言 # ecmascript # 前端
Logo
乐奇 Rokid 开放社区

更多推荐

用径向菜单完成 macOS 窗口管理的 Loop 上手指引

周三上午，你要同时摆好代码、终端、文档三个窗口。别急着来回拖拽，先按住触发键，把鼠标指向屏幕右侧，窗口就落进了右半屏。这就是 macOS 窗口管理工具 Loop，它用径向菜单和预览窗口，替掉了繁琐的拖边操作。## 🚀 5 步装好 Loop 并完成第一次窗口调整**第 1 步：安装**用 Homebrew 一行装好：```brew install loop```也可以克隆源

avatar 乐奇 Rokid 开放社区

注册 memU 的 Claude Code bridging 任务前，如何为 claude -p 准备好 headless 认证

memU 的 Claude Code bridging 任务是一个定时作业，它从裸的、非交互的环境里调用 `claude -p` 来挖掘最近的 Claude Code 会话并写入记忆。这意味着在注册这个定时任务之前，必须先有一个能独立解析、能 headless 认证的 `claude` CLI——[BRIDGING_TASK.md](https://link.gitcode.com/i/85f1a

avatar 乐奇 Rokid 开放社区

Plate 模板 CI 修复实战：Registry 辅助依赖与 RSC 客户端边界的完整排查指南

本文以 Plate 仓库中 [2026-04-06-fix-template-ci-registry-helper-deps.md](https://link.gitcode.com/i/4790f561dac586c6b2e17e1cadaa2911) 这份修复计划为骨架，完整复盘一次"模板 CI 构建失败"的真实排查过程：注册表（registry）UI/插件重构引入了一批辅助文件后，`plat

avatar 乐奇 Rokid 开放社区