preface

Recently, particle effects were used in the project, and the preview is as follows:

Full project preview:

solution

Extract the vertex information in the model, and then use the Points of three.js to achieve.

Extract vertex information

How to extract vertex information of OBJ model, click here to see.

The key code

Three. Js initialization

/ / the scene
this.scene = new THREE.Scene();
/ / the renderer
this.renderer = new THREE.WebGLRenderer({canvas:this.canvas,antialias: true, alpha:true});
this.renderer.setSize(window.innerWidth,window.innerHeight,false);
this.renderer.setViewport(0.0.window.innerWidth,window.innerHeight);
/ / camera
this.camera = new THREE.PerspectiveCamera(45.window.innerWidth/window.innerHeight,1.4000);
this.camera.position.set(0.0.200);
this.scene.add(this.camera);
Copy the code

Click material initialization

this.particleMaterial = new THREE.PointsMaterial({
    size: 1.5,
    color: 0x6976a3,
    map: new THREE.TextureLoader().load(textureAssets), / / map
    blending: THREE.AdditiveBlending,
    depthTest: !0,
    alphaTest: 1.,
    opacity: 1,
    transparent: !0
});
Copy the code

Gets vertex information in the model and assigns vertex information

this.geo = new THREE.Geometry(); // Create a Geometry to store vertex information
this.geo.center();
this.geo.normalize();
const vertices = json.vertices; // json is the data exported from the OBJ model, where the vertex information is obtained
for(let i = 0; i < vertices.length/3; i++){
    const particle:THREE.Vector3 = new THREE.Vector3(
        vertices[i*3],
        vertices[i*3+1],
        vertices[i*3+2]);this.geo.vertices.push(particle);
}
this.points = new THREE.Points(this.geo,this.particleMaterial); // Create a particle
this.scene.add(this.points);
Copy the code

Begin to render

private render(){
    this.animationFrame = requestAnimationFrame((a)= >{
        this.render();
    });
    this.geo.verticesNeedUpdate = true;
    this.renderer.render(this.scene,this.camera);
}
this.render();
Copy the code

conclusion

Three. js provides a complete interface for implementing particle effects. All we need to do is get and assign vertex information.

More articles

  • Check out more of my articles: github.com/ningbonb/bl…
  • Check out other articles of netease Creative Department: github.com/f2e-netease…