Three.js

Question

我想创造一种棕色的烟雾在天空中飘扬。

我该如何创建这个？

Answer 1

ShaderParticleEngine 收到了 three.js-r72 的重写 heavy API 更改，因此我正在更新此答案。请参阅此回答历史以比较 ShaderParticleEngine 0.8 / three.js-r71 的 and/or 设置。

它现在允许用户微调更多参数，因此您可以创建这种美丽的扭曲烟雾：

屏幕截图中发射器的示例设置：

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

Three.js - 如何用 Three.js 制造烟雾？

Three.js - How to create smoke with Three.js?

javascript

particles

smoke