Three.js - 如何使用 Three.js 创建烟雾？答案

【问题标题】：Three.js - How to create smoke with Three.js?Three.js - 如何使用 Three.js 创建烟雾？
【发布时间】：2015-09-30 06:00:13
【问题描述】：

我想在天空中制造棕色的烟雾。

我怎样才能创建这个？

【问题讨论】：

您能否提供一张图片显示最终结果可能是什么样的？
检查三个.js。
this 这个例子很有用。

标签： javascript three.js particles smoke

【解决方案1】：

ShaderParticleEngine 收到了对three.js-r72 的重写，并带有大量 API 更改，因此我正在更新此答案。有关ShaderParticleEngine 0.8 / 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,
});

三.js r73

【讨论】：

图片一点 :) r72 还有一个粒子引擎threejs.org/examples/#webgl_gpu_particle_system
哈哈谢谢！新的粒子插件看起来也不错，但它缺少一个好的documentation 和到目前为止的例子:-(
我现在如何将这种烟雾添加到场景中？我应该做 scene.add(crashmitter) 吗？
啊这样的：scene.add(particleGroupCrash.mesh);