Fire with Threejs is super easy

“This is the 28th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

background

Recently wrote some articles about Threejs, we are very interested, the page view is very high, because Threejs is very playable, but for small white user operation is not so easy to use, after all, Threejs still has a certain learning threshold, in order to reduce the learning threshold of threejs, Threejs plugin (three.probe.js) is a threejs plugin that lets you see what it looks like.

introduce

3. Proton is a fantastic 3D particle engine that uses 3. It’s based on the Proton engine library. It inherits the most Api from Proton, and it’s very simple and very useful.

The document

Liverpoolfc.tv: drawcall. Making. IO/three. The proto…

Github:github.com/drawcall/th…

NPMJS: www.npmjs.com/package/thr…

implementation

Because Threejs update quickly, some attributes are not the same, so it is best to use the version given by the official website, so there will not be errors! (Or just use the link I gave you).

To prepare

1. Three. Js: drawcall. Making. IO/three proto…
2. Three. The proton. Js: drawcall. Making. IO/three proto…
3. Stats. Js: drawcall. Making. IO/three proto…
4. TrackballControls. Js: drawcall. Making. IO/three proto…
5. Optical images, is as follows: drawcall. Making. IO/three proto…

start

The HTML code

Create a container

<div id="container"></div>
Copy the code

CSS code

body {
    font-family: Monospace;
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
Copy the code

The introduction of js library

<script src=".. /lib/stats.min.js"></script>
<script src=".. /lib/three.min.js"></script>
<script src=".. /build/three.proton.min.js"></script>
<script src="./js/lib/TrackballControls.js"></script>
Copy the code

Js code

1. Variable initialization

var proton, emitter;
Copy the code

2. Creating a particle object

proton = new Proton();
Copy the code

3. Create a flame

function createEmitter() {
        emitter = new Proton.Emitter();
        emitter.rate = new Proton.Rate(new Proton.Span(10.15), new Proton.Span(.05.1.));
        emitter.addInitialize(new Proton.Body(createSprite()));
        emitter.addInitialize(new Proton.Mass(1));
        emitter.addInitialize(new Proton.Life(1.3));
        emitter.addInitialize(new Proton.Position(new Proton.SphereZone(20)));
        emitter.addInitialize(new Proton.V(new Proton.Span(500.800), new Proton.Vector3D(0.1.0), 30));
        emitter.addBehaviour(new Proton.RandomDrift(10.10.10..05));
        / / emitter. AddBehaviour (new Proton. Alpha (1, 0.1));
        emitter.addBehaviour(new Proton.Scale(new Proton.Span(2.3.5), 0));
        emitter.addBehaviour(new Proton.G(6));
        emitter.addBehaviour(new Proton.Color('#FF0026'['#ffff00'.'#ffff11'].Infinity, Proton.easeOutSine));
        emitter.p.x = 0;
        emitter.p.y = -150;
        emitter.emit();
        return emitter;
    }
Copy the code

4. Create a flame trail

function addInteraction() {
        window.addEventListener('mousemove', onMouseMove, false);
        var pos = {
            x: 0.y: 0
        };

        function onMouseMove(event) {
            pos.x = event.clientX;
            pos.y = event.clientY;
            var target = Proton.THREEUtil.toSpacePos(pos, camera, renderer.domElement);
            emitter.p.x += (target.x - emitter.p.x) / 10;
            emitter.p.y += (target.y - emitter.p.y) / 10;
            emitter.p.z += (target.z - emitter.p.z) / 10; }}Copy the code

5. Map the flame

function createSprite() {
        var map = new THREE.TextureLoader().load("https://drawcall.github.io/three.proton/engine/example/img/dot.png");
        
        var material = new THREE.SpriteMaterial({
            map: map,
            color: 0xff0000.blending: THREE.AdditiveBlending,
            fog: true
        });
        return new THREE.Sprite(material);
    }
Copy the code

6. Render the flame

proton.addEmitter(createEmitter());
proton.addRender(new Proton.SpriteRender(scene));
Copy the code

7. Page rendering

function render() {
    proton.update(clock.getDelta());
    renderer.render(scene, camera);
    controls.update();

    Proton.Debug.renderInfo(proton, 3);
}
Copy the code

8. Add animation

function animate() {
    stats.begin();
    requestAnimationFrame(animate);
    render();
    stats.end();
 }
Copy the code

Threejs initialization

1. Variable initialization

var camera, scene, renderer, clock, spring, controls;
Copy the code

2. Create a new scene

function addScene() {
    camera = new THREE.PerspectiveCamera(70.window.innerWidth / window.innerHeight, 1.1000);
    camera.position.z = 500;
    scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0xffffff.1.10000);

    clock = new THREE.Clock();

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
}
Copy the code

3. Adding a Controller

function addControls() {
    controls = new THREE.TrackballControls(camera);
    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.noZoom = false;
    controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;
}
Copy the code

4. Add the light

function addLights() {
    var ambientLight = new THREE.AmbientLight(0x101010);
    scene.add(ambientLight);

    var pointLight = new THREE.PointLight(0xffffff.2.1000.1);
    pointLight.position.set(0.200.200);
    scene.add(pointLight);
}
Copy the code

5. Performance monitoring

function addStats() {
    stats = new Stats();
    stats.showPanel(0);
    stats.dom.style.position = 'absolute';
    stats.dom.style.left = '0px';
    stats.dom.style.top = '0px';
    container.appendChild(stats.dom);
}
Copy the code

The effect

conclusion

This article is very simple, some pits, you can go to the official website to view, there are particles and complete code, you can directly download the view, the effect is very good, implementation is also very easy, you can operate again by yourself. Thank you for watching!