three.js使用import { BufferGeometry, CanvasTexture, Points, PointsMaterial, BufferAttribute, } from "three"; import { TCanvasTextureEditor } from "./TCanvasTextureEditor"; const canvasEditor = new TCanvasTextureEditor().draw((ctx) => { ctx.fillStyle = "rgb(0, 255, 0)"; ctx.arc(256, 256, 200, 0, Math.PI * 2); ctx.fill(); }); // .preview(); export const particleCount = 10000; export const geometry = new BufferGeometry() export const particlePositions = new Float32Array(particleCount * 3); for (var i = 0; i < particleCount; i++) { particlePositions[i * 3] = (Math.random() - 0.5) * 200; particlePositions[i * 3 + 1] = Math.random() * 250; particlePositions[i * 3 + 2] = (Math.random() - 0.5) * 200; } geometry.setAttribute('position', new BufferAttribute(particlePositions, 3)); console.log(geometry); const mapTexture = new CanvasTexture(canvasEditor.canvas); // export const pointsPartical: Points = new Points( geometry, new PointsMaterial({ color: "rgb(255, 255, 255)", alphaMap: mapTexture, transparent: true, sizeAttenuation: false, size: 5, }) ); pointsPartical.geometry.deleteAttribute('uv') pointsPartical.position.set(0, 10, 0);创建的粒子实现近大远小的功能

### 如何在 Three.js 中使用 MeshLine 为了创建具有特殊线条效果的对象，`MeshLine` 是一种非常有用的工具。这不仅能够绘制简单的线段，还可以应用复杂的材质和动画效果。 #### 安装依赖库 首先需要引入 `MeshLine` 库以及其对应的 shader 文件。可以通过 npm 或者直接下载文件并链接到项目中[^1]： ```bash npm install three-meshline ``` 接着，在 HTML 文件头部加入如下脚本标签来加载资源： ```html <script type="module"> import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js'; import { MeshLine, MeshLineMaterial } from 'https://cdn.jsdelivr.net/npm/three-meshline/dist/MeshLine.min.js'; </script> ``` #### 创建基本场景结构 初始化一个基础的 Three.js 场景框架，包括设置渲染器、相机视角等必要组件[^2]: ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` #### 构建 MeshLine 对象 定义顶点数组用于描述路径形状，并通过这些数据构建 `THREE.BufferGeometry` 实例；之后利用此几何体与自定义材料生成最终的网格对象[^3]： ```javascript // Define vertices for line path let points = []; for (let i = 0; i < 100; ++i) { let t = i / 99; points.push(new THREE.Vector3( Math.sin(t * Math.PI * 2), Math.cos(t * Math.PI * 2), 0)); } // Create buffer geometry with positions attribute const geometry = new THREE.BufferGeometry().setFromPoints(points); // Initialize MeshLine instance using given geometry const meshLine = new MeshLine(); meshLine.setGeometry(geometry); // Set up custom material properties like color gradient etc. const material = new MeshLineMaterial({ color: '#ff0000', lineWidth: 2, }); // Combine into single mesh object const lineObject = new THREE.Mesh(meshLine.geometry, material); scene.add(lineObject); camera.position.z = 5; function animate() { requestAnimationFrame(animate); // Rotate the line over time lineObject.rotation.x += 0.01; lineObject.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ``` 上述代码片段展示了如何基于给定的一系列坐标点建立一条动态旋转的红色曲线。当然实际开发过程中可以根据需求调整参数配置实现更多样化的视觉呈现方式。

### 实现思路 在 Three.js 中实现粒子喷泉效果，可以通过 `Points` 或 `BufferGeometry` 创建大量粒子，并结合 `ShaderMaterial` 进行高性能渲染。为了实现喷出后下降并在一段时间后消失的效果，需要使用自定义的粒子更新逻辑，包括速度、重力、生命周期和透明度变化。 ### 粒子系统设置 Three.js 本身不提供完整的粒子系统 API（如 Babylon.js 的 `ParticleSystem`），但可以通过手动创建几何体和材质来模拟类似效果。通过控制每个粒子的生命周期、方向和颜色，可以实现水蓝色的喷泉动画 [^2]。 ```ts import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 10; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); // 创建粒子几何体 const particleCount = 1000; const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); const velocities = new Float32Array(particleCount * 3); const lifetimes = new Float32Array(particleCount); const initialY = new Float32Array(particleCount); for (let i = 0; i < particleCount; i++) { // 初始位置集中在原点 positions[i * 3 + 0] = 0; positions[i * 3 + 1] = 0; positions[i * 3 + 2] = 0; // 初始速度随机方向，偏向垂直向上 const angle = Math.PI / 4 + (Math.random() - 0.5) * 0.5; const speed = 2 + Math.random() * 2; velocities[i * 3 + 0] = Math.cos(angle) * (Math.random() - 0.5) * 2; velocities[i * 3 + 1] = Math.sin(angle) * speed; velocities[i * 3 + 2] = Math.cos(angle) * (Math.random() - 0.5) * 2; lifetimes[i] = 0; initialY[i] = 0; } geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 } }, vertexShader: ` attribute vec3 velocity; varying float vLifetime; void main() { vLifetime = lifetime; vec3 pos = position + velocity * uTime; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); gl_PointSize = 5.0 * (1.0 - vLifetime); } `, fragmentShader: ` varying float vLifetime; void main() { float alpha = 1.0 - vLifetime; if (alpha < 0.0) discard; gl_FragColor = vec4(0.0, 1.0, 1.0, alpha); // 水蓝色 } ` }); const particles = new THREE.Points(geometry, material); scene.add(particles); // 动画循环 let clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); const time = clock.elapsedTime; const positions = geometry.attributes.position.array as Float32Array; const velocities = (material as any).uniforms.velocity.value.array as Float32Array; const lifetimes = (geometry as any).attributes.lifetime.array as Float32Array; for (let i = 0; i < particleCount; i++) { const life = lifetimes[i]; if (life >= 1.0) { // 重置粒子 positions[i * 3 + 0] = 0; positions[i * 3 + 1] = 0; positions[i * 3 + 2] = 0; const angle = Math.PI / 4 + (Math.random() - 0.5) * 0.5; const speed = 2 + Math.random() * 2; velocities[i * 3 + 0] = Math.cos(angle) * (Math.random() - 0.5) * 2; velocities[i * 3 + 1] = Math.sin(angle) * speed; velocities[i * 3 + 2] = Math.cos(angle) * (Math.random() - 0.5) * 2; lifetimes[i] = 0; } else { lifetimes[i] += delta; positions[i * 3 + 1] -= 0.05; // 重力影响 } } geometry.attributes.position.needsUpdate = true; material.uniforms.uTime.value = time; renderer.render(scene, camera); } animate(); ``` ### 关键特性说明 - **粒子发射器类型**：该实现属于方向发射器（Directional Emitter），粒子从原点沿特定方向喷射 [^1]。 - **颜色控制**：使用 `gl_FragColor` 设置为 `(0.0, 1.0, 1.0, alpha)` 来实现水蓝色 [^1]。 - **下降与消失**：通过在顶点着色器中应用重力（`positions[i * 3 + 1] -= 0.05`）使粒子下落，并根据生命周期控制透明度（`alpha = 1.0 - vLifetime`） [^2]。 - **生命周期管理**：当粒子的生命周期超过 1 秒时，将其重置到初始状态，以实现循环播放效果 [^2]。