1000 powder! Use Three.js to implement a creative commemorative page 🏆

Disclaimer: The graphic and model materials involved in this article are only for personal study, research and appreciation. Please do not re-modify, illegally spread, reprint, publish, commercialize, or conduct other profit-making activities.

background

Unconsciously, the number of followers of the Nuggets has exceeded 1000 , so I specially made this page to commemorate it, thank you for your attention 🙇‍ , I hope Sifu's fans will also rise. In the future, we will continue to work hard and continue to output some valuable articles. The technology stack involved in this article is React + Three.js + Stulus . The main knowledge points included in this article include: cone geometry ConeGeometry , cylinder geometry CylinderGeometry , material capture texture material MeshMatcapMaterial 、文字FontLoader TextGeometry 、使用Gsap 362fe1f30345aa2cffed043b1b268a97---和它的插件---d9b1f07d80401c484a6267e4b847343f Physics2DPlugin动画、 rotateOnAxis method realizes the rotation around the axis, etc.

By the way, I will create a new column specially for the Three.js series [Three.js Odyssey Advanced Tour] , which is a column signed by the Nuggets 📚 . Starting from the basic entry, comprehensively understand the various features of Three.js , and combine and apply the corresponding features to realize the eye- Web creative page, and then gradually explore Three.js and WebGL deep knowledge. Promote it here, if you are interested, you can follow a wave 😘 .

Effect

页面📃主要由四部分组成，分别是：文字1000! 、文字THANK YOU 、掘金三维Logo 、以及纸片礼花 🎉 . Among them, the text has a flip animation, and the nuggets Logo have a rotation animation effect. When you click the screen with the mouse 🖱 , the *★,°*:.☆(￣▽￣)/$:*.°★* 。 sprinkle effect will appear.

Open any of the links below to preview the effect online. This page is suitable for PC and mobile terminals , and the large-screen access effect is better.

• 👁‍🗨 Online preview address 1: https://3d-eosin.vercel.app/#/fans
• 👁‍🗨 Online preview address 2: https://dragonir.github.io/3d/#/fans

accomplish

📦 Resource import

First, introduce the necessary resources for development at the top, in addition to the basic React and style sheet, THREE is --- OrbitControls Three.js library; Used for lens track control, you can use the mouse to move or rotate the model; Text is a class for creating text models; Confetti is a class for creating fireworks effects, in the back The content will be described in detail.

 import './index.styl';
import React from 'react';
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Text from '@/assets/utils/Text';
import Confetti from '@/assets/utils/Confetti';

📃 Page structure

The main structure of the page is very simple, of which .webgl is used for rendering 3D element; .logo is the icon decoration on the page, .github The Github link address of this project.

 <div className='fans_page'>
  <canvas className='webgl'></canvas>
  <i className='logo'></i>
  <i className='logo click'></i>
  <a className='github' href='https://github.com/dragonir/3d' target='_blank'></a>
</div>

CREATE Logo

When creating Logo , first create a Group , and then add Logo to each part of Group , which is beneficial to Logo 653c03752af285d40f39 Logo Adjust the position and add animation as a whole, which is also good for page loading performance. Next, create three parts of the Logo model with the following steps:

• Create a generic material MeshMatcapMaterial , Logo all constituent meshes of the model will use this material;
• Use ConeGeometry to create the top 四棱锥 and apply a material;
• Use CylinderGeometry to create an intermediate 四棱台 and apply a material;
• Create bottom 四棱台 CylinderGeometry ---ddb9afea11a568b6a6b1c0b2c1a0ae22--- and apply material;
• Add the above grid model to Group , and adjust the overall position, size, and set the tilt angle for better page visual effects.

📌实际开发中，应用ConeBufferGeometry 、 CylinderBufferGeometry代替---9fb57551d081bcfaf6d5d9e66506491a ConeGeometry CylinderGeometry ，以便获得更好performance.

