Three.js-如何使用Three.js冒煙？

Question

我想創造出在天空中吹起的褐色煙霧。

我該如何創建呢？

Answer 1

ShaderParticleEngine收到對three.js-r72的重寫， three.js-r72 API進行了重大更改，因此我正在更新此答案。 有關ShaderParticleEngine 0.8 / three.js-r71的比較和/或設置， three.js-r71答復歷史記錄。

---

現在，它允許用戶微調甚至更多的參數，因此您可以創建這種美麗的扭曲煙霧：

屏幕截圖中發射器的示例設置：

 var loader = new THREE.TextureLoader(); var url = 'assets/images/particles/cloudSml.png'; var texture = loader.load( url ); var particleGroupCrash = new SPE.Group({ texture: { value: texture }, blending: THREE.NormalBlending }); var crashemitter = new SPE.Emitter({ maxAge: { value: 12 }, position: { value: new THREE.Vector3( 0, 0, 0 ), spread: new THREE.Vector3( 1, 0.5, 2 ), }, size: { value: [ 2, 8 ], spread: [ 0, 1, 2 ] }, acceleration: { value: new THREE.Vector3( 0, 0, 0 ), }, rotation: { axis: new THREE.Vector3( 0, 1, 0 ), spread: new THREE.Vector3( 0, 20, 0 ), angle: 100 * Math.PI / 180, }, velocity: { value: new THREE.Vector3( 0, 1, -0.5 ), spread: new THREE.Vector3( 0.25, 0.1, 0.25 ) }, opacity: { value: [ 0.2, 0.5, 0 ] }, color: { value: [ new THREE.Color( 0x333333 ), new THREE.Color( 0x111111 ) ], spread: [ new THREE.Vector3( 0.2, 0.1, 0.1 ), new THREE.Vector3( 0, 0, 0 ) ] }, particleCount: 600, }); 

Three.js R73