three.js使用点制作烟雾效果

Question

我想通过使用点来制作类似此演示（烟雾）的烟雾效果。 现在我有两个问题。

1. 在动画开始时，所有点都聚集在一起，像云一样上升。
2. 效果的形状看起来像一个矩形棱柱。 如何使其看起来像圆锥形（如下图所示）？

有人可以告诉我如何解决这些问题吗？ 谢谢！

 let renderer, scene, camera; let controls, stats; // points const particleCount = 500; let points; function createPoints() { const geometry = new THREE.Geometry(); const texture = new THREE.TextureLoader().load('http://stemkoski.github.io/Three.js/images/smokeparticle.png'); let material = new THREE.PointsMaterial({ size: 15, map: texture, blending: THREE.AdditiveBlending, depthWrite: false, transparent: true, color: 'rgb(30,30,30)' }); const range = 10; for (let i = 0; i < particleCount; i++) { const x = THREE.Math.randInt(-range, range); const y = THREE.Math.randInt(-range, range); const z = THREE.Math.randInt(-range, range); const point = new THREE.Vector3(x, y, z); point.velocityX = THREE.Math.randFloat(-0.01, 0.01); point.velocityY = THREE.Math.randFloat(0.1, 0.3); geometry.vertices.push(point); } points = new THREE.Points(geometry, material); scene.add(points); } function init() { // scene scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x000000, 0.0008); // camera camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.set(0, 10, 170); camera.lookAt(scene.position); let axes = new THREE.AxesHelper(20); scene.add(axes); // renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); // OrbitControls controls = new THREE.OrbitControls( camera, renderer.domElement ); createPoints(); document.body.appendChild(renderer.domElement); } function pointsAnimation() { points.geometry.vertices.forEach(function(v) { vy = vy + v.velocityY; vx = vx + v.velocityX; if (vy >= 100) vy = 0; }); points.geometry.verticesNeedUpdate = true; } function render() { pointsAnimation(); requestAnimationFrame(render); controls.update(); renderer.render(scene, camera); } window.addEventListener('resize', function() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); init(); render(); 

 body { margin: 0; overflow: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 

Answer 1

您可以简单地根据点x设置velocityX ，例如：

point.velocityX = THREE.Math.randFloat(0.0, 0.1) * Math.sign(x);

不要忘记重置x位置：

if (v.y >= 100) {
  v.x = THREE.Math.randInt(-10, 10);
  v.y = 0;
}