The calculation parameters of the model in this example are shown in the figure above. The four faces of the top quadrangular prism are equilateral triangles with side lengths --- 9f62ebe57b630138816c324e6511edb6 4 , and the side lengths of the other two prisms are also 4 , the length parameters of other sides can be calculated by the Pythagorean theorem and trigonometric functions , and detailed calculations are not made in this article. ( PS : The schematic diagram of the model is drawn with the Windows drawing tool, which is a bit ugly 🤣 )

 const logo = new THREE.Group();
// 材质捕捉纹理材质
const logoMaterial = new THREE.MeshMatcapMaterial({
  matcap: this.matcaps.logoMatcap,
  side: THREE.DoubleSide,
});
// 顶部四棱锥
const cone = new THREE.Mesh(new THREE.ConeGeometry(4, 4, 4), logoMaterial);
logo.add(cone);
// 中间四棱台
const cylinder = new THREE.Mesh(new THREE.CylinderGeometry(6, 10, 4, 4, 1), logoMaterial);
cylinder.position.y = -6
logo.add(cylinder);
// 底部四棱台
const cylinder2 = new THREE.Mesh(new THREE.CylinderGeometry(12, 16, 4, 4, 1), logoMaterial);
cylinder2.position.y = -12
logo.add(cylinder2);
logo.position.set(0, 0, 0);
logo.scale.set(11, 11, 11);
// 设置倾斜角度
logo.rotateY(Math.PI * 0.2);
logo.rotateZ(Math.PI * 0.1);
scene.add(logo);

💡 知识点 ConeGeometry

Cone geometry ConeGeometry , is a class used to generate cone geometry, the more side segments the more round, the segment number in this example is 4 , so it looks like a four Pyramid.

Constructor :

 ConeGeometry(radius: Float, height: Float, radialSegments: Integer, heightSegments: Integer, openEnded: Boolean, thetaStart: Float, thetaLength: Float);

Parameter description :

• radius : The radius of the base of the cone, the default value is 1 .
• height : The height of the cone, the default value is 1 .
• radialSegments : The number of segments around the side of the cone, default is 8 .
• heightSegments : The number of segments of the cone's sides along its height, the default is 1 .
• openEnded : A Boolean value indicating whether the base of this cone is open or capped. The default value is false , which means the bottom surface is capped by default.
• thetaStart : the starting angle of the first segment, the default is 0 .
• thetaLength : The central angle of the circular sector of the base of the cone, usually called θ . The default is 2*PI , which makes it a full cone.

💡 知识点 CylinderGeometry

Cylinder Geometry CylinderGeometry , is a class for generating cylinder geometry. The middle and bottom of this article Logo are generated by this class.

Constructor :

 CylinderGeometry(radiusTop: Float, radiusBottom: Float, height: Float, radialSegments: Integer, heightSegments: Integer, openEnded : Boolean, thetaStart: Float, thetaLength: Float)

Parameter description :

• radiusTop : The top radius of the cylinder, the default value is 1 .
• radiusBottom : The base radius of the cylinder, the default value is 1 .
• height : The height of the cylinder, the default value is 1 .
• radialSegments : The number of segments around the side of the cylinder, default is 8 .
• heightSegments : The number of segments of the cylinder side along its height, default is 1 .
• openEnded : a Boolean value indicating whether the base of the cone is open or capped. The default value is false , which means the bottom surface is capped by default.
• thetaStart : The starting angle of the first segment, the default is 0 .
• thetaLength : The central angle of the circular sector on the base of the cylinder, usually called θ . The default is 2*PI , which makes it a full cylinder.

💡 知识点 Material capture texture material MeshMatcapMaterial

MeshMatcapMaterial captured by a material MatCap或光照球 defined by the texture, which encodes the color and shade of the material. Since the mapcap image file encodes baked lighting, the MeshMatcapMaterial does not react to lighting . It can cast shadows on an object that receives shadows, but does not cast shadows on itself or receive shadows.

Constructor :

 MeshMatcapMaterial(parameters: Object)

parameters : optional, an object that defines the appearance of the material, with one or more properties, any properties of the material can be passed in from here, including any properties inherited from Material .

• .color[Color] : The color of the material, the default value is white 0xffffff .
• .matcap[Texture] : matcap texture, default is null .
• Common properties of other Material base classes, etc.

MeshMatcapMaterial is a very useful material, simple use of this material can achieve complex texture effects, such as the gloss effect of Logo in this article, as well as the metallic effect of subsequent text and Transparent glass effect , choose the right material, you can achieve a variety of magical effects. The following picture is the material map of all the elements in this article. It can be seen that they are light sphere styles.

In addition to generating MeshMatcapMaterial in design software such as ---aaa33a0ddaee9888248bab2231458197 Blender , Photoshop 67bbfa760a3d9eda6bdaf09e7f47ae7a---, the following websites can download various beautiful materials for free, and have online real-time preview function, you can find suitable material pictures according to the content of page elements and your own needs. If you are interested, you can try it 😉 .

🔗 https://observablehq.com/@makio135/matcaps?ui=classic 🔗 https://github.com/nidorx/matcaps

🔗 [ http://jeanmoreno.com/unity/matcap/ ]() http://jeanmoreno.com/unity/matcap/

Create text 1000!

Next, to create the text, you need to import FontLoader to load the font file, which returns a font instance, and then use TextGeometry to create a text grid and add it to the scene That's it.

 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';

fontLoader.load('fontface.json', font => {
  textMesh.geometry = new TextGeometry('1000！', {
    font: font,
    size: 100,
    height: 40
  });
  scene.add(textMesh);
});

It looks very common , right? At this time, we can adjust the parameters such as the thickness of the characters, the size of the bevel angle, etc. to TextGeometry . until.

 textMesh.geometry = new TextGeometry('1000！', {
  font: font,
  size: 100,
  height: 40,
  curveSegments: 100,
  bevelEnabled: true,
  bevelThickness: 10,
  bevelSize: 10,
  bevelOffset: 2,
  bevelSegments: 10
});

Take a look at the optimized effect, you will be tall and tall in an instant ✨ !

Create text THANK YOU

Use the same method to add THANK YOU text mesh to the scene, and set the translucent glass effect to it MeshMatcapMaterial and the text thickness bevel style.

📌 the detailed application of text grid, you can see my article "Using Three.js to Realize Magical 3D Text Suspension Effect" , which will not be repeated in this article.

Create text animations

After the text is created, you can add some text flip animation to them. The animation effect is achieved by Gsap . In this article, a zoom and flip animation effect is added to the 1000！ text, and an up and down animation is added to THANK YOU The effect can be achieved by referring to the following methods.

 import gsap from 'gsap';
// 上下翻转动画
zoomAndFlip() {
  gsap.timeline({
    repeat: -1,
    defaults: {
      duration: 2,
      ease: 'elastic.out(1.2, 1)',
      stagger: 0.1,
    },
  })
  .to(this.meshesPosition, { z: this.meshesPosition[0].z + 100 }, 'start')
  .to(this.meshesRotation, { duration: 2, y: Math.PI * 2 }, 'start')
  .to(this.meshesRotation, { duration: 2, y: Math.PI * 4 }, 'end')
  .to(this.meshesPosition, { z: this.meshesPosition[0].z }, 'end');
}

Create Fireworks 🎉

Every time the page is opened and the screen is clicked, a fireworks effect can be produced. Each small fragment in the fireworks uses the surface-based buffer model PlaneBufferGeometry and MeshBasicMaterial basic material composition to create three bunches of fireworks in the scene, the position and size of the fragments in each bunch of fireworks Random and disappears automatically after a period of time. Similarly, the animation effect of fireworks is also used Gsap , and its plug-in Physics2DPlugin is used to achieve, Physics2DPlugin plug-in can simulate physical animation effects including gravity and speed , acceleration, friction animation, etc., with it, you can better achieve fireworks explosion and scattering effects. They can be used like in this article:

 import gsap from 'gsap';
const physics2D = require('./physics2D');
gsap.registerPlugin(physics2D.Physics2DPlugin);
// 对每一片礼花应用动画效果
gsap.to(this.confettiSprites[id], DECAY, {
  physics2D: {
    velocity,
    angle,
    gravity,
    friction,
  },
  ease: 'power4.easeIn',
  onComplete: () => {
    _.pull(this.confettiSpriteIds, id);
    this.parent.remove(this.meshes[id]);
    this.meshes[id].material.dispose();
    delete this.confettiSprites[id];
  },
});

💡 知识点

Physics2DPlugin Set 2D physical animation parabola effect optional parameters:

• velocity : initial speed
• angle : Angle
• gravity : Gravity
• acceleration : acceleration
• accelerationAngle : acceleration angle
• friction : Friction

Trigger animation when page is clicked

 window.addEventListener('pointerdown', e => {
  e.preventDefault();
  this.confetti && this.confetti.pop();
});

📌 text and fireworks effects are implemented in practice. In fact, two classes are encapsulated respectively, which are convenient for calling from the outside. For the specific implementation details, you can visit the source code link provided at the end of the article.

Zoom monitor and redraw animation

Add page zoom adaptation and redraw animations to update camera and track controllers etc. In the redraw animation, an effect of rotating around itself Y轴 Logo is added to ---55e8cca565954a81fdb4f81e1e407c9a---, which can be achieved by rotateOnAxis .

 window.addEventListener('resize', () => {
  this.width = window.innerWidth;
  this.height = window.innerHeight;
  this.camera.aspect = this.width / this.height;
  this.camera.updateProjectionMatrix();
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  this.renderer.setSize(this.width, this.height);
}, {
  passive: true
});

const animate = () => {
  requestAnimationFrame(animate);
  controls && controls.update();
  // 旋转动画
  logo && logo.rotateOnAxis(axis, Math.PI / 400);
  renderer.render(scene, camera);
}

❓ You can try it yourself rotateOnAxis and rotateY What is the difference in the rotation effect achieved to distinguish the two.

💡 知识点 rotateOnAxis

.rotateOnAxis is a method of Object3D Three.js base class for 3D objects in ---d8306cedb314073897e4475978efe68c---, which can rotate an object in local space about its axis, assuming this The axis has been normalized and it is used as shown below.

 .rotateOnAxis(axis: Vector3, angle: Float)

• axis : a normalized vector in local space.
• angle : Angle, expressed in radians.

Style detail optimization

At this point, the functions of the page have been completed 🍾 , and finally you can decorate the page, such as setting renderer to transparent, and then use it in CSS A good-looking picture with a sense of technology is used as the background of the page. Finally, add a few picture decorations in the corners and Github icon link, add a little CSS animation, and the overall visual effect of the page is obtained. A nice boost 😉 . Finally, thank you again for your attention! 🙇‍ 谢谢、栓Q、阿里嘎多

🔗 Source address: https://github.com/dragonir/3d/tree/master/src/containers/Fans

Summarize

The knowledge points contained in this article mainly include:

• Cone Geometry ConeGeometry
• Cylinder Geometry CylinderGeometry
• Material Capture Texture Material MeshMatcapMaterial
• Text created and decorated FontLoader and TextGeometry
• Use Gsap and its plugin Physics2DPlugin to create some animations
• rotateOnAxis Method to realize the rotation around the axis

If you want to know other front-end knowledge or other knowledge related to development technology that is not described in Web 3D in this article, you can read my previous articles. Please indicate the original address and author when reprinting . If you think the article is helpful to you, don't forget to click three links 👍 .

appendix

• New [Three.js Advanced Tour] Three.js series column 👈
• [1]. 🌴 Three.js to create a colorful summer 3D dream island
• [2]. 🔥 Three.js realizes cool cyberpunk style 3D digital earth screen
• [3]. 🐼 Three.js Realize the 2022 Winter Olympics theme 3D fun page, including Bingdundun
• More previous [3D] column visits👈
• ...
• [1]. 📷 The front-end implements a very impressive browser-side scanning function
• [2]. 🌏 The Legend of Zelda: Breath of the Wild
• [3]. 🌊 Use front-end technology to achieve partial flow effect of static images
• More previous [front-end] column visits👈
• ...